Learn JQuery in One Video

Posted by Derek Banas on Oct 14, 2015 in Web Design | 0 comments

In this video we’ll learn pretty much everything about JQuery. We’ll cover how to load the JQuery and JQuery UI libraries. We’ll also cover selecting elements, styling elements, adding text, retrieving text, changing attributes, JQuery events, JQuery animations, JQuery UI, and Ajax.

I did my best to condense everything you’d learn in a standard 200 page book down into one video. All the code used is available below. I also have a link to everything in a compressed form here for download.

If you like videos like this, it helps me when you tell Google with a click here

Code From the Video

jquerytut.html

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery Tutorial</title>

  <style type="text/css">
  .highlight { background-color: yellow; }
  </style>

  <!-- Get the JQuery library
  Jquery 1 & 2 are the same except JQuery 2 doesn't
  support IE 6, 7, and 8 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="wrapper">

<h1>Random Stuff</h1>

<p id="p_one"><img src="ntt-logo.png" id="logo2" alt="NTT Logo" height="180" width="180">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Aenean pretium</em>, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="#">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. <b>In pretium varius nisi</b>, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id gravida nunc consequat vel. <a href="#">Nullam nec condimentum magna</a>. Sed dignissim interdum risus ac mattis. In hac habitasse platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper.</p>
<p id="p_two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="mailto:derekbanas@verizon.net">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. In pretium varius nisi, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id <a href="http://google.com">gravida nunc consequat</a> vel. Nullam nec condimentum magna. Sed dignissim interdum risus ac mattis. <a href="http://www.newthinktank.com/wordpress/PersonalityTest.pdf">In hac habitasse</a> platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper.</p>

<p id="p_three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Aenean pretium,</i> ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula.</p>

<table id="tableData">
<caption>Baseball</caption>
<thead>
<tr>
<td colspan="4">Best Baseball Players</td>
</tr>
</thead>
<tfoot>
<tr><td colspan="4">* Hall of Fame</td></tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td>Average</td>
<td>RBIs</td>
<td>Homeruns</td>
</tr>
<tr>
<td><a href="#">Hank Aaron*</a></td>
<td>.305</td>
<td>2297</td>
<td>755</td>
</tr>
<tr>
<td><a href="#">Babe Ruth*</a></td>
<td>.342</td>
<td>2214</td>
<td>714</td>
</tr>
<tr>
<td><a href="#">Barry Bonds</a></td>
<td>.298</td>
<td>1996</td>
<td>762</td>
</tr>
</tbody>
</table>

<h2 id="bestSelling">Best Selling Childrens Books</h2>

<ol id="oListTypes">
<li>Harry Potter
<ol id="oListIndent">
<li>and the Sorcerer's Stone</li>
<li>and the Half-Blood Prince</li>
<li>and the Chamber of Secrets</li>
<li>Prisoner of Azkaban</li>
<li name="best_book">and the Goblet of Fire</li>
<li>and the Order of the Phoenix</li>
<li>and the Deathly Hallows</li>
</ol>
</li>
<li>The Very Hungry Caterpillar</li>
</ol>

<input type="text" id="yourName" size="50">

<input type="text" id="listStuff" size="50"><br />

<h2 id="trackEvents">Tracking Events</h2>

Mouse Click : X : <input type="text" id="mClickXPos">
Y : <input type="text" id="mClickYPos"><br />

Mouse Move : X : <input type="text" id="mMoveXPos">
Y : <input type="text" id="mMoveYPos"><br />

Key Pressed : <input type="text" id="keyPressed"><br />

<span id="formEvent">Form Event</span> : <input type="text" id="inputFormEvent"><br /><br />

<img src="1.jpg" id="accident" alt="accident">

<div id="jsonData"></div>

<button type="button" id="getData">Get Data</button>

<script type="text/javascript">

