《jQuery Cookbook》 学习笔记(一)

664 阅读3分钟
原文链接: www.jianshu.com

1.jQuery基础

1.1 在HTML页面中包含jQuery程序库代码

从jQuery.com上下载jq版本文件,用

1.2 用选择器和jq函数选择DOM元素

$('xx');//xx可以是标签,可以是类名,可以是id值等选择器。

link
link
link
link
link
link

Paste_Image.png

1.3 在指定上下文中选择DOM元素


    
    
    
    


    
    
    
    






$('input',xxx):选择input标签中满足xxx的。

eg:
$('input',$('form')):i选择nput标签包含在form标签中的
$('input',document.forms[0]):选择包含在第一个form标签中的input标签
$('input','body'):选择整个body的input标签

$(xxx).length :返回包含的元素的数目。

1.4 过滤DOM元素包装器集

$('xx').filter('yyy'):滤出含有yyy的xx

link
link
link
link
link

filter()方法也可以传递一个用于过滤包装器集的函数:

alert(
    $('a')
        .filter(function(index){ return $(this).hasClass('external');})
        .length + ' external links'
        )

现在传递给filter()方法的是一个匿名函数。调用这个函数的上下文与当前元素相同,也就是说当在函数中使用$(this)时,实际应用的是包装器集中的每个DOM元素。在函数中,检查包装器集中每个< a>元素的类值(hasClass())是否为external。如果是,返回逻辑真值,该元素保留在集合中;否则从集合中删除元素。即:如果函数返回假值,则删除元素,如果返回其他值,该元素就会留在包装器集中。

1.5 查找当前选择包装器集中的后代元素

$(‘xxx’).find(‘yyy’):查找xxx内部包含有yyy的

a paragraph a paragraph a paragraph

a paragraph a paragraph a paragraph

a paragraph a paragraph a paragraph

a paragraph a paragraph a paragraph

也可以:

alert($('em',$('p')).length);//将上下文引用作为jq函数的第二个参数
alert($('p em').length);
tip:fliter()和find()的区别:

.find()将操作/选择当前集合的子元素,而.filter()只操作当前元素集。

1.6 返回破坏性修改之前的选择

end()方法返回使用破坏性方法之前选择的一组DOM元素。

alert($('p').filter('.middle').length);//1
alert($('p').filter('.middle').end().length);//3
alert($('p').filter('.middle').find('span').end().end().length);//3
  • $('p'):找到所有的< p>
  • $('p').filter('.middle'):找到所有带有‘middle’类的< p>
  • $('p').filter('.middle').find('span'):找到所有带有‘middle’类的< p>内部的
  • $('p').filter('.middle').end():返回前一个破坏性方法前的包装器集,即返回filter()方法前的包装器集,即所有的< p >
  • $('p').filter('.middle').find('span').end():返回前一个破坏性方法前的包装器,即返回find()方法前的包装器集,即所有带有‘middle’类的< p>
  • $('p').filter('.middle').find('span').end().end():撤销filter()方法和find()方法,即返回所有的< p >

tip:如果使用end()方法之前没有执行破坏性操作,将会返回一个空集。破坏性操作指的是任何改变匹配jQuery元素集合的操作,也就是返回jQuery对象的任何遍历或者操作方法,包括add(),andSelf(),children(),closes(),filter(),find(),map(),next(),nextAll(),not(),parent(),parents(),prev(),prevAll(),siblings(),slice(),clone(),appendTo(),prependTo(),insertBefore(),insertAfter()和replaceAll()。

1.7 将前一个选择集包含到当前选择集

andSelf()方法合并前一个DOM元素选择集和当前选择集。

text

text

tip:当使用andSelf()方法时,它只向当前操作集合中添加前一个集合,而不是以前选择的所有集合。

1.8 根据当前上下文遍历DOM获得新的DOM元素集


1.9 创建、操作和插入DOM元素

1.9.1 创建

