JavaScript jQuery(七)

jQuery 提供了快速和便捷的方法来实现 JS 任务, 并保持主流浏览器的兼容性

  1. 选择元素
    通过 CSS 样式选择器来获取元素
  2. 高效开发
    通过一行代码来完成 DOM 的系列任务
  3. 处理事件
    直接在元素上附加事件监听器

创建 jQuery 对象函数, 函数中的参数就是 CSS 样式选择器.
$( ' li.hot ' )

使用jQuery 方法来操作元素
$( ' li.hot ' ).addClass( ' complete ' );

循环

当 jQuery 返回多个元素时,使用 class 属性来实现循环

$('li em').addClass('seasonal');    //选择元素
$('li.hot').addClass('favorite');    //选择样式

链式操作

在同一个选取结果上使用多个 jQuery 方法

$('li[id!="one"]').hide().delay(500).fadeIn(1400);    //同时使用隐藏元素/穿件暂停/淡入元素三个方法

获取元素内容

.html()
返回标签+内容

.text()
只会返回文本内容

更新元素内容

.html()
更新 html 内容

.text()
更新文本内容

$(function() {
  $('li:contains("pine")').text('almonds');
  $('li.hot').html(function() {
    return '<em>' + $(this).text() + '</em>';
  });
  $('li#one').remove();
});

.replaceWith()
替换元素中的内容

.remove()
移除内容

插入元素

.before()
将内容插入到元素之前

.after()
将内容插入到元素之后

.prepend()
将内容插入到元素内部, 紧跟在开始标签之后

.append()
将内容插入到元素内部,紧跟在结束标签之前

$(function() {
  $('ul').before('<p class="notice">Just updated</p>');
  $('li.hot').prepend('+ ');
  var $newListItem = $('<li><em>gluten-free</em> soy sauce</li>');
  $('li:last').after($newListItem);
});

获取和设置属性值

.sttr()
获取或设置属性
$(' li#one ').attr(' id '); //读取属性时小括号中指定属性名称
$(' li#one ').attr(' id ', ' hot '); //更新属性时, 需要同时指定属性名称和属性值

.removeAttr()
移除属性(及其属性值)
$(' li#one ').removeAttr(' id ');

.addClass()
向 class 属性中添加一个新的值

.removeClass()
从 class 属性中移除一个属性值

$(function() {
  $('li#three').removeClass('hot');
  $('li.hot').addClass('favorite');
  $('ul').attr('id', 'group');
});

获取和设置 CSS 属性值

.css()
获取或设置 CSS 属性的值
var backgroundColor = $('li').css('background-color'); //获取CSS 属性时, 需要在小括号指定获取哪个属性
$('li').css('background-color', '#666'); //设置 CSS 属性值时, 需要在小括号指定参数, 即属性名称和对应值

设置多个属性值时, 使用花括号

$('li').css({
   'background-color': '#666',
   'font-family': 'Courier'
});

//例:
$(function() {
  var backgroundColor = $('li').css('background-color');
  $('ul').append('<p>Color was: ' + backgroundColor + '</p>');
  $('li').css({
    'background-color': '#c5a996',
    'border': '1px solid #fff',
    'color': '#000',
    'text-shadow': 'none',
    'font-family': 'Georgia',
    'padding-left': '+=75'
  });
});

.each() 方法遍历

.each() 方法的参数是一个函数

this 关键字可以用来访问当前元素
$(this) 的写法是用 this 关键字创建一个包含当前元素的 jQuery 对象

$('li').each(function(){
  var ids = this.id;
  $(this).append(' <em class="order" ' + ids + '</em>' >);
});

.on() 事件方法

.on() 方法需要两个参数:

  1. 第一个参数是需要响应的事件
  2. 第二个参数是发生事件需要运行的代码函数
$('li').on('click', function() {
  $(this).addClass('complete');
});
事件对象

将事件对象作为命名参数e, 并在函数中使用这个名称来指代事件对象, 即可访问其属性和方法 .