// When the document is ready execute the JQuery
$("document").ready(function() {

  // ADDING / REMOVING / CHANGING ELEMENTS

  // You can change CSS attributes like this
  // # targets ids and . targets classes
  $("#wrapper").css("width", 500);
  $("#wrapper").css("margin", "auto");
  $("#logo2").css("float", "left");
  $(".p_two").css("color", "purple");

  // How to pass in multiple arguments
  $(".p_two").css({"background" : "url('repeatBkgrnd.png') repeat-y"});

  // Target elements by tag
  $("a").css("color", "red");

  // Target tags only in other tags, classes, or ids
  $("#tableData a").css("color", "green");

  // Target every a element that comes after a em
  $("em + a").css("color", "orange");

  // Target children elements in elements
  $("p > em").css("color", "gray");

  // Target the 3rd li in a list
  $("#oListIndent li:nth-child(3)").css("color", "red");

  // Change the text in an html element if the li has a
  // name attribute
  $("li[name]").html("'and the Goblet of Fire'");

  // Change the value in a text input element
  $("input[type='text']#yourName").val("Derek");

  // Target items that contain a value (*=)
  $("a[href*='google']").css("font-weight", "bolder");

  // Target an image with an alt that starts with (^=) NTT
  // and change the border
  $("img[alt^='NTT']").css({"border-color": "black",
             "border-width":"1px",
             "border-style":"solid"});

  $("a[href^='http://g']").css("color", "cyan");

  $("a[href^='mailto:']").css("color", "yellow");

  // Change an image height and width on one line
  $("img[alt^='NTT']").width(150)
                      .height(150);

  // Target items that end with ($=) a value
  $("a[href$='pdf']").css("color", "red");

  // Select the odd (1,3,5) and even (0,2,4) items
  $("#tableData tr:even").css("background-color", "#FFFDD0");
  $("#tableData tr:odd").css("background-color", "#F0F8FF");

  // Select the first matching element
  $("#tableData tr:first").css({"background-color" : "#001A57", "color" : "white"});

  // Select the last matching element
  $("#tableData tr:last").css("background-color", "#FFC0DB");

  // Select the elements that don't contain 'and' in them
  $("#oListTypes li:not(:contains(and))").css("color", "red");

  // Select every a element that contains 'gravida'
  $("a:contains(gravida)").css("color", "blue");

  // Select every p element that contains a i element
  // and hide it
  $("p:has(i)").hide();

  // Display the text between the matching p element
  alert($("p:has(i)").html());

  // Change the text in the matching p element and show it
  // .text() works the same but it doesn't recognize html
  // elements
  $("p:has(i)").html("<i>Some normal text</i>").show();

  // Append adds text at the end of an element
  $("p:has(i)").append(" I go at the end");

  // Prepend adds text at the beginning of an element
  $("p:has(i)").prepend("I go at the beginning ");

  // Add a new element before the targeted one
  $("p:has(i)").before("<p id='before_p'>A new paragraph before</p>");

  // Add a new element after the targeted one
  $("p:has(i)").after("<p id='after_p'>A new paragraph after</p>");

  // When the element with the id 'after_p' is clicked
  // remove it from the document
  $("#after_p").click(function() {
    $(this).remove();
  });

  // Replace an element with another on click
  $("#before_p").click(function() {
    $(this).replaceWith('<p>I\'m the new paragraph</p>');
  });

  // Perform a different action on each matching element
  $("#oListIndent li").each(function(index) {

    // Get the value in the input element
    var inputListStuff = $("#listStuff").val();

    // Assign a new value to the input element
    // $(this).text() gets the value for each individual
    // li element
    $("#listStuff").val(inputListStuff + ", " + $(this).text());

  });

  // CHANGING ELEMENT ATTRIBUTES

  // Add a class to elements
  // .removeClass() will take the class away
  $("#oListIndent li").addClass("Harry_Potter");

  $(".Harry_Potter").css("color", "#36454F");

  // You can toggle classes on and off an element
  $("#oListIndent li").click(function() {
    $(this).toggleClass("highlight");

    // Get the changing background color and display it
    // in the input element
    var bgColor = $(this).css("background-color");
    $("input[type=text]#yourName").val(bgColor);
  });

  $("#logo2").click(function() {

    // Get the value stored in an attribute
    var imgName = $(this).attr("src");
    $("input[type=text]#yourName").val(imgName);

    // Change the value of an attribute
    $("#logo2").attr("src", "ntt-logo-horz.png");
  });

  // EVENTS IN JQUERY

  // Trigger events on mouseover
  $("#logo2").mouseover(function() {
    $("#logo2").attr("src", "ntt-logo-horz.png");
  });

  // Trigger events on mouseout
  $("#logo2").mouseout(function() {
    $("#logo2").attr("src", "ntt-logo.png");
  });

  // Handle mouseover and mouseout with hover
  $("h2").hover(function() {
    // mouseover
    $("h2").css("color", "green");
  }, function() {
    // mouseout
    $("h2").css("color", "black");
  });

  // Perform an action on double click
  $("#logo2").dblclick(function() {
    $("#logo2").attr("src", "ntt-logo-plastic.png");
  });

  // Get the document x and y position on click
  $(document).click(function(e) {
    $("#mClickXPos").val(e.pageX);
    $("#mClickYPos").val(e.pageY);
  });

  // Get the x and y as the mouse moves
  // Use screenX and screenY to get x and y for the screen
  $(document).mousemove(function(e) {
    $("#mMoveXPos").val(e.screenX);
    $("#mMoveYPos").val(e.screenY);
  });

  // Show key pressed on the keyboard
  // You can also use keydown() and keyup()
  $(document).keypress(function(e){

    // e.which returns the keycode which we convert into
    // the key with fromCharCode
    var keyPressed = String.fromCharCode(e.which)
    $("#keyPressed").val(keyPressed);
  });

  // Execute when input loses focus
  $("#inputFormEvent").blur(function() {
    $("#formEvent").text("Left Input Element");
  });

  // Execute when input value changes (Conflicts with blur)
  $("#inputFormEvent").change(function() {
    $("#formEvent").text("Input Element Changed");
  });

  // Execute when input gains focus
  $("#inputFormEvent").focus(function() {
    $("#formEvent").text("Input Element Focused");
  });

  // Execute when input value is selected
  $("#inputFormEvent").select(function() {
    $("#formEvent").text("Input Element Selected");
  });

  // We can assign events with on and pass the event to
  // track, an argument to pass and the function to call
  // You can attach multiple events by seperating them with
  // a space ex. "mouseover keypress"

  function showWhatTouched(e){
    alert(e.data.message);
  }

  var bsMsg = { message:"Best Selling Touched" };

  var teMsg = { message:"Track Events Touched" };

  $("#bestSelling").on("mouseover", bsMsg, showWhatTouched);

  $("#trackEvents").on("mouseover", teMsg, showWhatTouched);

  // Catch when the document loads with ready()
  // Catch if the browser resizes with resize()
  // Catch when an element is scrolled with scroll()

  // Create simple slide show
  var accidentImgs = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];

  var focusImg = 1;

  $("#accident").click(function() {

    var image = accidentImgs[focusImg];
    focusImg++;
    if(focusImg > 3){
      focusImg = 0;
    }

    $("#accident").attr("src", image);

  });

  // JQUERY ANIMATIONS

  // hide an element on click
  $("#p_one").click(function() {
    $(this).hide();
  });

  // slowly fade out an element over 2000 ms
  // You can also use fast, normal, and slow
  $("#p_two").click(function() {
    $(this).fadeOut(2000);

    // Redisplay the hidden element
    // You can also use .toggle(), .show() and .fadeIn()
    $("#p_one").fadeToggle(2000);
  });

  // Fade an image to a given opacity
  $("#logo2").click(function() {
    $(this).fadeTo('slow', .50);
  });

  // Target td that contains 'Bonds'
  $("td:contains('Bonds')").click(function() {

    // Hide row that contains a td that contains 'Bonds'
    $("tr:has(td:contains('Bonds'))").slideUp(1000);
  });

  // Make the Bonds row reappear
  // You can also use slideToggle()
  $("td:contains('Hall')").click(function() {
    $("tr:has(td:contains('Bonds'))").slideDown(1000);
  });

  // You can create custom animations with animate
  $("#p_one").click(function() {

    // To define left, right, top or bottom the element must
    // have a position property of relative or absolute
    $(this).css("position", "relative");

    // Pass an object that contains the properties to change,
    // duration in milliseconds, easing function to use for
    // the transition and the function to call after the
    // animation completes
    // The easing method functions are "swing or "linear"
    // You also have the JQuery UI animations : easeInQuad,
    // easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic,
    // easeInOutCubic, easeInQuart, easeOutQuart,
    // easeInOutQuart, easeInQuint, easeOutQuint,
    // easeInOutQuint, easeInExpo, easeOutExpo,
    // easeInOutExpo, easeInSine, easeOutSine, easeInOutSine,
    // easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic,
    // easeOutElastic, easeInOutElastic, easeInBack,
    // easeOutBack, easeInOutBack, easeInBounce,
    // easeOutBounce, easeInOutBounce
    $("#p_one").animate(
    {
      left: 300,
      opacity: .5,
      'font-size': "22px",
      width: 300
    }, 2000, "easeInQuad", function(){alert("All Done");});
  });

  // It is common to use stop to prevent multiple
  // animations on the same object like this
  // $("#p_one").stop().animate( ...

  // JQUERY UI
  // A plug-in that has effects and user interface tools
  // http://jqueryui.com/download/ allows you to
  // customize the widgets you need
  // http://jqueryui.com/themeroller/ allows you to
  // pick the colors, fonts, etc. for the theme used

  // JQUERY AND AJAX
  // Ajax allows a page to update with information from
  // the server without a page reload

}); <!-- End of JQuery Code -->

