jquery笔记

最新推荐文章于 2024-01-20 21:49:50 发布

yangyiyq

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量67

点赞数

1. jQuery 是如何工作的

1.1. 开始使用jQuery

jQuery 本身只有一个 js 文件，所以，要使用它，就和使用其它的 js 文件一样，直接将它引入就可以使用了。

 <script type="text/javascript" src="jquery-1.8.3.js"></script>

但是，要注意一点，因为 jQuery 大部分功能需要根据文档的 DOM 模型来工作，所以，它首先需要正确地解析到整个文档的 DOM 模型结构。为此，一般，我们使用 jQuery 所做的工作都需要在整个文档被浏览器完全加载完毕后才开始进行：

 <script> $(document).ready(function(){ alert('Hello World!'); $("p").click(function(event){ alert('Thanks for visiting!'); }); }); </script>

$ 是在 jQuery 中被定义的一个函数，它可以简单方便地取到相关结点。 $(document).ready 是一个事件绑定，这在文档加载完毕后被调用。

事实上 $() 等于 jQuery() 即 jQuery 的核心函数的一个简写。

之后的 javascript 代码，都默认是写在 $(document).ready 这个事件绑定当中的。

当然， $(document).ready() 可以简写成 $() 。

前面说了， $ 是一个在 jQuery 中被使用了的一个变量名，如果因为某些原因，你不能让 jQuery 使用它，那么你可以使用 jQuery.noConflict() 做到这一点，它的返回值就是 jQuery 这个对象。

 jQuery.noConflict(); $j = jQuery.noConflict();

1.2. jQuery对象与DOM对象之间的转换

通常，使用 $() 得到的是一个 jQuery 对象。它封装了很多 DOM 对象的操作，但是，它和 DOM 对象之间是不同的。比如，如果你要使用 obj.innerHTML ，那只有当 obj 是一个 DOM 对象时才能用，相应地，如果是 jQuery 对象你应该使用 obj.html() 。

从 DOM 对象转到 jQuery 对象： $(obj) 。

从 jQuery 对象转到 DOM 对象： obj[0] 。

比较正规地从 jQuery 对象到 DOM 的转换，是使用 jQuery 对象的 get() 方法：

 <ul> <li id="foo">foo</li> <li id="bar">bar</li> </ul> $('li').get();
  //[<li id="foo">, <li id="bar">]

  $('li').get(0);
  //<li id="foo"> $('li').get(-1);
  //<li id="bar">

2. 丰富的选择器

完整的列表在 http://api.jquery.com/category/selectors/ 。

2.1. 常规选择器