$('

jQuery

');

1.9.2 操作

$('

jQuery

').find('a').attr('href','http://www.jquery.com').end()

1.9.3 插入

$('

jQuery

').find('a').attr('href','http://www.jquery.com').end().appendTo('body')

1.10 删除DOM元素


1.javascript执行之前,元素将一直留在页面中。
2.在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除,可以在必要的时候将它们重新添加到DOM中。
3.这种方法不仅从DOM中删除元素,而且删除被删除元素包含的所有事件处理程序和内部缓存数据。

1.11 替换DOM元素

  • name
  • name
  • name
  • name
  • name
  • name

也可以用replaceAll():

$('
  • removed
  • ').replaceAll('li.remove');

    1.12 克隆DOM元素

    clone()方法复制DOM元素,结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素。

    • list
    • list
    • list
    • list

    克隆方法不仅可以移动DOM元素,而且可以包括附加到克隆的DOM元素中的事件。

    • list
    • list
    • list
    • list

      1.13 获取、设置和删除DOM元素属性

      1.13.1 设置属性:

      $('xx').attr('属性名','属性值')

      也可以设置多个属性:

      $('xxx').attr({'href':'http://www.jquery.com','title':'jquery.com'})

      1.13.2 获取属性:

      $('xx').attr('属性名')

      1.13.3 删除属性:

      $('xx').removeAttr('属性名')

      tip:
      addClass():用新的类/值更新class属性值,包括任何已经设置的类。
      hasClass():检查特定类的class属性值。
      removeClass():从class属性中删除特定的类,同时保持已经设置的任何值。
      toggleClass():如果特定类不存在则添加,如果存在则删除该类。

      1.14 获取和设置HTML内容

      1.14.1 设置HTML内容

      $('p').html('hello');

      1.14.2 获取HTML内容

      $('p').html();

      tip:html()方法在XML文档中不可用,但是可用于XHTML文档。

      1.15 获取和设置文本内容

      1.15.1 设置文本内容

      $('p').text('hello')

      1.15.2 获取文本内容

      $('p').text()

      1.16 在不造成全局冲突的情况下使用$别名

      创建一个匿名的自调用函数,将jQuery代码写到这个函数里面。

      (function($){
        //code;
      })(jQuery);

      2. 用jQuery选择元素

      在文档中选择一个特定的元素或者一组元素的最简方法是在jQuery包装器函数中使用CSS选择器:

      $('#content p a'):选择#content中的

      l里的所有

      选择了所需元素后,就可以对元素进行操作了:

      $('#content p a').addClass('selected');

      tip:选择器越复杂,jQuery处理字符串的时间就越长。
      $('body div#wrapper div#content')没有必要,$('#content')即可,且快。

      2.1仅选择子元素

      2.1.1 直接后代组合符(>)
      
      
      

      tip:后代是存在于另一个元素中的任何元素,而子元素是直接后代。

      tip:$('>p','#content')和$('#content > p')本质上是一样的。

      2.1.2 children():选择所有子元素
      $('#content').children();//获取#content的所有子元素
      $('#content').children('p');//获取#content的所有

      子元素 var anchors = $('a'); anchors.children();//获取所有的子元素 $('> *', anchors);//获取所有的子元素 anchors.find('> *');//获取所有的子元素

      2.2 选择特定的兄弟元素

      2.2.1 相邻兄弟元素组合符(+)

      1

      2

      3

      4

      5

      2.2.2 siblings():选择所有兄弟元素
      $('h1').siblings('h2,h3,p');//选择作为h1元素兄弟的所有h2,h3,p
      2.2.3 nextAll():根据相对位置选择兄弟元素
      • first
      • second
      • third
      • fourth
      • fifth
      2.2.4 普通兄弟元素组合符(~)
      $('li.selected~li');//效果同上,选择在li.selected后的所有li

      2.3 按照索引顺序选择元素

      2.3.1 过滤器

      :first //匹配选中的第一个元素
      :last //匹配选中的最后一个元素
      :even //匹配索引为偶数的元素(索引从0开始)
      :odd //匹配索引为奇数的元素(索引从0开始)
      :eq(n) //按照索引(n)匹配单个元素
      :lt(n) //匹配索引小于n的所有元素
      :gt(n) //匹配索引大于n的所有元素

      1. first
      2. second
      3. third
      4. fourth

      用例:表格行中交替样式是常见的需求:

          
              table tr.even {
                  background-color: #ccc;
              }
              td {
                  border:1px solid black;
                  width: 50px;
                  height: 30px;
              }
              table {
                  border-collapse:collapse;
              }
          
      
      
      
      0even
      1odd
      2even
      3odd
      4even

      Paste_Image.png

      tip:过滤器左边需要一个初始集合,这个集合可以在已经实例化的jQuery对象中,例如:$('ul li').filter(':first');//这个过滤方法将运行在< li >上,选出第一个< li >

      2.4 选择当前动画元素

      :animated过滤器将只匹配正在连续变化的元素:

      $('div:animated');//选择当前正在连续变化的所有
      元素

      2.5 根据包含的内容选择元素

      2.5.1 contains():
      $('span:contains("Bob")');//选择包含“Bob”的所有span元素

      tip:这个选择器区分大小写,即如果没有bob,而选择器里面写了bob,就会什么都找不到。另外,contains的括号里面可以不加引号,但是加引号是一个好习惯。

      2.5.2 :has()
      $('div:has(p a)');//匹配在

      元素中封装元素的所有

      2.6 选择不匹配的元素

      2.6.1 :not过滤器
      $('div:not(#content)');//选择#content之外的所有div元素

      :not()里面可以很复杂:

      $('a:not(div.important a,a.nav)');//选择不在“div.important"中的a元素和类不为"nav"的元素

      tip:向:not过滤器传递复杂的选择器只在jQuery版本1.3以及更高的版本中才可行。在较低版本中,只能接受简单的选择器表达式。

      2.6.2 .not()方法
      var anchors = $('a');
      anchors.click(function() {
        anchors.not(this).addClass('not-clicked');//除了被点击的这个元素不被添加'not-clicked'类,其他元素都被加上'not-clicked'类;this指代单击的元素;.not()中也可以是选择器
      });

      2.7 根据元素可见性选择元素

      $('div:hidden');
      if($('#elem').is(':hidden')) {
      //code here;
      }
      $('p:visible').hide();

      2.8 根据属性选择元素

      属性选择器:

      [attr]  //匹配具有指定属性attr的元素
      [attr=val] //匹配指定属性attr为某个值val的元素
      [attr!=val] //匹配没有指定属性attr或者属性值不为某个值val的元素
      [attr^=val] //匹配指定属性attr为以某个值val开始的元素
      [attr$=val] //匹配指定属性attr为以某个值val结束的元素
      [attr~=val] //匹配包含指定值和两侧包含空格的元素

      多个属性选择器:

      $('*[title][href]');

      2.9 按照类型选择表单元素


      Paste_Image.png

      $(':text');//选择所有文本输入控件;
      $(':input');//选择所有的input,textarea,button,select元素

      2.10 选择有具体特性的元素

      2.10.1 给filter()传递一个函数

      函数的返回值将定义某个元素是否被选择。传递的函数将对当前选择集中的每个元素运行,每当函数返回假值时,对应的元素就从选择集中删除,每当返回真值时,对应的元素不受影响(即留在集合中)。

      $('*').filter(function(){
          return !! $(this).css('backgroundImage');
      //!!是JavaScript中将任何数据类型值转换为布尔表达式的快速方法。
      //如果元素不存在'backgroundImage',就返回假值,然后将选择器中的这个元素删除;
      //如果元素存在'backgroundImage',就返回真值,元素不受影响。
      //所以这个代码选择所有具有背景图片的元素。
      });

      选择所有宽度在100-200像素之间的div元素:

      $('div').filter(function(){
        var width = $(this.width();
        return width >100 $ width <200;
      }):

      tip:越长和越复杂的选择器返回结果想、所需的时间也越长。

      2.11 创建一个自定义过滤器选择器

      jQuery.expr[':'].inline = function (elem) {
        return jQuery(elem).css('display')==='inline';//创建了一个自定义选择器“inline”,选择display属性为inline的元素;
      };
      $('div a:inline').css('color','red');//使用inline选择器,选择了div元素下的display属性为inline的元素,
      //为其添加CSS样式:颜色:红色。