</script>

</div> <!-- End of wrapper -->

<!-- Most common CSS attributes
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  background, background-attachment, background-color, background-image, background-repeat, border, border-bottom, border-color, border-style, border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width, box-shadow, color, columns, direction, float, font-family, font-size, font-style, font-weight, height, letter-spacing, line-height, list-style-type, list-style-image, list-style-position, margin, margin-bottom, margin-top, margin-right,margin-left, opacity, padding-bottom, padding-top, padding-right, padding-left, text-align, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-indent, text-orientation, text-shadow, text-transform, vertical-align, visibility, width, word-spacing, z-index
  -->
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

<!DOCTYPE HTML>

<head>

<title>JQuery Tutorial</title>

.highlight { background-color: yellow; }

</style>

<!-- Get the JQuery library

Jquery 1 & 2 are the same except JQuery 2 doesn't

support IE 6, 7, and 8 -->

</head>

<body>

<h1>Random Stuff</h1>

<p id="p_one"><img src="ntt-logo.png" id="logo2" alt="NTT Logo" height="180" width="180">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Aenean pretium</em>, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="#">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. <b>In pretium varius nisi</b>, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id gravida nunc consequat vel. <a href="#">Nullam nec condimentum magna</a>. Sed dignissim interdum risus ac mattis. In hac habitasse platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper.</p>

<p id="p_two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="mailto:derekbanas@verizon.net">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. In pretium varius nisi, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id <a href="http://google.com">gravida nunc consequat</a> vel. Nullam nec condimentum magna. Sed dignissim interdum risus ac mattis. <a href="http://www.newthinktank.com/wordpress/PersonalityTest.pdf">In hac habitasse</a> platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper.</p>

<p id="p_three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Aenean pretium,</i> ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula.</p>

<caption>Baseball</caption>

<thead>

<tr>

<td colspan="4">Best Baseball Players</td>

</tr>

</thead>

<tfoot>

</tfoot>

<tbody>

<tr>

<td>Average</td>

<td>Homeruns</td>

</tr>

<tr>

<td><a href="#">Hank Aaron*</a></td>

</tr>

<tr>

</tr>

<tr>

<td><a href="#">Barry Bonds</a></td>

</tr>

</tbody>

</table>

<h2 id="bestSelling">Best Selling Childrens Books</h2>

<li>Harry Potter

<li>and the Sorcerer's Stone</li>

<li>and the Half-Blood Prince</li>

<li>and the Chamber of Secrets</li>

<li>Prisoner of Azkaban</li>

<li name="best_book">and the Goblet of Fire</li>

<li>and the Order of the Phoenix</li>

<li>and the Deathly Hallows</li>

</ol>

</li>

<li>The Very Hungry Caterpillar</li>

</ol>

<h2 id="trackEvents">Tracking Events</h2>

Mouse Click : X : <input type="text" id="mClickXPos">

Y : <input type="text" id="mClickYPos"><br />

Mouse Move : X : <input type="text" id="mMoveXPos">

Y : <input type="text" id="mMoveYPos"><br />

Key Pressed : <input type="text" id="keyPressed"><br />

<span id="formEvent">Form Event</span> : <input type="text" id="inputFormEvent"><br /><br />

// When the document is ready execute the JQuery

