您的位置：首页 > Web前端 > JQuery

锋利的JQuery 学习笔记

2016-03-16 10:42 387 查看

锋利的JQuery 学习笔记

第一章认识JQuery

·页面加载事件（可以写多个ready()）
$(document).ready(function(){
alert(“hello world”);
})

·链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等
//选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除css2样式
$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″);

·JQuery中获得一个对象的所有子元素内容
$(“#myDiv”).html()

·JQuery中的变量与 DOM中的变量
var $myVar = “”;
var myVar = “”;

·DOM对象转换成 JQuery对象
var obj = documnet.getElementById(“myDiv”);
var $obj = $(obj);

·JQuery对象转换成 DOM对象
var $obj = $(“#myDiv”);
var obj = $obj.get(0); //或者var obj = $obj[0];

·释放JQuery对$符号的控制权
JQuery.noConflict();

第二章 JQuery选择器

·JQuery完善的处理机制
document.getElementById(“test”).style.color = “red”; //如果test不存在，则页面出现异常
$(“#test”).css(“color”,”red”); //哪怕页面没有名称为test的元素，也不会报错。它是一个JQuery对象

·判断页面是否选择的对象
if( $(“.class”).length > 0 ){
// todo something
}

·基本选择器
$(“#myDiv”) //根据给定的ID选择匹配的元素，返回：单个元素
$(“.myClass”) //根据给定的样式名称选择匹配的元素，返回：集合元素
$(“div”) //根据给定的元素名称选择匹配的元素，返回：集合元素
$(“#myDiv,div.myClass,span”) //根据给定的规则选择匹配的元素，返回：集合元素
$(“*”) //选择页面所有元素，返回：集合元素

·层次选择器
$(“div span”) //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素
$(“div>span”) //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素
$(“.myClass+div”) //选择样式名称为myClass的下一个DIV元素，返回：集合元素
$(“.myClass+div”) //等价于 $(“.myClass”).next(“div”);
$(“.myClass~div”) //选择样式名称为myClass之后的所有DIV元素，返回：集合元素
$(“.myClass~div”) //等价于 $(“.myClass”).nextAll();
$(“.myClass”).siblings(“div”) //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素

·过滤选择器（index从0开始）
$(“div:first”) //选择所有DIV元素下的第一个DIV元素，返回：单个元素
$(“div:last”) //选择所有DIV元素下的最后一个DIV元素，返回：单个元素
$(“div:not(.myClass)”) //选择所有样式不包括myClass的DIV元素，返回：集合元素
$(“div:even”) //选择所有索引是偶数的DIV元素，返回：集合元素
$(“div:odd”) //选择所有索引是奇数的DIV元素，返回：集合元素
$(“div:eq(index)”) //选择所有索引等于index的DIV元素，返回：集合元素
$(“div:gt(index)”) //选择所有索引大于index的DIV元素，返回：集合元素
$(“div:lt(index)”) //选择所有索引小于index的DIV元素，返回：集合元素
$(“:header”) //选择所有标题元素（h1,h2,h3），返回：集合元素
$(“div:animated”) //选择所有正在执行去画的DIV元素，返回：集合元素

·子元素过滤选择器（index从1开始）
$(“:nth-child(index/even/odd)”) //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素
$(“:first-child”) //选择每个父元素下的第一个子元素，返回：集合元素
$(“:last-child”) //选择每个父元素下的最后一个子元素，返回：集合元素
$(“ul li:only-child”) //在UL元素中选择只有一个LI元素的子元素，返回：集合元素

·内容过滤选择器
$(“:contains(text)”) //选择所有内容包含text的元素，返回：集合元素
$(“div:empty”) //选择所有内容为空的DIV元素，返回：集合元素
$(“div:has(span)”) //选择所有含有SPAN子元素的DIV元素，返回：集合元素
$(“div:parent”) //选择所有含有子元素的DIV元素，返回：集合元素

·可见性选择器
$(“:hidden”) //选择所有不可见的元素（type=”hidden” style=”display:none” style=”visibility:none”），返回：集合元素
$(“:visible”) //选择所有可见的元素，返回：集合元素

·属性过滤选择器
$(“[id]“) //选择所有含有id属性的元素，返回：集合元素
$(“[class=myClass]“) //选择所有class属性值是myClass的元素，返回：集合元素
$(“[class!=myClass]“) //选择所有class属性值不是myClass的元素，返回：集合元素
$(“[alt^=begin]“) //选择所有alt属性值以begin开始的元素，返回：集合元素
$(“[alt^=end]“) //选择所有alt属性值以end结束的元素，返回：集合元素
$(“[alt*=some]“) //选择所有alt属性值含有some的元素，返回：集合元素
$(“div[id][class=myClass]“) //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素

·表单对象属性选择器
$(“#myForm:enabled”) //选择ID属性为myForm的表单的所有可用元素，返回：集合元素
$(“#myForm:disabled”) //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素
$(“#myForm:checked”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素
$(“#myForm:selected”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素

·表单选择器
$(“:input”) //选择所有<input> <select> <button> <textarea>元素，返回：集合元素
$(“:text”) //选择所有单行文本框元素，返回：集合元素
$(“:password”) //选择所有密码框元素，返回：集合元素
$(“:radio”) //选择所有单选框元素，返回：集合元素
$(“:checkbox”) //选择所有复选框元素，返回：集合元素
$(“:submit”) //选择所有提交按钮元素，返回：集合元素
$(“:image”) //选择所有图片按钮元素，返回：集合元素
$(“:reset”) //选择所有重置按钮元素，返回：集合元素
$(“:button”) //选择所有按钮元素，返回：集合元素
$(“:file”) //选择所有上传域元素，返回：集合元素
$(“:hidden”) //选择所有不可见域元素，返回：集合元素
$(“:text”) //选择所有单选文本框元素，返回：集合元素

第三章 JQuery中的DOM操作

·查找元素节点
var str = $(“#myDiv”).text(); //<div id=”myDiv” title=”hello”>123</div>
alert(str); //结果：123

·查找属性节点
var str = $(“#myDiv”).attr(“title”); //<div id=”myDiv” title=”hello”>123</div>
alert(str); //结果：hello

·创建元素节点
var $li1 = $(“”); //传入元素标记，自动包装并创建第一个li元素对象
var $li2 = $(“”); //第二个,创建时需要遵循XHTML规则（闭合、小写）
$(“#myDiv”).append($li1); //往id为myDiv的元素中添加一个元素
$(“#myDiv”).append($li2); //结果：<div id=”myDiv”></div>

$(“#myDIv”).append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^

·创建文本节点
var $li1 = $(“first”);
var $li2 = $(“second”);
$(“#myDIv”).append($li1).append($li2);
//结果：<div id=”myDiv”>firstsecond</div>

·创建属性节点
var $li1 = $(“first”);
var $li2 = $(“second”);
$(“#myDIv”).append($li1).append($li2);
//结果：<div id=”myDiv”>firstsecond</div>

·插入节点
$(“#myDiv”).append(“”); //往id为myDiv的元素插入span元素
$(“”).appendTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素

$(“#myDiv”).prepend(“”); //往id为myDiv的元素内最前面插入span元素
$(“”).prependTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素内的最前面

$(“#myDiv”).after(“”); //往id为myDiv的元素后面插入span元素（同级，不是子元素）
$(“”).insertAfter(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）

$(“#myDiv”).before(“”); //往id为myDiv的元素前面插入span元素（同级，不是子元素）
$(“”).insertBefore(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）

·删除节点
$(“#myDiv”).remove(); //将id为myDiv的元素移除

·清空节点
$(“#myDiv”).remove(“span”); //将id为myDiv的元素内的所有span元素移除

·复制节点
$(“#myDiv span”).click( function(){ //点击id为myDiv的元素内的span元素，触发click事件
$(this).clone().appendTo(“#myDiv”); //将span元素克隆，然后再添加到id为myDiv的元素内
$(this).clone(true).appendTo(“#myDiv”); //如果clone传入true参数，表示同时复制事件
})

·替换节点
$(“p”).replaceWith(“您好”); //将所有p元素替换成后者 您好 –> 您好
$(“您好”).replaceAll(“p”); //倒过来写，同上

·包裹节点
$(“strong”).wrap(“”); //用b元素把所有strong元素单独包裹起来 您好您好
$(“strong”).wrapAll(“”); //用b元素把所有strong元素全部包裹起来 您好您好
$(“strong”).wrapInner(“”); //把b元素包裹在strong元素内 您好

·属性操作
var txt = $(“#myDiv”).arrt(“title”); //获取id为myDiv的元素的title属性
$(“#myDiv”).attr(“title”,”我是标题内容”); //设置id为myDiv的元素的title属性的值
$(“#myDiv”).attr({“title”:”我是标题内容”, “alt”:”我还是标题”); //一次性设置多个属性的值
$(“#myDiv”).removeArrt(“alt”); //移除id为myDiv的元素的title属性

·样式操作
var txt = $(“#myDiv”).arrt(“class”); //获取id为myDiv的元素的样式
$(“#myDiv”).attr(“class”,”myClass”); //设置id为myDiv的元素的样式
$(“#myDiv”).addClass(“other”); //在id为myDiv的元素中追加样式
$(“#myDiv”).removeClass(“other”); //在id为myDiv的元素中移除other样式
$(“#myDiv”).removeClass(“myClass other”); //在id为myDiv的元素中移除myClass和other多个样式
$(“#myDiv”).removeClass(); //在id为myDiv的元素中移除所有样式
$(“#myDiv”).toggleClass(“other”); //切换样式，在有other样式和没other样式之间切换
$(“#myDiv”).hasClass(“other”); //判断是否有other样式

·设置和获取HTML、文本和值
alert( $(“#myDiv”).html() ); //获取id为myDiv的元素的HTML代码（相当于innerHTML）
$(“#myDiv”).html(“hello”); //设置id为myDiv的元素的HTML代码

alert( $(“#myDiv”).text() ); //获取id为myDiv的元素的HTML代码（相当于innerText）
$(“#myDiv”).text(“hello”); //设置id为myDiv的元素的HTML代码

alert( $(“#myInput”).val() ); //获取id为myDiv的元素的value值（支持文本框、下拉框、单选框、复选框等）
$(“#myInput”).val(“hello”); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）

·遍历节点
var $cList = $(“#myDiv”).children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）
var $sNext = $(“#myDiv”).next(); //获取id为myDiv的元素的下一个同辈元素
var $sPrev = $(“#myDiv”).prev(); //获取id为myDiv的元素的上一个同辈元素
var $sSibl = $(“#myDiv”).siblings(); //获取id为myDiv的元素的所有同辈元素
var $pClos = $(“#myDiv”).closest(“span”); //获取id为myDiv的元素本身开始，最接近的span元素（向上查找）

·CSS-DOM操作
$(“#myDiv”).css(“color”); //获取id为myDiv的元素的color样式的值
$(“#myDiv”).css(“color”, “blue”); //设置id为myDiv的元素的color样式的值
$(“#myDiv”).css({“color”:”blue”, “fontSize”:”12px”}); //设置id为myDiv的元素的color样式的值（多个）

$(“#myDiv”).css(“opacity”, “0.5″); //设置id为myDiv的元素的透明度（兼容浏览器）

$(“#myDiv”).css(“height”); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）
$(“#myDiv”).height(); //同上（实际高度）

$(“#myDiv”).css(“width”); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）
$(“#myDiv”).width(); //同上（实际宽度）

var offset = $(“#myDiv”).offset(); //获取id为myDiv的元素在当前窗口的相对偏移量
alert( offset.top + “|” + offset.left );

var offset = $(“#myDiv”).position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
alert( offset.top + “|” + offset.left );

$(“#txtArea”).scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
$(“#txtArea”).scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离

第四章 JQuery中的事件和动画

·加载DOM
$(window).load() 等价于 window.onload 事件

$(document).ready() 相当于window.onload事件，但有些区别：
(1)执行时机：
window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行
$(document).ready() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕

(2)多次使用：可以在同一个页面注册多个$(document).ready()事件
(3)简写方式：可以缩写成 $(function(){ }) 或 $().ready()

·事件绑定
当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用
bind( type, [data, ] fn );
type：指事件的类型:
blur（失去焦点）、focus（获得焦点）
load（加载完成）、unload（销毁完成）
resize（调整元素大小）、scroll（滚动元素）
click（单击元素事件）、dbclick（双击元素事件）
mousedown（按下鼠标）、mouseup（松开鼠标）
mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）
mouseenter（鼠标进入）、mouseleave（鼠标离开）
change（值改变）、select（下拉框索引改变）、submit（提交按钮）
keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）
error（异常）
data：指事件传递的属性值，event.data 额外传递给对象事件的值
fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素

·合并事件
hover(enter,leave)：鼠标移入执行enter、移出事件执行leave
$(“#myDiv”).hover( function(){
$(this).css(“border”, “1px solid black”);0
}, function(){
$(this).css(“border”, “none”);
});

toggle(fn1,fn2,…fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复
$(“#myDiv”).toggle( function(){
$(this).css(“border”, “1px solid black”);0
}, function(){
$(this).css(“border”, “none”);
});

·事件冒泡
下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。
那么，click事件会按照DOM的层次结构，像水泡一样不断向上直到顶端，所以称之为事件冒泡。
<body><div>我是SPAN我怕谁</div></body>
$(“span”).bind(“click”, function(){ alert(‘span click’); });
$(“div”).bind(“click”, function(){ alert(‘div click’); });
$(“body”).bind(“click”, function(){ alert(‘body click’); });

·阻止冒泡
解决这个问题的办法是：在SPAN执行完click事件后，停止事件冒泡。
$(“span”).bind(“click”, function(event){
alert(‘span click’);
event.stopPropagation(); //停止冒泡
});

·阻止默认行为
提交按钮在提交前做相应的逻辑判断，当不满足时
$(“#btnSubmit”).bind(“click”, function(event){
event.preventDefault(); //阻止默认行为相当于return false;
});

·事件对象的属性
$(“#myDiv”).bind(“click”, function(event){ });
event.type() //返回：click
event.target() //获取当前元素
event.relatedTarget() //引发事件的元素
event.pageX()/event.pageY() //获取鼠标相对于页面的X和Y坐标
event.which() //在单击事件中获取到对应的按键鼠标左中右分别是123
event.metaKey() //获取操作中的相关功能键（ctrl/alt/shift）

·移除事件
$(“#myDiv”).bind(“click”, fn1 = function(){
alert(“function1″);
}).bind(“click”, fn2 = function(){
alert(“function2″);
}).bind(“click”, fn3 = function(){
alert(“function3″);
});
$(“#myDiv”).unbind(); //移除id为myDiv的元素的所有事件
$(“#myDiv”).unbind(“click”); //移除id为myDiv的元素的所有click事件
$(“#myDiv”).unbind(“click”,fn1); //移除id为myDiv的元素的名称为fn1的click事件

·一次性事件：绑定的事件执行一次后自动移除
$(“#myDiv”).one(“click”, [data], function(){
alert(“function1″);
});

·触发事件
$(“#btn”).trigger(“click”, [data]); //代码方式触发click事件
$(“#btn”).click(); //另一种简写方式

·事件命名空间
$(“#myDiv”).bind(“click.hello”, function(){
alert(“function1″);
});
$(“#myDiv”).bind(“click”, function(){
alert(“function1″);
})
$(“div”).unbind(“click”); //两个事件都被移除
$(“div”).unbind(“.hello”); //只移除第一个
$(“div”).unbind(“click!”); //只移除第二个（注意感叹号，指没有名字空间的）

·JQuery中的动画
$(“div”).hide(); //隐藏所有DIV元素，相当于sytle=”display:none”
$(“div”).show(); //显示所有DIV元素

$(“div”).hide(1000); //一秒内隐藏所有DIV元素，其它参数还有：slow(600) normal(400) fast(200)
$(“div”).show(1000); //一秒内显示所有DIV元素

$(“div”).fadeOut(); //降低元素的不透明度，直至消失（支持速度参数，不会改变宽高）
$(“div”).fadeIn(); //升高元素的不透明度，直至显示

$(“div”).slideUp(); //由下至上收缩元素，直至消失（支持速度参数）
$(“div”).slideDown(); //由上至下展开元素，直至显示

·自定义动画animate
$(elem).animate(params, speed, callback);
params：样式属性及值的映射 {protected:”value”, protected:”value”}
speed: 速度参数
callback: 动画完成后执行函数，可选

$(“#myDiv”).animate({left:”500px”}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置
$(“#myDiv”).animate({left:”+=500px”}, 2000); //同上，支持累加、累减
$(“#myDiv”).animate({top:”200px”, left:”+=500px”}, 2000); //同上，多重动画，同时执行

$(“#myDiv”).animate({opacity:”0.5″}, 1000) //先变成50%透明
.animate({top:”500px”}, 500) //移至离顶端500px
.animate({left:”500px”}, 500) //移至离左边500px
.fadeOut(1000); //显示出来（四个动作为队列，一步步执行）

$(“#myDiv”).stop([cleanQuene] [,gotuEnd]); //停止动画，参数为boolean

$(“#myDiv”).is(“:animate”) //判断元素是否在执行动画

·其它动画
$(“#myDiv”).toggle(); //显示与隐藏元素
$(“#myDiv”).slideToggle(); //展开与收缩元素
$(“#myDiv”).fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%

第五章 JQuery对表单、表格的操作及更多应用

·单选文本框应用（获得焦点时，加了个特殊的样式，失去焦点时还原，兼容所有浏览器）
$(“:input”).focus(function(){ this.addClass(“inputFocus”); })
.blur(function(){ this.removeClass(“inputFocus”); });

·多行文本框的应用（放大、缩小多行文本框的高度，限制最大500px，兼容所有浏览器）
var $txt = $(“#textArea”);
$(“.bigger”).click(function(){
if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
//if( $txt.height() < 500) $txt.animate({height:”+=50″}, 500 );
});
$(“.smaller”).click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() – 50 );
//if( $txt.height() < 500) $txt.animate({height:”-=50″}, 500 );
});

·复选框的应用（实现全选、全不选、反选）
$(“#btnCheckedAll”).click(function(){ //全选
$(“[name=items]:checkbox”).attr(“checked”, true);
});
$(“#btnCheckedNone”).click(function(){ //全不选
$(“[name=items]:checkbox”).attr(“checked”, false);
});
$(“#btnCheckedRev”).click(function(){ //反选
$(“[name=items]:checkbox”).each(function(){
$(this).attr(“checked”, !$(this).attr(“checked”));
//this.checked = !this.checked;
}
});

·下拉框的应用（将一个下拉列表的选中项搬至另一个下拉列表）
$(“#btnAdd”).click(function(){ //将选中选项搬过去
$(“#mySelect1 option:selected”).appendTo(“#mySelect2″);
});
$(“#btnAddAll”).click(function(){ //将全部选项搬过去
$(“#mySelect1 option”).appendTo(“#mySelect2″);
});
$(“#mySelect1″).dblclick(function()[ //双击项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
}

·表单验证
<form>
<div>
<label>用户名：</label>
<input type="text" id="txtUid" value="" />
</div>
</form>
$("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
$(this).parent().append( $("*") );
});
$("form :input.required").blur(function(){ //失去焦点时验证域
if( this.value == "" ){
$(this).parent().append( $("必填字段") );
}
else{
$(this).parent().append( $("验证正确") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //用户每点一个键触发
$(this).triggerHandler("blur");
}).focus(function(){ //控制有焦点时触发
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
var errNum = $("form .error").length;
if( errNum ){
alert("有验证字段失败，请重新填写");
return false;
}
});

·表格应用
$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式

$("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行，添加highlightTr样式

$("tr").click(function(){
$(this).addClass("selectedTr") //给当前行添加选中样式
.siblings().removeClass("selectedTr") //反选移除选中样式
.end() //结束，返回$(this)，否则则是反选的行
.find(':radio").attr("checked",true); //在当前行查找单选框，选中它
});

第六章 JQuery与Ajax的应用

·load( url [,data] [,callback] )方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数

$(“#myDiv”).load(“hello.html”); //向myDiv元素加载hello.html的内容
$(“#myDiv”).load(“hello.html .myClass”); //筛选，只加载hello.html中myClass样式的内容

$(“#myDiv”).load(“hello.html”, function(){} ); //没参数的，使用GET方式
$(“#myDiv”).load(“hello.html”, {id:’123′, name:’dier’}, function(){} ); //有参数的，使用POST方式

$(“#myDiv”).load(“hello.html”, function(responseText, textStatus, XMLHttpRequest){ //回调函数
//responseText : 请求返回的内容
//textStatus : 请求状态 success error notmodified timeout
//XMLHttpRequest : Ajax对象
});

·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数
type：指定服务器返回内容的格式 xml html script json text _default

$.get( “test.aspx”, {id:”123″, name:”dier”}, function(data,textStatus){ //回调函数只有当状态是success才触发
//data : 请求返回的内容
//textStatus : 请求状态 success error notmodified timeout

//当data是HTML时，直接加载
$(“#myDiv”).html(data);

//当data是XML时，可筛选 <user id=”123″ name=”dier” age=”27″ />
var age = $(data).find(“user”).attr(“age”);

//当data是JSON时，可直接点出属性来 {id:”123″, name:”dier”, age:”27″}
var age = data.age;
});

·getScript(url [,callback])方法
$(function(){ //动态加载JS脚本
$.getScript(“test.js”);

$.getScript(“test.js”, function(){ //回调函数
//do something..
});
});

·getJSON(url [,callback])方法
$(function(){ //动态加载JS脚本
$.getJSON(“test.js”);

$.getJSON(“test.js”, function(data){ //回调函数
//do something..
//data : 返回的数据
$.each( data, function(index, item){ //遍历，相当于foreach
//index : 索引
//item : 当前项内容
//return false; 退出循环
});
});
});

·ajax(options)方法
url : 请求的地址
type : 请求的方式 GET POST 默认为GET
timeout : 请求超时时间(单位：毫秒）
data : 请求时发送的参数（String,Object）
dataType : 预期返回的数据类型 xml html script json jsonp text
bdforeSend : 发送请求前触发事件，如果return false则取消发送 function(XmlHttpRequest){}
complete : 请求完成后触发事件，不管成功与否 function(XmlHttpRequest, textStatus){}
success : 请求完成并且成功时触发事件 function(data, textStatus){}
error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否为全局请求，默认为true，可使用AjaxStart、AjaxStop控制各种事件

$.ajax({
url : “test.aspx”,
type : “POST”,
timeout : “3000″,
data : {id:”123″, name:”dier”},
dataType : “HTML”,
success : function(data,textStatus){
$(“#myDiv”).html( data );
}
error : function(XmlHttpRequest, textStatus, errThrown){
$(“#myDiv”).html( “请求失败：” + errThrown );
}
});

·序列化字符串 serialize()
$.get( “test.aspx”, $(“#form1″).serialize(), function(data,textStatus){
//将form1整个表单中的所有域序列化成提交的参数，支持自动编码
});

·序列化数组 serializeArray()
var arr = $(“:checkbox, :radio”).serializeArray();

·对象序列化 param()
var obj = {id:”123″, name:”dier”, age:”27″};
var kv = $.param(obj); //id=123&name=dier&age=27

·JQuery中的全局Ajax事件
ajaxStart(callback) //请求开始时触发
ajaxStop(callback) //请求结束时触发
ajaxComplete(callback) //请求完成时触发
ajaxSuccess(callback) //请求成功时触发
ajaxError(callback) //请求失败时触发
ajaxSend(callback) //请求发送前触发

$(“#loading”).ajaxStart(function(){ //当有AJAX请求时显示，完成时隐藏
$(this).show();
}.ajaxStop(function(){
$(this).hide();
}
);

//第七章是插件的使用及编写第八章则是一个实例此处忽略

//另

jQuery 学习笔记之六 (jQuery DOM的操作)

DOM操作的分类

DOM Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。

它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XML

javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，这些都是Dom Core的组成部分。

使用DOM Core来获取表单对象的方法

document.getElementByTagName("from");

使用DOM Core来获取某元素的src属性的方法：

element.getAttribute("src");

构建DOM元素

<body>

你最喜欢的水果是?

<ul>

<li title='苹果'>苹果</li>

<li title='橘子'>橘子</li>

<li title='菠萝'>菠萝</li>

</ul>

</body>

使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。

1.查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下:

var $li = $("ul li:eq(1)"); 获取<ul>里第2个<li> 节点

var li_txt=$li.text(); //获取第2个<li>元素节点的文本内容

alert(li_txt); //打印文本内容，这里会打印出橘子

以上代码获取了<ul>元素里第2个<li>节点，并将它的文本内容"橘子"打印出来

2.查找属性节点

利用jQuery 选择器查找到需要的元素后，就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。

获取属性节点并打印出它的文本内容，jQuery代码如下：

var $para = $("p"); //获取节点

var p_txt=$para.attr("title"); //获取元素节点属性title

alert(p_txt); //打印title属性值

创建节点

在dom 操作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。

1. 创建元素节点

例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。

(1)创建两个<li>新元素。

(2)将这两个新元素插入文档中。

第(1)个步骤可以使用jQuery的工厂函数$()来完成。

$(html);

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个<li>元素,jQuery代码如下:

$("ul").append($li_1); //添加到<ul>节点中，使之能在网页中显示

$("ul").append($li_2); //可以采取链式写法:$("ul").append($li_1).append($li_2);

注意事项：

(1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。

(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。

例如创建一个 元素，使用$("")或者(""),但是不要使用$("")或者大写的$("");

2.创建文档节点

var $li_1= $("<li>香蕉</li>"); //创建一个<li> 元素，包括元素节点和文本节点，香蕉就是创建的文本节点

var $li_2 =$("<li>雪梨</li>"); //创建一个<li> 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。

$("ul").append($li_1); //添加到<ul>节点中，使之能在网页中显示

$("ul").append($li_2); //添加到<ul>节点中，使之能在网页中显示

以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将他们添加到文档中就可以了。

注意事项：

无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。

例如$("<li>这是一个<a href='#'>复杂的组合</a></li>");

3.创建属性节点

创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。

jQuery代码如下:

var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素，包含元素节点，文本节点和属性节点其中title='香蕉'就是创建的属性节点

var $li_2=$("<li title='雪梨'>雪梨</li>");//创建一个<li>元素包括元素节点，文本节点和属性节点，其中title=‘雪梨’就是创建的属性节点

$("ul").append($li_1);

$("ul").append($li_2); //添加到<ul> 节点中，使之能在网页中显示

插入节点

动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。

使用append(),它会在元素内部追加新创建的内容。

jQuery中还有提供了其他几种插入节点的方法。

方法描述示例

append() 向每个匹配的元素内部追加内容 HTML代码

我想说:

jQuery代码: $("p").append("你好"); 结果: 我想说:你好

appendTo() 将所有匹配的元素追加到指定的元素中，

实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中 HTML 代码 我想说: jQuery代码： $("你好").appendTo("p"); 结果: 我想说：你好

prepend() 向每个匹配的元素内部前置内容 HTML代码: 我想说: jQuery代码: $("p").prepend("你好");结果你好我想说:

prependTo() 将所有匹配的元素前置到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。HTML 代码 我想说: jQuery代码: $("你好").prependTo("p"); 结果你好我想说

after() 在每个匹配的元素之后插入内容 HTML代码 我想说: jQuery代码: $("p").after("你好"); 结果: 我想说:你好

insertAfter() 将所有匹配的元素插入到指定元素的后面，与after()颠倒了 HTML代码 我想说 jQuery代码：$("你好").insertAfter("p"); 结果我想说：你好

before() 将每个匹配的元素之前插入内容 HTML代码 我想说: jQuery 代码：$("p").before("你好"); 结果你好我想说:

insertBefore() 将所有匹配的元素插入到指定的元素的前面，实际上，使用该方法是颠倒了常规的before的操作 $(" 你好").insertBefore("p"); 结果:你好我想说:

删除节点

如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的方法，即remove() 和empty()

1.remove()方法

作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。

例如删除图3-11中<ul>节点中的第2个<li>元素节点，jQuery代码如下:

$("ul li:eq(1)").remove();//获取第2个<li>元素节后，将它从网页中移除

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。

var $li = $("ul li:eq(1)").remove();//获取第2个<li>元素节点后，将它从网页中删除

$li.appendTo("ul");//把刚删除的节点又重新添加到<ul>元素里

可以直接使用appendTo()方法得特性来简化以上代码：

$("ul li:eq(1)").appendTo("ul");

//appendTo()方法也可以用来移动元素

//移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。

另外remove()方法也可以通过传递参数来选择性地删除元素

$("ul li").remove("li[title!='菠萝']"); //将<li>元素属性title不等于"菠萝" 的<li>元素删除。

2.empty()方法

严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。

$("ul li:eq(1)").empty(); //获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里面。

使用firebud查看橘子节点发生变化 <li title='橘子'/>

3.复制节点

复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品

并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果

$("ul li").click(function(){

$(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中

});

//在页面中点击"菠萝"后，列表最下方出现新节点"菠萝"。

$(this).clone(true).appendTo("body");//注意参数true

在clone()方法传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。

替换节点

如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和 replaceAll()

replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。

例如要将网页中你最喜欢的水果是? 替换成 你最不喜欢的水果是? 可以使用如下jQuery代码：

$("p").replaceWith("你最不喜欢的水果是?");

也可以使用jQuery中另一个方法repalceAll()来实现，该方法与replaceWith()方法得作用相同，只是颠倒了replaceWith的操作。

$("你最不喜欢的水果是?").replaceAll("p");

注意：

如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

4. 包裹节点

如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，wrap()，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

jQuery代码如下：

$("strong").wrap("");//用标签把 元素包裹起来

得到的结果如下：

 你最喜欢的水果是?

1.wrapAll()方法

该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法，wrap()方法将所有的元素进行单独的包裹。

$("strong").wrap("");

2.wrapinner()方法

该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来，例如可以使用它来包裹 标签的子内容:jQuery代码如下：

$("strong").wrapInner("");

运行代码后，发现标签内的内容被一对标签包裹了。

你最喜欢的水果是?

属性操作

在jQuery 中，用attr() 方法来获取和设置元素属性，removeAtt() 方法来删除元素属性。

1.获取属性和设置属性

如果要获取元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。

var $para=$("p"); //获取节点

var p_txt=$para.attr("title"); //获取元素节点属性title

如果要设置元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。

jQuery代码如下：

$("p").attr("title","your title");//设置单个的属性值

//为同一个元素设置多个属性值

$("p").attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。

jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等方法。

2.删除属性

有时候需要删除文档元素的特定属性，可以使用removeAttr()方法

删除元素的title属性

$("p").removeAttr("title");

操作样式

获取样式和设置样式

HTML代码如下：

 你最喜欢的水果是?

class 也是元素的属性，因此获取class 和设置class都可以使用attr()方法。

var p_class = $("p").attr("class");//获取元素的class

可以使用attr()方法来设置元素的class，jquery代码如下：

$("p").attr("class","high");//设置元素的class为high

他是将原来的class替换为class，而不是在原来的基础上追加新的class

追加样式

jQuery提供了专门的addClass()方法来追加样式，为了使例子更为容易理解，首先在<style>标签里添加另一组样式

<style>

.high{

font-weight:bold;

color:red;

}

.another{

font-style:italic;

color:blue;

}

//在网页中追加class类的按钮.

$("input:eq(2)").click(function(){

$("p").addClass("another"); //给元素追加"another"类

})

attr() 和addClass()的区别

用途追加样式设置样式

对同一个网页元素操作 test

第一次使用方法 $("p").addClass("high"); $("p").attr("class","high");

第1次结果 test

再次使用方法 $("p").addClass("another"); $("p").attr("class","another");

结果 test test

3移除样式

如果单击某一个按钮时，删除class的某个值，那么可以使用addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class

如下jQuery代码来删除

$("p").removeClass("high");//移除元素中为"high"的class

//如果要把元素的两个class都删除，就要使用removeClass()

$("p").removeClass("high").removeClass("another");

//jquery提供了更简单的方法

$("p").removeClass("high another");

另外，还可以使用removeClass()方法得一个特性来完成同样的效果，它不带参数的时候会将 class的值全部删除.

$("p").removeClass();

切换样式

$toggleBtn.toggle(function(){

//3

},function(){

//4

});

toggle()方法此处的作用是交替执行代码3和4两个函数，如果元素原来是显示的，则隐藏它，如果隐藏的，则显示它，此时，toggle()方法主要是控制行为上的重复切换。

判断是否含有某个样式

hasClass可以用来判断元素中是否有某个class，如果有，则返回true，否则返回false

$("p").hasClass("another");

//jQuery内部实际上是调用了is()方法来完成这个功能的，该方法等价于

$("p").is(".another")

1.设置和获取HTML，文本和值

html()方法

$("P").html();//获取元素的html代码

2.text() 方法

$("p").text(); //获取元素的文本内容

//text()可以对文本内容设置内容

$("p").text("你最喜欢的水果是?"); //设置元素的文本内容

3.val()方法

val()方法取值

通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值，另外val() 方法还有另外一个用处，就是它能select(下拉列表框)，checkbox(多选框)和radio(单选框) 相应的选项被选中，在表单操作中会经常用到。

//使用val设置选中项

$("#single").val("选择2号");

//如果要使下拉列表的第2项和第3项被选中

$("#multiple").val(["选择2号"，"选择3号"]); //以数组的形式赋值

使多个文本框被选中

$(":checkbox").val(["check2","check3"]);

$(":radio").val(["radio2"]);

也可以使用attr()方法来实现同样的功能

$("#single option:eq(1)").attr("selected",true); //设置属性selected

$("[value=radio2]:radio").attr("checked",true);

1 children()方法

该方法用于取得匹配元素的子元素集合

var $body = $("body") .children();

var $p=$("p").children();

var $ul = $("ul").children();

alert($body.length);

alert($p.length);

alert($ul.length);

2.next方法

该方法用于取得匹配元素后面紧邻的同辈元素。

从dom树的结构可以知道元素的下一个同辈节点时<ul>，因此可以通过next() 方法来获取<ul> 元素

var $p1 = $("p").next();//取得紧邻元素后的同辈元素

<ul>

<li title='苹果'>苹果</li>

<li title='橘子'>橘子</li>

<li title='菠萝'>菠萝</li>

</ul>

prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素。

从DOM树的结构中可以知道<ul>元素的上一个同辈节点时，因此可以通过prev()方法类获取元素

var $ul = $("ul").prev(); //取得紧邻<ul>元素前得同辈元素

得到的结果将是:

你最喜欢的水果是?

4.siblings()方法

该方法用于取得匹配元素前后所有的同辈元素。

在第1章导航栏的例子中有段代码如下：

$(".has_children").click(function() {

$(this).addClass("highlight"); //为当前元素增加highlight类

.children("a").show().end()

.siblings().removeClass("highlight")

.children("a").hide();

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航