JQuery学习笔记（二）

如何在项目中使用JQuery

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

在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("
new paragraph
");
var newP = $("
new paragraph
");

/*插入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").remove();  //删除所有span和text
$("span").remove(".red");  //删除类为red的span和他们的text
$("span").empty();  //删除span中的text

/*包含DOM节点*/
$(".red").wrap("
");
$(".red").wrapInner("
"); //或者这样

/*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

/*移除样式，属性*/
content
 //用空格隔开两个类名
$("#content").removeClass("blue white"); 

link
$("a").removeAttr("href");

/*添加样式*/
$("#content").css({"background":"red"}); //效果是添加，与原属性冲突的被新的覆盖
.red{color:red;}
$("#content").addClass("red"); //效果是添加，并不会覆盖原来的冲突属性
/*toggleClass添加或删除样式*/
$("#content").addClass("red"); //无则添加，有则移除

/*replaceWith标签及内容替换*/
var str = "我是土豪";
$("span").replaceWith(str);
/*html内容替换*/ //原标签为： $('#myid').html('Text'); // Text
$('#myid').replaceWith('
Text
');  // 
Text

 /*遍历*/
$("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事件，或者对元素进行显示，隐藏*/
/*每次点击
元素时，都依次执行toggle()方法绑定的函数，当执行到最后一个函数时，再次点击将又返回执行第一个函数*/
$("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”的属性*/

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

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

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

读取表单中的值

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

小结text，html和value：

hello world
$("p").text();  //hello world
$("p").html();  //hello world




var $content = "唉，我又变胖了！";
$("#html").html($content);  //
唉，我又变胖了！
，结果为：唉，我又变胖了！
$("#text").text($content);  //
\唉，我又变胖了！\<\/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("")  //当插入这段html会GET请求这个图片，后先加载“正在加载”的图片，因为它比较小
.load("http://www.imooc.com/data/fruit_part.html", function() {  //再加载需要的内容，会把这个html嵌入
中，完成后回调
    $this.attr("disabled", "true");
});
/*也可以请求其中的某个部分*/
$("ul").load("http://www.imooc.com/data/fruit_part.html#testul li");  //请求id为testul的li
/*也可以传递参数*/
$("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("
" + sport["name"] + "
");
    }
});

//.......
 
  
 
  
 
  
 
  
 
  

 
  

 
  
参考：
 
  
《JQuery在线手册》
 
  
《jQuery基础课程》
 
  
《JQuery入门视频教程》