$("document").ready(function() {

// ADDING / REMOVING / CHANGING ELEMENTS

// You can change CSS attributes like this

// # targets ids and . targets classes

$("#wrapper").css("width", 500);

$("#wrapper").css("margin", "auto");

$("#logo2").css("float", "left");

$(".p_two").css("color", "purple");

// How to pass in multiple arguments

$(".p_two").css({"background" : "url('repeatBkgrnd.png') repeat-y"});

// Target elements by tag

$("a").css("color", "red");

// Target tags only in other tags, classes, or ids

$("#tableData a").css("color", "green");

// Target every a element that comes after a em

$("em + a").css("color", "orange");

// Target children elements in elements

$("p > em").css("color", "gray");

// Target the 3rd li in a list

$("#oListIndent li:nth-child(3)").css("color", "red");

// Change the text in an html element if the li has a

// name attribute

$("li[name]").html("'and the Goblet of Fire'");

// Change the value in a text input element

$("input[type='text']#yourName").val("Derek");

// Target items that contain a value (*=)

$("a[href*='google']").css("font-weight", "bolder");

// Target an image with an alt that starts with (^=) NTT

// and change the border

$("img[alt^='NTT']").css({"border-color": "black",

"border-width":"1px",

"border-style":"solid"});

$("a[href^='http://g']").css("color", "cyan");

$("a[href^='mailto:']").css("color", "yellow");

// Change an image height and width on one line

$("img[alt^='NTT']").width(150)

.height(150);

// Target items that end with ($=) a value

$("a[href$='pdf']").css("color", "red");

// Select the odd (1,3,5) and even (0,2,4) items

$("#tableData tr:even").css("background-color", "#FFFDD0");

$("#tableData tr:odd").css("background-color", "#F0F8FF");

// Select the first matching element

$("#tableData tr:first").css({"background-color" : "#001A57", "color" : "white"});

// Select the last matching element

$("#tableData tr:last").css("background-color", "#FFC0DB");

// Select the elements that don't contain 'and' in them

$("#oListTypes li:not(:contains(and))").css("color", "red");

// Select every a element that contains 'gravida'

$("a:contains(gravida)").css("color", "blue");

// Select every p element that contains a i element

// and hide it

$("p:has(i)").hide();

// Display the text between the matching p element

alert($("p:has(i)").html());

// Change the text in the matching p element and show it

// .text() works the same but it doesn't recognize html

// elements

$("p:has(i)").html("<i>Some normal text</i>").show();

// Append adds text at the end of an element

$("p:has(i)").append(" I go at the end");

// Prepend adds text at the beginning of an element

$("p:has(i)").prepend("I go at the beginning ");

// Add a new element before the targeted one

$("p:has(i)").before("<p id='before_p'>A new paragraph before</p>");

// Add a new element after the targeted one

$("p:has(i)").after("<p id='after_p'>A new paragraph after</p>");

// When the element with the id 'after_p' is clicked

// remove it from the document

$("#after_p").click(function() {

$(this).remove();

});

// Replace an element with another on click

$("#before_p").click(function() {

$(this).replaceWith('<p>I\'m the new paragraph</p>');

});

// Perform a different action on each matching element

$("#oListIndent li").each(function(index) {

// Get the value in the input element

var inputListStuff = $("#listStuff").val();

// Assign a new value to the input element

// $(this).text() gets the value for each individual

// li element

$("#listStuff").val(inputListStuff + ", " + $(this).text());

});

// CHANGING ELEMENT ATTRIBUTES

// Add a class to elements

// .removeClass() will take the class away

$("#oListIndent li").addClass("Harry_Potter");

$(".Harry_Potter").css("color", "#36454F");

// You can toggle classes on and off an element

$("#oListIndent li").click(function() {

$(this).toggleClass("highlight");

// Get the changing background color and display it

// in the input element

var bgColor = $(this).css("background-color");

$("input[type=text]#yourName").val(bgColor);

});

$("#logo2").click(function() {

// Get the value stored in an attribute

var imgName = $(this).attr("src");

$("input[type=text]#yourName").val(imgName);

// Change the value of an attribute

$("#logo2").attr("src", "ntt-logo-horz.png");

});

// EVENTS IN JQUERY

// Trigger events on mouseover

$("#logo2").mouseover(function() {

$("#logo2").attr("src", "ntt-logo-horz.png");

});

// Trigger events on mouseout

$("#logo2").mouseout(function() {

$("#logo2").attr("src", "ntt-logo.png");

});

// Handle mouseover and mouseout with hover

$("h2").hover(function() {

// mouseover

$("h2").css("color", "green");

}, function() {

// mouseout

$("h2").css("color", "black");

});

// Perform an action on double click

$("#logo2").dblclick(function() {

$("#logo2").attr("src", "ntt-logo-plastic.png");

});

// Get the document x and y position on click

$(document).click(function(e) {

$("#mClickXPos").val(e.pageX);

$("#mClickYPos").val(e.pageY);

});

// Get the x and y as the mouse moves

// Use screenX and screenY to get x and y for the screen

$(document).mousemove(function(e) {

$("#mMoveXPos").val(e.screenX);

$("#mMoveYPos").val(e.screenY);

});

// Show key pressed on the keyboard

// You can also use keydown() and keyup()

$(document).keypress(function(e){

// e.which returns the keycode which we convert into

// the key with fromCharCode

var keyPressed = String.fromCharCode(e.which)

$("#keyPressed").val(keyPressed);

});

// Execute when input loses focus

$("#inputFormEvent").blur(function() {

$("#formEvent").text("Left Input Element");

});

// Execute when input value changes (Conflicts with blur)

$("#inputFormEvent").change(function() {

$("#formEvent").text("Input Element Changed");

});

// Execute when input gains focus

$("#inputFormEvent").focus(function() {

$("#formEvent").text("Input Element Focused");

});

// Execute when input value is selected

$("#inputFormEvent").select(function() {

$("#formEvent").text("Input Element Selected");

});

// We can assign events with on and pass the event to

// track, an argument to pass and the function to call

// You can attach multiple events by seperating them with

// a space ex. "mouseover keypress"

function showWhatTouched(e){

alert(e.data.message);

}

var bsMsg = { message:"Best Selling Touched" };

var teMsg = { message:"Track Events Touched" };

$("#bestSelling").on("mouseover", bsMsg, showWhatTouched);

$("#trackEvents").on("mouseover", teMsg, showWhatTouched);

// Catch when the document loads with ready()

// Catch if the browser resizes with resize()

// Catch when an element is scrolled with scroll()

// Create simple slide show

var accidentImgs = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];

var focusImg = 1;

$("#accident").click(function() {

var image = accidentImgs[focusImg];

focusImg++;

if(focusImg > 3){

focusImg = 0;

}

$("#accident").attr("src", image);

});

// JQUERY ANIMATIONS

// hide an element on click

$("#p_one").click(function() {

$(this).hide();

});

// slowly fade out an element over 2000 ms

// You can also use fast, normal, and slow

$("#p_two").click(function() {

$(this).fadeOut(2000);

// Redisplay the hidden element

// You can also use .toggle(), .show() and .fadeIn()

$("#p_one").fadeToggle(2000);

});

// Fade an image to a given opacity

$("#logo2").click(function() {

$(this).fadeTo('slow', .50);

});

// Target td that contains 'Bonds'

$("td:contains('Bonds')").click(function() {

// Hide row that contains a td that contains 'Bonds'

$("tr:has(td:contains('Bonds'))").slideUp(1000);

});

// Make the Bonds row reappear

// You can also use slideToggle()

$("td:contains('Hall')").click(function() {

$("tr:has(td:contains('Bonds'))").slideDown(1000);

});

// You can create custom animations with animate

$("#p_one").click(function() {

// To define left, right, top or bottom the element must

// have a position property of relative or absolute

$(this).css("position", "relative");

// Pass an object that contains the properties to change,

// duration in milliseconds, easing function to use for

// the transition and the function to call after the

// animation completes

// The easing method functions are "swing or "linear"

// You also have the JQuery UI animations : easeInQuad,

// easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic,

// easeInOutCubic, easeInQuart, easeOutQuart,

// easeInOutQuart, easeInQuint, easeOutQuint,

// easeInOutQuint, easeInExpo, easeOutExpo,

// easeInOutExpo, easeInSine, easeOutSine, easeInOutSine,

// easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic,

// easeOutElastic, easeInOutElastic, easeInBack,

// easeOutBack, easeInOutBack, easeInBounce,

// easeOutBounce, easeInOutBounce

$("#p_one").animate(

{

left: 300,

opacity: .5,

'font-size': "22px",

width: 300

}, 2000, "easeInQuad", function(){alert("All Done");});

});

// It is common to use stop to prevent multiple

// animations on the same object like this

// $("#p_one").stop().animate( ...

// JQUERY UI

// A plug-in that has effects and user interface tools

// http://jqueryui.com/download/ allows you to

// customize the widgets you need

// http://jqueryui.com/themeroller/ allows you to

// pick the colors, fonts, etc. for the theme used

// JQUERY AND AJAX

// Ajax allows a page to update with information from

// the server without a page reload

});

