本文是学习廖老师的Javascript全栈教程后的一些笔记。
使用jQuery:
方法一：下载jQuery库，并在html页面中引入，方式如下：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>jQuery Exe</title> 5 <script src='WEB-INFlibjquery.js'> 7 </script> 8 </head> 9 <body> 10 </body> 11 </html>
其中src填入的是js文件在项目下的位置。
方法二：你可以不必下载jQuery，而是直接从网上引用。
jQuery官方引用地址：
<script src="http://code.jquery.com/jquery-latest.js"></script>
$符号：
jQuery的功能都被绑定在jQuery对象里，而$符号就是jQuery对象的别名。
window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'
可以知道jQuery本质上是一个函数对象。
选择器：
我们可以通过jQuery很方便对DOM对象进行操作。但任何操作都是建立在获取到DOM对象之后。选择器可以帮助我们获取DOM对象,jQuery支持以下四种简单的查找方式。
按ID查找：$('#id-name');//查找出id=id-name的对象。
按tag查找：$('p');//查找出标签为p的全部对象。
按class查找：$('.class-name');//查找class=class-name的全部对象。
按属性查找：$('[prop_name=prop_val]');//查找属性prop_name=prop_val的全部对象，用[]括起，填入键值对，其中如果含有特殊字符，则需要用""。
复杂一点的按属性查找，支持前缀查找或是后缀查找;
前缀查找：$('[prop_name^=prop_val]');//查找出prop_name值是以prop_val开头的全部对象。
后缀查找：$('[prop_name$=prop_val]');//查找出prop_name值是以prop_val结尾的全部对象。
注意：其中的^和$符号均是跟着属性名写的。
示例：
1 <div id="test-div"> 2 <p class="color-red">JavaScript</p> 3 <p class="color-green">Python</p> 4 <p class="color-red color-green">Erlang</p> 5 <p class="color-black" name="haskell">Haskell</p> 6 <form action="#0" target="_talent" method="post"> 7 <legend>注册新用户</legend> 8 <fieldset> 9 <p><label>名字</label><input type="text" name="name"></p> 10 <p><label>邮箱</label><input type="text" name="email"></p> 11 <p><label>口令</label><input type="password" name="password"></p> 12 <p><button type="submit">注册</button></p> 13 </fieldset> 14 </form> 15 </div>
<script> var div = $('#test-div'); var hs = $('.color-black'); var email = $('[name=email]'); var langs = $('[class^=color]'); var p_arr = $('p'); </script>
值得注意的是：script需要放在DOM对象构建完成之后或是等待页面加载完成后再进行查找，否则获取到的jQuery对象是个长度为0的数组。
组合查找：就是将上述简单选择器组合使用，组合器之间是且的关系。
多项选择器：多项选择器就是把多个选择器用,组合起来一块选。
var input_email = $('input[name=email]');//组合查找，查找是input且name=email的DOM对象
var l = $('p.color-red,p.color-green');// 多项选择器，JavaScript,Python,Erlang
层级选择器：如果DOM对象存在着层级关系，则可以用层级选择器来获取，层级选择器中层级关系用空格隔开。
组选择器：子选择器和层级选择器类似，但是子选择只能筛选直接父子关系，父子关系用>表示。
1 var form_p = $('from p');//层级选择器，选择form下的p标签的DOM对象 2 var email = $('p>[name=emal]');//子选择器
过滤器：过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。
1 var js = $('div p:first-child');//js 2 var hk = $('div p:last-child');//haskell 3 var py = $('div p:nth-child(2)');//下标从1开始，故选出python 4 var odd = $('div p:nth-child(odd)');//选出奇数元素，同理参数为even时，选出偶数元素
还有些常用的过滤器：
-
:input：可以选择<input>，<textarea>，<select>和<button>； -
:file：可以选择<input type="file">，和input[type=file]一样； -
:checkbox：可以选择复选框，和input[type=checkbox]一样； -
:radio：可以选择单选框，和input[type=radio]一样； -
:focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出； -
:checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')； -
:enabled：可以选择可以正常输入的<input>、<select>等，也就是没有灰掉的输入； -
:disabled：和:enabled正好相反，选择那些不能输入的。 - :hidden和:visible：用来选出隐藏和可见的元素。
查找和过滤
查找：我们可以在获取到某一个jQuery对象后，以此对象为基准进行查找。
1 <ul class="lang"> 2 <li class="js dy">JavaScript</li> 3 <li class="dy">Python</li> 4 <li id="swift">Swift</li> 5 <li class="dy">Scheme</li> 6 <li name="haskell">Haskell</li> 7 </ul> 8 9 <script> 10 var ul = $('ul.lang'); // 获得<ul> 11 var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme 12 var swf = ul.find('#swift'); // 获得Swift 13 var hsk = ul.find('[name=haskell]'); // 获得Haskell 14 </script>
同理可以用parent(),prev(),next()方法来查找当前对象的父元素，前一个和后一个。
过滤：filter()方法可以过滤掉不符合选择器条件的节点。
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell 2 var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
或者给filter()方法传入一个函数，fliter将根据返回值的true和false来进行过滤。
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell 2 langs.filter(function () { 3 return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点 4 }); //
map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
此外，一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉。