Jquery学习笔记

一、Jquery概念：

Jquery:和extjs、prototype一样,是一种轻量级的JavaScript框架。三者之中，Jquery用得最广泛。

二、使用准备：

在官网下载一个合适的Jquery版本的js文件，放在WebContent/js文件夹下。以后每个使用到Jquery的jsp文件中都要先导入该地址才可以使用。如：

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

三、查找匹配元素：

1、选择器：

根据id: $("#id")

根据类: $(".class")

根据标签: $("标签名")

所有: $("*")

2、根据位置找：

匹配所有后代： $("祖先后代")

匹配子元素： $("父元素>子元素")

匹配紧挨的兄弟元素：$("label+兄弟元素")

匹配所有的兄弟元素：$("form~兄弟元素")

3、根据属性找：

$("div[id]")

$("input[name='newsletter']")

$("input[name!='newsletter']")

$("input[name^='news']")以news开头

$("input[name$='letter']")以letter结尾

$("input[name*='letter']")里面包含letter

4、根据form下的input查找：

根据input的type类型 如：$(":text")、$(":password")

根据form控件的启用和禁用 如：$(":enabled")、$(":disabled")

根据控件的选中状态 如：下拉列表$("select option:selected")

$(":hidden") 匹配所有不可见的元素

5、选择孩子（索引从1开始）：

如：$("ul li:nth-child(2)")匹配第第2个孩子

$("ul li:first-child")匹配第一个孩子

$("ul li:last-child")匹配最后一个孩子

$("ul li:only-child")匹配唯一的一个孩子

6、对满足条件的进行奇偶筛选（索引从0开始）：

$(":even") 匹配偶数

$(":odd") 匹配奇数

7、匹配给定索引的元素（索引从0开始）：

$(":eq(n)") 匹配索引等于n的

$(":gt(n)") 匹配索引大于n的

$(":lt(n)") 匹配索引小于n的

8、结果集的运算：

[selector1],[selector2],...交集

selector1,selector2,...并集

9、匹配给定文本的元素：

$(":contains(text)")

10、匹配不包含子元素或文本的空元素：

$(":empty")

11、去除所有给定的元素：

$(":not(selector)")

四、解决jquery与prototype冲突：

jQuery.noConflict( )解决jquery.js与 prototype.js关于$的冲突：

var j=jQuery.noConflict( );//给jquery起个别名

j(document.body).css({background:"red"});//j代替$

五、页面加载：

1.等页面所有资源加载完后，调用后面的函数：

window.onload=function( ){ };

2.文档的DOM树加载完调用（无需等待其他资源加载完毕）：

$(document).ready(function( ){ });

可简写为：$(function( ){ });

六、dom对象与jQuery的转换：

如：$(document.body)//把dom对象转换为jquery，一个jquery里面可以封装多个dom对象

$("img").get(0)===document.getElementById("myp")

//把jquery对象的一个元素取出来

三种取出jquery对象中第n个元素的方法：

1.$("p").get(n)

2.$("p")[n]

3.$("p").get( )[n]

七、遍历：each

如：

$("p").each(function(i){$(this).append("这是第"+i+"个追加")});

八、css:

$("p").css("color“);//取属性值

$("p").css("color",”blue“);//给单个属性赋值

$("p").css({color:"yellow",font-size:"+3"});//给多个属性赋值

九、添加、删除、切换class：

addClass\removeClass\toggleClass

十、属性：

$("img").attr("src“);//取属性值

$("img").attr("src",”images/boy.gif“);//给单个属性赋值

$("img").attr({src:"images/boy.gif",title:"my pic"});//给多个属性赋值

$("img").removeAttr("src“);//移除属性

十一、.html( )与.text( )的区别：

$("p").html( ); //只返回第一个匹配元素的html内容,相当于$("p")[1].innerHTML

$("p").html("<font color:'red'>新的html内容</font>");

//设置值覆盖原有的html内容

注：.text( )和.html( )用法一样，只是前者指作用于文本内容，其他如格式一概不管。

十二、取值与赋值：

$("input").val( ); //取值

$("select").val("1");//赋值

十三、文本追加与前置：

append、appendTo

prepend、prependTo

after、before

十四、Ajax

1.$.ajax( );

如：$.ajax({
type:"GET",
url:"getInnerText",
data:{name:"z3",pwd:"123"},
success:function(data){//成功时执行
document.getElementById("myp").innerHTML=data;
},
error:function( ){//失败时执行
document.getElementById("myp").innerHTML="请求错误";
},
beforeSend:function(xhr){
console.log(xhr);
},
dataType:"text",//期望按什么方式处理返回结果（不写的话按照自动方式处理）
complete:function(){//不管成功或失败都执行，相当于finally
console.log("abcdefg");
}
});

2.$.get( );

//$.get()是$.ajax()的简化格式，只不过$.get()只能处理请求成功的情况
$.get("getInnerText",{name:"lee",age:18},function(data){
document.getElementById("myp").innerHTML=data;
alert(data.name);
});

3.$.getJSON( );

$.getJSON("getInnerJSON",{name:"z3",age:"22"},
function(data){
resTxt="name="+data.name+",age="+data.age;
document.getElementById("myp").innerHTML = resTxt;});
}

十五、其他动作：

1.load 把远程数据插入到当前DOM中，并且覆盖掉原有内容

如：$("div").load("abc.txt");

2.ajaxComplete 页面上ajax请求完成时调用

   ajaxStart         页面上ajax请求开始时调用

3.bind 绑定

如：//绑1个事件
$("p").bind("click",{name:"z3"},function(event){    //传参
alert(event.data.name);
});
//绑2个事件

$("p").bind('mouseenter mouseleave',function(){
$(this).toggleClass('entered');
});
//绑多个事件
$("p").bind({
click:function(event){alert(event);},
mouseenter:function(){$(this).toggleClass('entered');},
mouseleave:function(){$(this).toggleClass('entered');}
});

4.focus 聚焦

    blur 失去焦点

5.trigger 触发

$("p").triggle("click");//自动触发单击事件

十六、动画\效果

fadeIn 淡入 fadeOut 淡出fadeTo 设置透明度到指定的值

如：<p style="background-color: green;display: none">淡入效果显示</p><!-- 注意此处display一定要设为none-->
<script type="text/javascript">
$("p").fadeIn("slow");

</script>