</script>

</div>

<!-- Most common CSS attributes

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

background, background-attachment, background-color, background-image, background-repeat, border, border-bottom, border-color, border-style, border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width, box-shadow, color, columns, direction, float, font-family, font-size, font-style, font-weight, height, letter-spacing, line-height, list-style-type, list-style-image, list-style-position, margin, margin-bottom, margin-top, margin-right,margin-left, opacity, padding-bottom, padding-top, padding-right, padding-left, text-align, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-indent, text-orientation, text-shadow, text-transform, vertical-align, visibility, width, word-spacing, z-index

-->

</body>

</html>

jqueryuitut.html

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery Tutorial</title>

  <style type="text/css">
  .highlight { background-color: yellow; }
  #wrapper {
    width: 500px;
    margin: auto;
  }
  .ui-menu{
    width: 15em;
  }
  #cartDiv{
    border-style: solid;
    border-width: 5px;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <!-- Add the JQuery UI CSS -->
  <link href="css/jquery-ui.min.css" rel="stylesheet">

  <!-- Add the JQuery UI JS file -->
  <script src ="js/jquery-ui.min.js" > </script>

<body>
<div id="wrapper">

<ul id="shMenu">
  <li><a href="JavaScript:void(0)">X Men</a>
    <ul>
      <li><a href="JavaScript:void(0)">Angel</a></li>
      <li><a href="JavaScript:void(0)">Cyclops</a></li>
      <li><a href="JavaScript:void(0)">Beast</a></li>
      <li><a href="JavaScript:void(0)">Marvel Girl</a></li>
      <li><a href="JavaScript:void(0)">Iceman</a></li>
    </ul>
  </li>
  <li><a href="JavaScript:void(0)">Defenders</a>
    <ul>
      <li><a href="JavaScript:void(0)">Hulk</a></li>
      <li><a href="JavaScript:void(0)">Doctor Strange</a></li>
      <li><a href="JavaScript:void(0)">Namor</a></li>
      <li><a href="JavaScript:void(0)">Silver Surfer</a></li>
    </ul>
  </li>
</ul><br />

<div id="accordion">
<h4>Batman</h4>
<div>
Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally named "the Bat-Man", the character is also referred to by such epithets as the "Caped Crusader",the "Dark Knight", and the "World's Greatest Detective".
</div>
<h4>Flash</h4>
<div>
The Flash is a fictional superhero appearing in American comic books published by DC Comics. Created by writer Gardner Fox and artist Harry Lampert, the original Flash first appeared in Flash Comics #1 (January 1940).
</div>
<h4>Superman</h4>
<div>
Superman is a fictional superhero appearing in American comic books published by DC Comics. The character is considered an American cultural icon. The Superman character was created by writer Jerry Siegel and artist Joe Shuster in 1933; the character was sold to Detective Comics, Inc. (later DC Comics) in 1938. Superman first appeared in Action Comics #1 (June 1938) and subsequently appeared in various radio serials, newspaper strips, television programs, films, and video games. With the character's success, Superman helped to create the superhero genre and establish its primacy within the American comic book.
</div>
</div><br />

<div id="shTabs">
<ul>
  <li><a href="#ironman">Iron Man</a></li>
  <li><a href="#hulk">Hulk</a></li>
  <li><a href="#thor">Thor</a></li>
  <li><a href="#spiderman">Spiderman</a></li>
</ul>
<div id="ironman">
Iron Man (Tony Stark) is a fictional superhero appearing in American comic books published by Marvel Comics, as well as its associated media. The character was created by writer and editor Stan Lee, developed by scripter Larry Lieber, and designed by artists Don Heck and Jack Kirby. He made his first appearance in Tales of Suspense #39 (cover dated March 1963).
</div>
<div id="hulk">
The Hulk is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by Stan Lee and Jack Kirby, and first appeared in The Incredible Hulk #1 (May 1962). Throughout his comic book appearances, the Hulk is portrayed as a large green humanoid that possesses immense superhuman strength and great invulnerability, attributes that grow more potent the angrier he becomes. Hulk is the alter ego of Bruce Banner, a socially withdrawn and emotionally reserved physicist who physically transforms into the Hulk under emotional stress and other specific circumstances at will or against it; these involuntary transformations lead to many complications in Banner's life.
</div>
<div id="thor">
Thor is a fictional superhero that appears in American comic books published by Marvel Comics. The character, based on the Norse mythological deity of the same name, is the Asgardian god of thunder and possesses the enchanted hammer Mjolnir, which grants him the ability of flight and weather manipulation amongst his other superhuman attributes.
</div>
<div id="spiderman">
Spider-Man is a fictional superhero appearing in American comic books published by Marvel Comics existing in its shared universe. The character was created by writer-editor Stan Lee and writer-artist Steve Ditko, and first appeared in the anthology comic book Amazing Fantasy #15 (Aug. 1962) in the Silver Age of Comic Books. Lee and Ditko conceived the character as an orphan being raised by his Aunt May and Uncle Ben, and as a teenager, having to deal with the normal struggles of adolescence in addition to those of a costumed crime-fighter.
</div>
</div><br />

<div id ="customDialog" title ="Custom Dialog">
<p>A random dialog box that contains important information</p>
</div>

<a href="JavaScript:void(0)" id="openDialog" title="Open Dialog Box">Open Dialog</a><br /><br />

<form action="#" id="sampForm">

Present:<br />
<select name="present" id="present">
<option>Toy</option>
<option>Video Game</option>
<option>Book</option>
<option>Money</option>
</select><br />

Birthday:<br />
<input type="text" name="birthday" id="birthday"><br /><br />

<p class="numOfPresents">Number of Presents</p>

<fieldset>
    <legend>Number of Presents</legend>
    <div id="radioPresents">
      <input type="radio" id="onePresent" name="presents" checked="checked">
      <label for="onePresent">1</label>

      <input type="radio" id="twoPresent" name="presents">
      <label for="twoPresent">2</label>

      <input type="radio" id="threePresent" name="presents">
      <label for="threePresent">3</label>
    </div>
  </fieldset>

