JQuery学习笔记（二）

如何在项目中使用JQuery

先去JQuery的官网下载JQuery库文件：jquery.min.js，然后放到项目文件夹中，并在需要用到的html文件中链接加载，如下：

<!--test.html--><script src="jquery.min.js"></script><script src="application.js"></script>

在test.html中，链接了jquery.min.js和一个application.js。这样在这个application.js中就能直接使用JQuery了。

JQuery基础选择器

JQuery有着和CSS一样的选择器规则：

包括有：

（1）标签选择：$("h1")，$("p")

（2）ID选择：$("#idname")

（3）类选择：$(".classname")

（4）同时选择：$("p , #idname , .classname")

（5）通用选择：*

（6）ance desc选择器：$("ul li") 选择了ul中包含的所有li，包括所有子孙中的li

（7）parent child选择器：$("ul>li") 选择了ul下直系的所有li，只包括直接的child，不包括孙子及以下

（8）prev next选择器：$("ul+li") 其中next必须为紧邻prev的同辈中的下一个标签，这个好像并没有什么卵用，直接选就好了嘛

（9）prev sibling选择器：$("ul～ul") sibling为与prev同辈的处于prev后面的所有叫sibling的标签

（10）伪选择器：$("li:first")，$("li:last")，$("li:odd")，$("li:even")，$("a:hover")等等

也可以用Travesing来选择，比用CSS选择器快：

$("li").first();  //所有li中的第一个$("li").last();  //所有li中的最后一个$("li").first().next();  //第二个li$("li").first().next().prev();  //第一个li$("li").first().parent();  //第一个li的父元素ul$("li").first().parent("ul");  //第一个li的所有ul父元素（包括祖辈）$("li").first().closest("ul");  //第一个li的最近的一个ul父元素$("li").first().closest("ul");  //第一个li的最近的一个ul父元素$("ul").find("li"); //ul中的所有li，类似于CSS选择中的descend选择$("ul").children("li"); //ul中第一代的所有li/*一个元素多个类*/$(".red.highlighted"); //直接连写$(".red").filter(".highlighted"); //从所有.red的元素中过滤出同时还是.highlighted的元素

操作DOM

如图，对于这个DOM结构：

/*创建DOM节点*/var newP = jQuery("<p>new paragraph</p>");var newP = $("<p>new paragraph</p>");/*插入DOM节点*/$(".vacation").before(newP);  //插入在.vacation之前作为同辈$(".vacation").after(newP);  //插入在.vacation之后作为同辈$(".vacation").prepend(newP);  //插入在.vacation的子代中第一位$(".vacation").append(newP);  //插入在.vacation的子代中最后一位/*另一种更好的表达*/newP.insertBefore($(".vacation"));newP.insertAfter($(".vacation"));newP.prependTo($(".vacation"));newP.appendTo($(".vacation"));/*复制DOM节点*/$("body").append($("span").clone());  //复制一份放到body的子代最末尾/*移除DOM节点*//*remove删除所选元素本身和子元素，empty只删除元素的子元素*/<span class="green">香蕉</span><span class="red">桃子</span><span class="green">葡萄</span><span class="red">荔枝</span>$("span").remove();  //删除所有span和text$("span").remove(".red");  //删除类为red的span和他们的text$("span").empty();  //删除span中的text/*包含DOM节点*/$(".red").wrap("<div></div>");$(".red").wrapInner("<div></div>"); //或者这样/*attr()添加查看属性，html()或text()添加内容*/$("#a1").attr("href" , "127.0.0.1");var $url = $("#a1").attr("href");$("#tip").html($url);/*检索样式值*/$("#content").css("color"); $("#content").hasClass("red");   //true or false/*移除样式，属性*/<div id="content" class="blue white">content</div> //用空格隔开两个类名$("#content").removeClass("blue white"); <a href="127.0.0.1">link</a>$("a").removeAttr("href");/*添加样式*/$("#content").css({"background":"red"}); //效果是添加，与原属性冲突的被新的覆盖.red{color:red;}$("#content").addClass("red"); //效果是添加，并不会覆盖原来的冲突属性/*toggleClass添加或删除样式*/$("#content").addClass("red"); //无则添加，有则移除/*replaceWith标签及内容替换*/var str = "<span class='red' title='hi'>我是土豪</span>";$("span").replaceWith(str);<div class="line number1 index0 alt2"><code class="js comments">/*html内容替换*///原标签为：<div id="myid"></div>$('#myid').html('<p>Text</p>');  // <div id="myid"><p>Text</p></div></code>$('#myid').replaceWith('<p>Text</p>');  // <p>Text</p></code> /*遍历*/$("span").each(function (index) { //注意有参数index        if (index == 1) {               $(this).attr("class", "red"); //这里的this是每个遍历对象        }}); 