$("*")选择所有结点 (“#id”)ID选择器，注意其中的一些特殊字符，比如 . (“.class”)类选择器 (“tag”)按标签选择 (“ancestor descendant”)选择子元素 (“parent > child”)选择直接子元素 :focus获取焦点元素 :first-child :last-child选择第一个/最后一个子元素 :first :last截取第一个/最后一个符合条件的元素 (“prev + next”)直接兄弟元素 (“prev ~ siblings”)兄弟元素 :nth-child()索引选择，索引从 1 开始 :nth-child(odd) :nth-child(even) :nth-child(4n)

2.2. 属性选择器

[name~="value"]属性中包括某单词 [name="value"]属性完全等于指定值 [name!="value"]属性不等于指定值 [name]包括有指定属性的元素

2.3. 控件选择器

:checked选择所有被中的元素 :selected被选择了的元素 :disabled :enabled选择被禁用/未禁用的元素 :hidden选择隐藏元素，不仅是 [type="hidden"] ，还有 display: none :visible可见控件， visibility: hidden 和 opacity: 0 同样被认为是可见。 :input :button :checkbox :file :image :password :radio :reset :submit :text具体控件，图像控件是 [type="image"]

2.4. 其它选择器

[name="value"][name2="value2"]多个 AND 条件 (“selector1, selector2, selectorN”)多个 OR 条件 :not()否定选择 (':contains("text")')包含有指定内容的元素 :eq() :lt() :gt() :even :odd列表索引选择（不支持负数） (':has(selector)')符合条件的再次过滤 :header选择像 h1,h2,h3 这些标题元素 :only-child仅有一个子元素的元素 :empty空元素，即无内容也无子元素 :parent非空元素

3. 节点漫游

完整列表在 http://api.jquery.com/category/traversing/

通过上面的选择器，我们可以得到希望处理的节点。但是通常，我们还希望得到当前节点的一些相对节点，以便下一步处理，比如“所有子节点”，“下一个兄弟节点”之类的东西。

3.1. 调用链处理

.add()向已有的节点序列中添加新的对象 .andSelf()在调用链中，随时加入原始序列 .eq()指定索引选取节点，支持负数 .filter() .is() .not() .find() .first() .last() .has()序列选择 .end()链点回溯

 <ul class="first"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul> <ul class="second"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul> $('ul.first').find('.foo').css('background-color', 'red')
    .end().find('.bar').css('background-color', 'green');

3.2. 子节点

.children()所有的子节点，可加入过滤条件， .children(selector)

3.3. 兄弟节点

.siblings() .next() .nextAll() .nextUntil() .prev() .prevAll() .prevUntil() .closest()兄弟节点选择

3.4. 父节点

.parent() .parents() .parentsUntil()父节点选择

4. 元素控制相关

4.1. attributes和properties的区别

attributes 是 XML 结构中的属性节点概念范畴：

 <body οnlοad="prettyPrint()""></body>

上面的代码表示了 body 这个节点，有一个名为 onload 的 attributes 。

properties 则是对于 DOM 对象的，对象属性概念范畴。这一般就没有直观的表现，但是它总是可以被访问到的，比如：

 $('body').get(0).tagName; //BODY

虽然 attributes 与 properties 是不同的概念范畴，但是它们对于某些特殊的属性是有共同的访问属性名的，比如 id 。

4.2. 类与属性控制

.addClass() .hasClass() .removeClass()添加一个类，判断是否有指定类，删除类

 $('body').addClass('test'); $('body').addClass(function(index, current){return current + 'new'}); $('body').removeClass('test'); $('body').removeClass(function(index, current){return current + ' ' + 'other'});

.toggleClass()类的开关式转换，它的使用方法有多种：

 <img class="test other" /> $('img').toggleClass(); //对所有类的开关
  $('img').toggleClass('test'); //对指定类的开关
  $('img').toggleClass(isTrue); //根据isTrue判断所有类的开关
  $('img').toggleClass('test', isTrue); //根据isTrue判断指定类的开关

  //同 $('img').toggleClass('test') 只是类名由函数返回
  $('img').toggleClass(function(index, class, isTrue){return 'name'});

  //isTrue会作为函数的第三个参数传入
  $('img').toggleClass(function(index, class, isTrue){return 'name'}, isTrue);

.attr()获取或者设置一个属性值，它的使用方法有多种：

 <img id="greatphoto" src="brush-seller.jpg" alt="brush seller" /> $('#greatphoto').attr('alt'); //获取属性
  $('#greatphoto').attr('alt', 'Beijing Brush Seller'); //设置属性

  //同时设置多个属性
  $('#greatphoto').attr({
    alt: 'Beijing Brush Seller',
    title: 'photo by Kelly Clark'
  });

  //设置属性为函数返回值, 函数的上下文为当前元素
  $('#greatphoto').attr('title', function(i, val) {
    return val + ' - photo by Kelly Clark';
  });

.prop()用法同 .attr() ，只是对象变成了 properties .removeAttr() .removeProp()删除属性 .val()设置或获取元素的表单值，通常用于表单元素。

 <input type="hidden" value="test" /> $('input').val();
  $('input').val('other');

.html()设置或获取元素的节点文件本值。

 <div><span>测试</span></div> $('div').html();
  $('div').html('<div>测试</div>');
  $('div').html(function(index, old){return old + '<span>另外的内容</span>'});

==样式控制== .css()获取或设置指定的 css 样式：

 $('body').css('background-color'); $('body').css('background-color', 'red'); $('body').css('background-color', function(index, value){return value + '1'}); $('body').css({color: 'green', 'background-color': 'red'});

.width() .height()获取或设置元素的宽和高

 $('body').width(); $('body').width(50); $('body').width(function(index, value){return value += 10});

.innerWidth() .innerHeight() .outerHeight() .outerWidth()元素的其它尺寸值 .scrollLeft() .scrollTop()获取或设置滚动条的位置 .offset() .position()获取元素的坐标。 offset 是相对于 document ， position 是相对于父级元素

4.3. 结构控制

4.3.1. 文本节点

.html() .text()设置和获取节点的文值。设置时 .text() 会转义标签，获取时 .text() 会移除所有标签。

4.3.2. 子节点

.append() .prepend()

 <h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $('.inner').append('<p>Test</p>'); <h2>Greetings</h2> <div class="container"> <div class="inner"> Hello <p>Test</p> </div> <div class="inner"> Goodbye <p>Test</p> </div> </div>

参数可以有多种形式：

 var $newdiv1 = $('<div id="object1"/>'), newdiv2 = document.createElement('div'), existingdiv1 = document.getElementById('foo'); $('body').append($newdiv1, [newdiv2, existingdiv1]);

4.3.3. 兄弟节点

.after() .before()

 <div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $('.inner').after('<p>Test</p>'); <div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>

4.3.4. 父节点

.wrap() .wrapAll() .wrapInner()

 <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> $('.inner').wrap('<div class="new" />'); <div class="container"> <div class="new"> <div class="inner">Hello</div> </div> <div class="new"> <div class="inner">Goodbye</div> </div> </div> $('.inner').wrapAll('<div class="new" />'); <div class="container"> <div class="new"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> </div> $('.inner').wrapInner('<div class="new" />'); <div class="container"> <div class="inner"> <div class="new">Hello</div> </div> <div class="inner"> <div class="new">Goodbye</div> </div> </div>

4.3.5. 复制/删除/替换节点

.clone()复制节点，可选参数表示是否处理已绑定的事件与数据 .clone(true)处理当前节点的事件与数据 .clone(true, true)处理当前节点及所有子节点的事件与数据 .detach()暂时移除节点，之后可以再次恢复了指定位置。 .remove()永久移除节点。 .empty()清除一个节点的所有内部内容。 .unwrap()移除节点的父节点。

5. 工具函数

5.1. jQuery对象序列

.map()遍历所有成员

 $(':checkbox').map(function() { return this.id; }).get().join(','); $(':checkbox').map(function(index, node) { return node.id; }).get().join(',');

.slice()序列切片, 支持一个或两个参数，支持负数

 $('li').slice(2).css('background-color', 'red'); $('li').slice(2, 4).css('background-color', 'red'); $('li').slice(-2, -1).css('background-color', 'red');

5.2. 通用工具

$.each() $.map()遍历列表, $.map() 可以作用于对象。

 $.each([52, 97], function(index, value) { alert(index + ': ' + value); }); $.map( [0,1,2], function(index, n){ return n + 4; }); //[4, 5, 6] $.map( [0,1,2], function(n){ return n > 0 ? n + 1 : null; }); //[2, 3] $.map( [0,1,2], function(n){ return [ n, n + 1 ]; }); //[0, 1, 1, 2, 2, 3] var dimensions = { width: 10, height: 15, length: 20 }; $.map( dimensions, function( value, key ) { return value * 2; }); //[20, 30, 40]  var dimensions = { width: 10, height: 15, length: 20 }, $.map( dimensions, function( value, key ) { return key; }); //["width", "height", "length"]

$.extend()合并对象，第一个参数表示是否进行递归深入

 var object = $.extend({}, object1, object2); var object = $.extend(true, {}, object1, object2);

$.merge()合并列表

 $.merge( [0,1,2], [2,3,4] ) //[0,1,2,2,3,4]

$.grep()过滤列表，第三个参数表示是否为取反

 $.grep( [0,1,2], function(array,index){ return n > 0; }); //[1,2] $.grep( [0,1,2], function(array,index){ return n > 0; }, true); //[0]

$.inArray()存在判断

 $.inArray( value, array [, fromIndex] )

$.isArray() $.isEmptyObject() $.isFunction() $.isNumeric() $.isPlainObject() $.isWindow() $.isXMLDoc()类型判断 $.noop()空函数 $.now()当前时间戳，值为 (new Date).getTime() $.parseJson() $.parseXML()把字符串解析为对象

 var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>", xmlDoc = $.parseXML( xml ), $xml = $( xmlDoc ), $title = $xml.find( "title" );

$.trim()去头去尾， $.trim(str) $.type()判定参数的类型

 # If the object is undefined or null, then "undefined" or "null" is returned accordingly. * jQuery.type(undefined) === "undefined" * jQuery.type() === "undefined" * jQuery.type(window.notDefined) === "undefined" * jQuery.type(null) === "null" # If the object has an internal [[Class]] equivalent to one of the browser's built-in objects, the associated name is returned. (More details about this technique.) * jQuery.type(true) === "boolean" * jQuery.type(3) === "number" * jQuery.type("test") === "string" * jQuery.type(function(){}) === "function" * jQuery.type([]) === "array" * jQuery.type(new Date()) === "date" * jQuery.type(/test/) === "regexp"

$.unique()遍历后去重， $.unique(array)