<br />

<input type="button" id="randButton" value="Click Me"><br /><br />

<div id="cartDiv">
<img src="cart.png" alt="Shopping Cart" id="cart">
</div>

<img src="toy1.png" alt="Bear" id="toy1" class="toy">

<img src="toy2.png" alt="Duck" id="toy2" class="toy">

<img src="toy3.png" alt="Batman" id="toy3" class="toy">

</form>

<script type="text/javascript">

$(document).ready(function() {

  $("#shMenu").menu({
    position: {
      // Popup menu comes on the right by default
      my: "center top",
      at: "center bottom"
    },

  });

  $("#accordion").accordion({
    // Slide animation or not or length
    animate: 1500,
    // Starting tab
    active: 1,
    // Collapsible if same tab is clicked
    collapsible: true,
    // Event that triggers
    event: "click",
    // Height based on content (content) or largest (auto)
    heightStyle: "content"
  });

  $("#shTabs").tabs({
    // The event that switches the panel
    event: "click",
    // Effects: fadeIn, fadeOut, slideDown, slideUp, animate
    show: "fadeIn",
    hide: "fadeOut",
    // Starting panel
    active: 3,
    // Collapse by clicking the current tab
    collapsible: true,
    // Height based on content (content) or largest (auto)
    heightStyle: "auto"
  });

  // Create a draggable / resizable dialog box
  $('#customDialog').dialog({
    draggable: true, // Set true by default
    resizable: false, // Set true by default
    // You can use minWidth, minHeight, maxWidth, maxHeight
    height: 300, // Defined in pixels
    width: 300,
    // If set true the user can't do anything until the
    // dialog is closed
    modal: true,
    // Position the dialog with my and define the browser
    // position with at
    // 1st: left, right, center
    // 2nd: top, center, bottom
    position: {
      my: 'center top',
      at: 'center bottom',
      // You can also target to place based on an element
      // on the screen (center under the link)
      of: "#openDialog"
    },
    // Define a delay for showing or hiding it
    show: 1000,
    hide: '1000',
    autoOpen: false, // Open true by default
    // create buttons for the dialog
    buttons : {
      "OK" : function(){
        $("#openDialog").html("You clicked ok");
        $(this).dialog("close");
      },
      "CANCEL": function(){
        $("#openDialog").html("You clicked cancel");
        $(this).dialog("close");
      }
    }
  });

  // Displays the dialog box on click
  $("#openDialog").click(function() {
    $('#customDialog').dialog("open");
  });

  // Use custom tooltip if the element has a title
  $("[title]").tooltip();

  // JQUERY UI FORMS

  $("#present").selectmenu({
    width: 200
  });

  $("#birthday").datepicker({
    // Show month dropdown
    changeMonth: true,
    // Show year dropdown
    changeYear: true,
    dateFormat: "MM dd, yy",
    // Number of months to display
    numberOfMonths: 1,
    // Define maxDate
    maxDate: 365,
    // Define minDate
    minDate: -3650
  });

  // Style radio buttons
  $("#radioPresents").buttonset();

  // Style buttons
  $("#randButton").button();

  // You can make any element draggable
  $("#sampForm").draggable();

  // Dragging and dropping elements
  $("#toy1").draggable();
  $("#toy2").draggable();
  $("#toy3").draggable();

  $("#cartDiv").droppable({
    // Adds the class highlight to the droppable
    activeClass: "highlight",

    // Adds class for when element is hovered
    hoverClass: "hoverDroppable",

    // Function to call when element is dropped
    drop: function(event, ui){

      // Apply an effect when an element is dropped
      // clip, explode, fade, puff,
      // pulsate, scale, shake, slide,
      ui.helper.hide("fade");

      // Get the alt for the itm dropped
      var itemAlt = $(ui.draggable).attr("alt");

      // Display the item dropped
      alert("Item added : " + itemAlt);
    },

    // Define class of elements that can be dropped
    accept: ".toy",

    // Can elements currently be dropped on it
    disabled: false,

    // Add an element when droppable items starts to drag
    activate: function(event, ui){

      $("#cartMsg").remove();
      $(this).append("<span id='cartMsg'>Drop Toy Here</span>");
    },

    // Called when an item isn't dropped in the dropzone
    deactivate: function(event, ui){

      $("#cartMsg").remove();
      $(this).append("<span id='cartMsg'>You know you want it</span>");
    },

    // Called when draggable is over droppable
    over: function(event, ui){

      $("#cartMsg").remove();
      $(this).append("<span id='cartMsg'>Drop It!!!</span>");
    },

    // Called when item leaves dropzone
    out: function(event, ui){

      $("#cartMsg").remove();
      $(this).append("<span id='cartMsg'>NOOOOOO!!!</span>");
    }
  });

}); // End of JQuery

</script>

</div> <!-- End of Wrapper -->
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

<!DOCTYPE HTML>

<head>

<title>JQuery Tutorial</title>

.highlight { background-color: yellow; }

#wrapper {

width: 500px;

margin: auto;

}

.ui-menu{

width: 15em;

}

#cartDiv{

border-style: solid;

border-width: 5px;

}

</style>

<body>

<ul>

<li><a href="JavaScript:void(0)">Angel</a></li>

<li><a href="JavaScript:void(0)">Cyclops</a></li>

<li><a href="JavaScript:void(0)">Beast</a></li>

<li><a href="JavaScript:void(0)">Marvel Girl</a></li>

<li><a href="JavaScript:void(0)">Iceman</a></li>

</ul>

</li>

<li><a href="JavaScript:void(0)">Defenders</a>

<ul>

<li><a href="JavaScript:void(0)">Doctor Strange</a></li>

<li><a href="JavaScript:void(0)">Namor</a></li>

<li><a href="JavaScript:void(0)">Silver Surfer</a></li>

</ul>

</li>

</ul><br />

<h4>Batman</h4>

<div>

Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally named "the Bat-Man", the character is also referred to by such epithets as the "Caped Crusader",the "Dark Knight", and the "World's Greatest Detective".

</div>

<h4>Flash</h4>

<div>

The Flash is a fictional superhero appearing in American comic books published by DC Comics. Created by writer Gardner Fox and artist Harry Lampert, the original Flash first appeared in Flash Comics #1 (January 1940).

</div>

<h4>Superman</h4>

<div>