交互事件

/*页面加载的ready事件，注意并不需要"document"双引号*/$(document).ready( function() {    //function content});/*Bind绑定事件和处理函数句柄，多个事件用空格隔开*/$("#btntest").bind("click mouseout", function () {                    $(this).attr("disabled", "true");                });/*hover鼠标移入移出事件*/$("div").hover( function() {    $(this).addClass("orange");}, function() {    $(this).removeClass("orange");});/*toggle绑定多个click事件，或者对元素进行显示，隐藏*//*每次点击<div>元素时，都依次执行<code class="marker">toggle()</code>方法绑定的函数，当执行到最后一个函数时，再次点击将又返回执行第一个函数*/$("div").toggle(function() {$(this).text("apple");},function() {    $(this).text("banana");},function() {    $(this).text("orange");});/*若div显示，则之后隐藏；若已隐藏，则显示*/$("div").toggle();/*on绑定事件*/$("div").on("click", function(){    //do sth});$("div p").on("click", fcn);  //...$("div").on("click", "p", fcn);  //效果同上，速度更快

鼠标事件：click，mouseup，mousedown，mouseover，mouseout，mouseenter，mouseleave，focusin，focusout。

键盘事件：keypress，keydown，keyup。

表单事件：blur，submit，focus，select，change

/*handler获取event参数*/$("button").on("click", function(event) {    event.stopBubble();  //禁止event逐级冒泡到document    event.preventDefault();  //禁止事件发生时的默认处理    //do sth.});

在元素中存常量数据

/*在标签内价一个“data-xxx”的属性*/<div id="vacation" data-price="399.9"></div>

则可以这样将数据提取出来：

var price = +$("#vacation").data("price");

这里的"+"是正符号，对于字符串用+会导致转换为数值类型。

读取表单中的值

var name = $("#name").value();var price = +$("#price").value();

小结text，html和value：

<p><b>hello</b> world</p>$("p").text();  //hello world$("p").html();  //<b>hello</b> world<div id="html"></div><div id="text"></div>var $content = "<b>唉，我又变胖了！</b>";$("#html").html($content);  //<div id="html"><b>唉，我又变胖了！</b><div>，结果为：唉，我又变胖了！$("#text").text($content);  //<div id="html">\<b\>唉，我又变胖了！\<\/b\></div>，这里的<>被转义当做字符串了，所以最后输出的是带标签的内容：<b>唉，我又变胖了！</b>/*value只能用于表单input*/

动画效果

形如：$(selector).animation([speed], [fcn]) 这里speed为速度(ms)，fcn为回调函数，当动画效果完成是触发。

silde：slideDown，slideUp，SlideToggle

silde：fadeIn，fadeOut，fadeToggle

animate：

animate({"top":"-10px"});  //上移10pxanimate({"top":"0px"});  //回到原处

AJAX

/*load方法*/$("ul").html("<img src='Images/Loading.gif' alt=''/>")  //当插入这段html会GET请求这个图片，后先加载“正在加载”的图片，因为它比较小.load("http://www.imooc.com/data/fruit_part.html", function() {  //再加载需要的内容，会把这个html嵌入<ul>中，完成后回调    $this.attr("disabled", "true");});/*也可以请求其中的某个部分*/$("ul").load("http://www.imooc.com/data/fruit_part.html#testul li");  //请求id为testul的li/*也可以传递参数*/<pre name="code" class="javascript">$("ul").load("http://www.imooc.com/data/fruit_part.php",{"name":"thanray"});  //请求id为testul的li/*用JQuery.getJSON或$.getJSON方法加载json数据*//*$(selector).each(function(index,element))，其中element为遍历的每个元素，相当于this*//*也可以在url中加参数传递$.getJSON(url,{"key":"value"},[callback]);*/$.getJSON("http://www.imooc.com/data/sport.json",function(data) {     $this.attr("disabled", "true");     $.each(data, function (index, sport) {  //这里相当于$.data.each()         if(index==3) return false;         $("ul").append("<li>" + sport["name"] + "</li>");    }});//.......

参考：

《JQuery在线手册》

《jQuery基础课程》

《JQuery入门视频教程》