$(function() {

  $('li').on('click', function(e) {
    $('li span').remove();
    var date = new Date();
    date.setTime(e.timeStamp);
    var clicked = date.toDateString();
    $(this).append('<span class="date">' + clicked + ' ' + e.type + '</span>');
  });

});
事件处理程序中的其他参数
  1. 第一个参数是需要响应的事件( 可以响应多个事件 )
  2. 第二个参数可以作为选择器来赛选后代节点
  3. 第三个参数可向触发事件, 传递额外额信息
$(function() {
  var listItem, itemStatus, eventType;

  $('ul').on(
    'click mouseover',        //这里响应了两个事件
    ':not(#four)',          //对响应事件的元素进行筛选,去除 id 为 four 的元素
    {status: 'important'},        //向事件传递额外信息
    function(e) {
      listItem = 'Item: ' + e.target.textContent + '<br />';
      itemStatus = 'Status: ' + e.data.status + '<br />';
      eventType = 'Event: ' + e.type;
      $('#notes').html(listItem + itemStatus + eventType);
    }
  );

});

遍历 DOM

根据当前选取结果来选择不通关系的其他元素
$(function() {
  var $h2 = $('h2');
  $('ul').hide();
  $h2.append('<a> show </1>');

  $h2.on('click', function() {
    $h2.next()                      //当前元素的下一个兄弟节点
      .fadeIn(500)
      .children('.hot')             //当前元素的所有 class 为 hot 的子节点
      .addClass('complete');        
    $h2.find('a').fadeOut();        //find()方法选取当前选取结果内符合的所有元素
  });
});
在选取结果中添加或筛选元素
$(function() {
  var $listItems = $('li');

  $listItems.filter('.hot:last').removeClass('hot');        //filter()方法在匹配结果中查找符合第二个选择器的元素
  $('li:not(.hot)').addClass('cool');        //.not()/:not() 方法查找不匹配这个选择器的元素
  $listItems.has('em').addClass('complete');        //.has()/:has()方法在匹配集中找后代节点中符合选择器的元素

  $listItems.each(function() {
    var $this = $(this);
    if ($this.is('.hot')) {        //.is 查找当前选择结果中是否有满足的条件, 并返回布尔值(用于做判断)
      $this.prepend('Priority item: ');
    }
  });

  $('li:contains("honey")').append(' (local)');        //:contains()方法选择包含自定文字的元素
});

---
//对应的 HTML 演示:
<body>
  <div id="page">
    <h1 id="header">List</h1>
    <h2>Buy groceries</h2>
    <ul>
      <li id="one" class="hot"><em>fresh</em> figs</li>
      <li id="two" class="hot">pine nuts</li>
      <li id="three" class="hot">honey</li>
      <li id="four">balsamic vinegar</li>
    </ul>
  </div>
  <script src="js/jquery-1.11.0.js"></script>
  <script src="js/filters.js"></script>
</body>
按索引编号查找元素

jQuery 对象可以当做类似数组的对象来使用

方法/选择器
.eq() 匹配索引编号的元素
:lt() 索引编号小鱼指定数字的元素
:gt() 索引编号大于指定数字的元素

$(function() {
  $('li:lt(2)').removeClass('hot');
  $('li').eq(0).addClass('complete');
  $('li:gt(2)').addClass('cool');
});

选取表单元素

添加新列表示例:
$(function() {

  var $newItemButton = $('#newItemButton');
  var $newItemForm = $('#newItemForm');
  var $textInput = $('input:text');

  $newItemButton.show();
  $newItemForm.hide();

  $('#showForm').on('click', function(){
    $newItemButton.hide();
    $newItemForm.show();
  });

  $newItemForm.on('submit', function(e){      //.on 创建表单提交事件
    e.preventDefault();        //使用.preventDefault()方法来阻止表单提交到服务器
    var newText = $textInput.val();        //使用. val() 方法来捕获用户输入的信息
    $('li:last').after('<li>' + newText + '</li>');
    $newItemForm.hide();
    $newItemButton.show();
    $textInput.val('');
  });

});

剪切和复制元素

剪切

.remove() 移除匹配的元素及其后代
.detach() 剪切, 会在内存中保存副本
.empty() 移除匹配元素的子节点及后代节点
.unwrap() 移除匹配元素的父节点, 并保留匹配元素