Superman is a fictional superhero appearing in American comic books published by DC Comics. The character is considered an American cultural icon. The Superman character was created by writer Jerry Siegel and artist Joe Shuster in 1933; the character was sold to Detective Comics, Inc. (later DC Comics) in 1938. Superman first appeared in Action Comics #1 (June 1938) and subsequently appeared in various radio serials, newspaper strips, television programs, films, and video games. With the character's success, Superman helped to create the superhero genre and establish its primacy within the American comic book.

</div>

</div><br />

<ul>

<li><a href="#spiderman">Spiderman</a></li>

</ul>

Iron Man (Tony Stark) is a fictional superhero appearing in American comic books published by Marvel Comics, as well as its associated media. The character was created by writer and editor Stan Lee, developed by scripter Larry Lieber, and designed by artists Don Heck and Jack Kirby. He made his first appearance in Tales of Suspense #39 (cover dated March 1963).

</div>

The Hulk is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by Stan Lee and Jack Kirby, and first appeared in The Incredible Hulk #1 (May 1962). Throughout his comic book appearances, the Hulk is portrayed as a large green humanoid that possesses immense superhuman strength and great invulnerability, attributes that grow more potent the angrier he becomes. Hulk is the alter ego of Bruce Banner, a socially withdrawn and emotionally reserved physicist who physically transforms into the Hulk under emotional stress and other specific circumstances at will or against it; these involuntary transformations lead to many complications in Banner's life.

</div>

Thor is a fictional superhero that appears in American comic books published by Marvel Comics. The character, based on the Norse mythological deity of the same name, is the Asgardian god of thunder and possesses the enchanted hammer Mjolnir, which grants him the ability of flight and weather manipulation amongst his other superhuman attributes.

</div>

Spider-Man is a fictional superhero appearing in American comic books published by Marvel Comics existing in its shared universe. The character was created by writer-editor Stan Lee and writer-artist Steve Ditko, and first appeared in the anthology comic book Amazing Fantasy #15 (Aug. 1962) in the Silver Age of Comic Books. Lee and Ditko conceived the character as an orphan being raised by his Aunt May and Uncle Ben, and as a teenager, having to deal with the normal struggles of adolescence in addition to those of a costumed crime-fighter.

</div>

</div><br />

<p>A random dialog box that contains important information</p>

</div>

<a href="JavaScript:void(0)" id="openDialog" title="Open Dialog Box">Open Dialog</a><br /><br />

Present:<br />

<option>Video Game</option>

<option>Money</option>

</select><br />

Birthday:<br />

<p class="numOfPresents">Number of Presents</p>

<legend>Number of Presents</legend>

</div>

</fieldset>

<br />

</div>

</form>

