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"});  //上移10px
animate({"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入门视频教程》