复制

.clone() 创建匹配元素及其后代几点的副本

$(function() {
  var $p = $('p');
  var $clonedQuote = $p.clone();      //.clone()方法复制并保存在变量中
  $p.remove();        //这里被移除, 但是顺便已经被复制过 
  $clonedQuote.innerAfter('h2');

  var $moveItem = $('#one').detach();        //.detach() 方法剪切, 实际上类似于复制并删除
  $moveItem.appendTo('ul');
});

全章节示例:
一个任务处理程序,用能:
1.用户可以添加新的列表项
2.用户点击一个列表项来表示它已经完成, 同时该列表项会移到列表的最后, 并标记为完成.
3.当一个列表项被标记为完成并在此点击它时, 就会将其从列表中删除
4.列表项的数目会在列表上方的标题中实时进行更新.

$(function() {

  // SETUP
  var $list, $newItemForm, $newItemButton;
  var item = '';                                 // item is an empty string
  $list = $('ul');                               // Cache the unordered list
  $newItemForm = $('#newItemForm');              // Cache form to add new items
  $newItemButton = $('#newItemButton');          // Cache button to show form

  $('li').hide().each(function(index) {          // Hide list items
    $(this).delay(450 * index).fadeIn(1600);     // Then fade them in
  });

  // ITEM COUNTER
  function updateCount() {                       // Create function to update counter
    var items = $('li[class!=complete]').length; // Number of items in list
    $('#counter').text(items);                   // Added into counter circle
  }
  updateCount();                                 // Call the function

  // SETUP FORM FOR NEW ITEMS
  $newItemButton.show();                         // Show the button
  $newItemForm.hide();                           // Hide the form
  $('#showForm').on('click', function() {        // When click on add item button
    $newItemButton.hide();                       // Hide the button
    $newItemForm.show();                         // Show the form
  });

  // ADDING A NEW LIST ITEM
  $newItemForm.on('submit', function(e) {       // When a new item is submitted
    e.preventDefault();                         // Prevent form being submitted
    var text = $('input:text').val();           // Get value of text input
    $list.append('<li>' + text + '</li>');      // Add item to end of the list
    $('input:text').val('');                    // Empty the text input
    updateCount();                              // Update the count
  });

  // CLICK HANDLING - USES DELEGATION ON <ul> ELEMENT
  $list.on('click', 'li', function() {
    var $this = $(this);               // Cache the element in a jQuery object
    var complete = $this.hasClass('complete');  // Is item complete

    if (complete === true) {           // Check if item is complete
      $this.animate({                  // If so, animate opacity + padding
        opacity: 0.0,
        paddingLeft: '+=180'
      }, 500, 'swing', function() {    // Use callback when animation completes
        $this.remove();                // Then completely remove this item
      });
    } else {                           // Otherwise indicate it is complete
      item = $this.text();             // Get the text from the list item
      $this.remove();                  // Remove the list item
      $list                            // Add back to end of list as complete
        .append('<li class=\"complete\">' + item + '</li>')
        .hide().fadeIn(300);           // Hide it so it can be faded in
      updateCount();                   // Update the counter
    }                                  // End of else option
  });                                  // End of event handler

});
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,390评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,821评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,632评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,170评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,033评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,098评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,511评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,204评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,479评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2赞 335

推荐阅读更多精彩内容

  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,338评论 0赞 44
  • jQuery笔记总结篇
    原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,630评论 18赞 503
  • 08-jQuery学习与使用
    为甚嚒要学习jQuery？ 因为JS中有很多痛点： window.onload事件只能出现一次，如果出现多次，后面...
    magic_pill阅读 805评论 0赞 13
  • 倾泻·独立
    诗/昂格伦 预报有雨 憋了两天 凌晨时分 淅淅沥沥 还是下了 闷热依旧 雨量稀薄 驱热无力 持续发力 渐趋清晰 雨...
    昂格伦阅读 242评论 0赞 3
  • 深深梧桐倒下了
    李小孩阅读 90评论 0赞 1