《jQuery设计思想》

前言

jQuery在2006年发布,是世界上使用最广泛、最长寿的库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础。

一、jQuery 如何获取元素

(1) 选择表达式(CSS选择器):
将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

       $(document)                 //选择整个文档对象
  $('#myId')                     //选择ID为myId的网页元素
  $('div.myClass')           // 选择class为myClass的div元素
  $('input[name=first]')   // 选择name属性等于first的input元素

(2) jQuery特有表达式:

       $('a:first')                     //选择网页中第一个a元素
  $('tr:odd')                    //选择表格的奇数行
  $('#myForm :input')   // 选择表单中的input元素
  $('div:visible')            //选择可见的div元素
  $('div:gt(2)')              // 选择所有的div元素,除了前三个
  $('div:animated')      // 选择当前处于动画状态的div元素

二、jQuery 的链式操作

原理:用API调用一个函数,这个函数返回前面的对象,可以继续调用前面的对象。

链式操作,如下:

$('div').find('h3').eq(2).html('Hello');

步骤分解:

        $('div')                 //找到div元素
   .find('h3')          //选择其中的h3元素
   .eq(2)               //选择第3个h3元素
   .html('Hello');   //将它的内容改为Hello

jQuery还提供了.end()方法,使结果集可以后退一步:

        $('div')
   .find('h3')
   .eq(2)
   .html('Hello').end()   //退回到选中所有的h3元素的那一步  
           .eq(0)                      //选中第一个h3元素   
           .html('World');         //将它的内容改为World

三、jQuery 如何创建元素

把新元素直接传入jQuery的构造函数:

  $('<p>Hello</p>');
  $('<li class="new">new list item</li>');
  $('ul').append('<li>list item</li>');

四、jQuery 如何移动元素

(1) 使用.insertAfter(),把div元素移动p元素后面

  $('div').insertAfter($('p'));

(2) 使用.after(),把p元素加到div元素前面

  $('p').after($('div'));

表面上看,这两种方法效果一样,唯一不同似乎只是操作视角的不同。但实际上,它们有一个重大差别,就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。我们可以根据需要,选择使用哪一种方法。
使用这种模式的操作方法,一共有四对

.insertAfter()和.after():      在现存元素的外部,从后面插入元素
.insertBefore()和.before():在现存元素的外部,从前面插入元素
.appendTo()和.aooend():  在现存元素的内部,从后面插入元素
.prependTo()和.prepend():在现存元素的内部,从前面插入元素

五、jQuery 如何修改元素的属性

$div.text(?)                   //读写文本内容
$div.html(?)                  //读写HTML内容
$div.attr('title',?)            //读写属性
$div.css({color: 'red'})   //读写style //可以写$div.style
$div.addClass('blue') / removeClass / hasClass
$div.on('click',fn)
$div.off('click',fn)

注意:$div可能对应多个div元素

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文地址作者: 阮一峰 由于jQuery十分值得学习,对于其的总结已经十分精辟,选取该文章以帮助以自己学习。 一、...
    2b61575c37fd阅读 1,085评论 0 0
  • jQuery[http://jquery.com/] 是目前使用最广泛的 javaScript 函数库。 现在在 ...
    猫的老字号阅读 2,338评论 0 1
  • 阮一峰老师原文【目录】一、选择网页元素二、改变结果集三、链式操作四、元素的操作:取值和赋值五、元素的操作:移动六、...
    Www刘阅读 1,454评论 3 7
  • 1 jQuery 如何获取元素 jQuery获取选择器对应的元素对象,返回可操作对象. 利用操作对象的原型对象上...
    lin_lilili阅读 1,162评论 0 0
  • JQuery简单说就是,这是一个封装了 DOM 操作的库,使用它比直接使用原生 DOM API 更方便,更好读 链...
    Marshall3572阅读 2,540评论 0 0

友情链接更多精彩内容