$(document).ready(function() {

$("#shMenu").menu({

position: {

// Popup menu comes on the right by default

my: "center top",

at: "center bottom"

});

$("#accordion").accordion({

// Slide animation or not or length

animate: 1500,

// Starting tab

active: 1,

// Collapsible if same tab is clicked

collapsible: true,

// Event that triggers

event: "click",

// Height based on content (content) or largest (auto)

heightStyle: "content"

});

$("#shTabs").tabs({

// The event that switches the panel

event: "click",

// Effects: fadeIn, fadeOut, slideDown, slideUp, animate

show: "fadeIn",

hide: "fadeOut",

// Starting panel

active: 3,

// Collapse by clicking the current tab

collapsible: true,

// Height based on content (content) or largest (auto)

heightStyle: "auto"

});

// Create a draggable / resizable dialog box

$('#customDialog').dialog({

draggable: true, // Set true by default

resizable: false, // Set true by default

// You can use minWidth, minHeight, maxWidth, maxHeight

height: 300, // Defined in pixels

width: 300,

// If set true the user can't do anything until the

// dialog is closed

modal: true,

// Position the dialog with my and define the browser

// position with at

// 1st: left, right, center

// 2nd: top, center, bottom

position: {

my: 'center top',

at: 'center bottom',

// You can also target to place based on an element

// on the screen (center under the link)

of: "#openDialog"

// Define a delay for showing or hiding it

show: 1000,

hide: '1000',

autoOpen: false, // Open true by default

// create buttons for the dialog

buttons : {

"OK" : function(){

$("#openDialog").html("You clicked ok");

$(this).dialog("close");

"CANCEL": function(){

$("#openDialog").html("You clicked cancel");

$(this).dialog("close");

}

});

// Displays the dialog box on click

$("#openDialog").click(function() {

$('#customDialog').dialog("open");

});

// Use custom tooltip if the element has a title

$("[title]").tooltip();

// JQUERY UI FORMS

$("#present").selectmenu({

width: 200

});

$("#birthday").datepicker({

// Show month dropdown

changeMonth: true,

// Show year dropdown

changeYear: true,

dateFormat: "MM dd, yy",

// Number of months to display

numberOfMonths: 1,

// Define maxDate

maxDate: 365,

// Define minDate

minDate: -3650

});

// Style radio buttons

$("#radioPresents").buttonset();

// Style buttons

$("#randButton").button();

// You can make any element draggable

$("#sampForm").draggable();

// Dragging and dropping elements

$("#toy1").draggable();

$("#toy2").draggable();

$("#toy3").draggable();

$("#cartDiv").droppable({

// Adds the class highlight to the droppable

activeClass: "highlight",

// Adds class for when element is hovered

hoverClass: "hoverDroppable",

// Function to call when element is dropped

drop: function(event, ui){

// Apply an effect when an element is dropped

// clip, explode, fade, puff,

// pulsate, scale, shake, slide,

ui.helper.hide("fade");

// Get the alt for the itm dropped

var itemAlt = $(ui.draggable).attr("alt");

// Display the item dropped

alert("Item added : " + itemAlt);

// Define class of elements that can be dropped

accept: ".toy",

// Can elements currently be dropped on it

disabled: false,

// Add an element when droppable items starts to drag

activate: function(event, ui){

$("#cartMsg").remove();

$(this).append("<span id='cartMsg'>Drop Toy Here</span>");

// Called when an item isn't dropped in the dropzone

deactivate: function(event, ui){

$("#cartMsg").remove();

$(this).append("<span id='cartMsg'>You know you want it</span>");

// Called when draggable is over droppable

over: function(event, ui){

$("#cartMsg").remove();

$(this).append("<span id='cartMsg'>Drop It!!!</span>");

// Called when item leaves dropzone

out: function(event, ui){

$("#cartMsg").remove();

$(this).append("<span id='cartMsg'>NOOOOOO!!!</span>");

}

});

}); // End of JQuery

</script>

</div>

</body>

</html>

jqueryajaxtut.html

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<h3>Playing with Server Data</h3>
<div>
  <h3>Message from the Server:</h3>
  <p id="first">Waiting for Message</p>
</div>

<form id="theForm">
  <button type="button" id="oneButton">Get Text</button><br />

<div>
  <h3>Double Number on the Server:</h3>
  <span></span><br />
</div>

<input type="text" name="data" id="data"></input>
<button type="button" id="twoButton">Double Number</button><br /><br />
<button type="button" id="threeButton">Get XML Data</button>

</form>

<div>
  <h3>XML Data from the Server:</h3>
</div>

<div id="customers">Customer Information</div>

<script type="text/javascript">
$("document").ready(function() {
  $("#oneButton").on("click",getInfoFromServer);
  $("#twoButton").on("click",getDblFromServer);
  $("#threeButton").on("click",getXmlFromServer);
});

// Pull text from a text file on the server
// Type defines the type of request to make being GET or POST
// Success defines the function to call if the request
// succeeds
// Error could be defined to specify the function to call if
// an error happens

function getInfoFromServer() {
$.ajax({
  type: "GET",
  url: "textFromServer.txt",
  success: postToPage});
}

// Function called to display the message from the server
// Receives the text and the server status
function postToPage(data, status) {
  $('#first').text(data);
}

// Load a value into a span
// I define that the program getDouble.php should be executed
// getDouble is sent the information in the form and then it
// stores the returned info in the span

function getDblFromServer() {
  $("span").load("getDouble.php",
  $("#theForm").serializeArray());
}

// Here I define that I'm receiving xml data from the server

function getXmlFromServer() {
$.ajax({
  type: "GET",
  url: "customers.xml",
  datatype: "xml",
  success: postToPageTwo});
}

// I use the find method to search through the xml data
// When I match for any of these attributes I append them to
// the div named customers

function postToPageTwo(data) {

  $(data).find('customer').each(function(){
    var id = $(this).attr('id');
    var firstName = $(this).find('firstName').text();
    var lastName = $(this).find('lastName').text();
    var street = $(this).find('street').text();
    var city = $(this).find('city').text();
    var zip = $(this).find('zip').text();

    $('<div class="firstname"></div>').html(firstName).appendTo('#customers');

    $('<div class="lastname"></div>').html(lastName).appendTo('#customers');

    $('<div class="street"></div>').html(street).appendTo('#customers');

    $('<div class="city"></div>').html(city).appendTo('#customers');

    $('<div class="zip"></div><br />').html(zip).appendTo('#customers');

  });
}
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

<!DOCTYPE HTML>

<head>

<title>JQuery Tutorial</title>

</head>

<body>

<h3>Playing with Server Data</h3>

<div>

<h3>Message from the Server:</h3>

<p id="first">Waiting for Message</p>

</div>

<div>

<h3>Double Number on the Server:</h3>

</div>

<button type="button" id="twoButton">Double Number</button><br /><br />

</form>

<div>

<h3>XML Data from the Server:</h3>

</div>

<div id="customers">Customer Information</div>

$("document").ready(function() {

$("#oneButton").on("click",getInfoFromServer);

$("#twoButton").on("click",getDblFromServer);

$("#threeButton").on("click",getXmlFromServer);

});

// Pull text from a text file on the server

// Type defines the type of request to make being GET or POST

// Success defines the function to call if the request

// succeeds

// Error could be defined to specify the function to call if

// an error happens

function getInfoFromServer() {

$.ajax({

type: "GET",

url: "textFromServer.txt",

success: postToPage});

}

// Function called to display the message from the server

// Receives the text and the server status

function postToPage(data, status) {

$('#first').text(data);

}

// Load a value into a span

// I define that the program getDouble.php should be executed

// getDouble is sent the information in the form and then it

// stores the returned info in the span

function getDblFromServer() {

$("span").load("getDouble.php",

$("#theForm").serializeArray());

}

// Here I define that I'm receiving xml data from the server

function getXmlFromServer() {

$.ajax({

type: "GET",

url: "customers.xml",

datatype: "xml",

success: postToPageTwo});

}

// I use the find method to search through the xml data

// When I match for any of these attributes I append them to

// the div named customers

function postToPageTwo(data) {

$(data).find('customer').each(function(){

var id = $(this).attr('id');

var firstName = $(this).find('firstName').text();

var lastName = $(this).find('lastName').text();

var street = $(this).find('street').text();

var city = $(this).find('city').text();

var zip = $(this).find('zip').text();

$('<div class="firstname"></div>').html(firstName).appendTo('#customers');

$('<div class="lastname"></div>').html(lastName).appendTo('#customers');

$('<div class="street"></div>').html(street).appendTo('#customers');

$('<div class="city"></div>').html(city).appendTo('#customers');

$('<div class="zip"></div><br />').html(zip).appendTo('#customers');

});

}

</script>

</body>

</html>

textFromServer.txt

Bunch of random text

1	Bunch of random text

GetDouble.php

<?php
// Get the value passed
$numberToDbl = $_POST["data"];

// Create the response
echo $_POST["data"] . " Times 2 Equals ";
$doubleUp = $numberToDbl * 2;
echo $doubleUp;
?>

<?php

// Get the value passed

$numberToDbl = $_POST["data"];

// Create the response

echo $_POST["data"] . " Times 2 Equals ";

$doubleUp = $numberToDbl * 2;

echo $doubleUp;

customers.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<customers>
  <customer id="0">
    <firstName>Paul</firstName>
    <lastName>Jones</lastName>
    <street>123 Main St</street>
    <city>Anywhere</city>
    <zip>15235</zip>
  </customer>

  <customer id="1">
    <firstName>Sally</firstName>
    <lastName>Jones</lastName>
    <street>123 Main St</street>
    <city>Anywhere</city>
    <zip>15235</zip>
  </customer>
</customers>

<?xml version="1.0" encoding="iso-8859-1"?>

<lastName>Jones</lastName>

<city>Anywhere</city>

</customer>

<firstName>Sally</firstName>

<lastName>Jones</lastName>

<city>Anywhere</city>

</customer>

</customers>

	Facebook
	YouTube
	Twitter
	LinkedIn

Learn JQuery in One Video

Leave a Reply Cancel reply