首页手记 jQuery知识点整理（一些简单的未归纳）

jQuery知识点整理（一些简单的未归纳）

标签：

JQuery

$("#foo").html();//获取id为foo的元素内的html代码
等同于：documen.getElementById("foo").innerHTML;

//jquery对象转化为dom对象
var $cr = $("#cr");//jquery对象
var cr = $cr[0];或var cr = $cr.get(0);//dom对象
alert(cr.checked)//检查这个checkbox是否被选中
dom对象转化为jquery对象
var cr = document.getElementById("cr");//dom对象
var $cr = $(cr); //jquery对象

//jquery移交控制权
jQuery.noConflict();将变量$的控制权移交出去
自定义快捷方式
var $a = jQuery.noConflict();自定义一个快捷方式
$a(function(){...})利用自定义快捷方式--$a使用jQuery
$('#tt')获取的永远是对象，因此当使用jQuery检查某个元素
在网页上是否存在时，不能使用以下代码
if($('#tt')){
//do something
}
而应该根据获取元素的长度来判断
if($('#tt').length>0){
//do something
}
或转化为dom对象来判断
if(('#tt')[0]){
//do something
}

层次选择器
$("prev+next")选取紧接在prev元素后的next元素
等价于$('prev').next('next')
$('prev~siblings')选取prev元素后的所有siblings元素
等价于$('prev').nextAll('siblings')
$('prev').siblings('siblings')//选取prev的所有同辈
去除所有与给定选择器匹配的元素
：not(selector)
$('input:not(.myClass)')选取class不是myClass的input元素
选取索引是偶数的所有元素，索引从0开始
:even
选取索引是奇数的所有元素
：odd
选取索引大于index的元素（index从0开始）
:gt(index)
选取索引小于index的元素（index从0开始）
:lt(index)
选取所有的标题元素（如h1，h2...）
:header
$(":header")
选取当前正在执行动画的所有元素
：animated
$("div:animated")
选取含有文本内容为“text”的元素
:contains("text")
选取不包含子元素或者文本的空元素
:empty
选取含有选择器所匹配的元素的元素
：has(selector)
选取含子元素或者文本的元素
:parent
选取所有不可见的元素
：hidden//不仅包括样式属性display为none的元素
也包括文本隐藏域（<input type="hidden"/>）和visible:hidden
之类的元素
选取所有可见元素
：visible
选取每个父元素下的第index个子元素（index从一算起）
：nth-child(index/even/odd/equation)
选取每个父元素的第一个/最后一个子元素
:first-child/:last-child
$("ul li:first-child")//选取每个<ul>中第一个<li>元素
：only-child
$("ul li:only-child")在ul中选取是唯一子元素的<li>元素
：nth-child(3n+1)//能选取每个父元素下的索引值是（3n+1）的元素
表单对象属性过滤选择器
:enabled//选取所有可用元素
获取多选框中的个数
$("input:checked").length;
获取下拉选框中的内容
$("select:selected").text();

jquery扩展选择器
例如.color可以匹配颜色 :colindex可以匹配表格中的列
:focus可以匹配获取焦点的元素
插件地址：http://plugins.jquery.com/project/moreSelectors
基于XPath选择器的插件
插件地址：http://plugins.jquery.com/project/xpath

DOM操作分为三个方面：DOM Core,HTML-DOM,CSS-DOM
使用text()方法获得文本
使用attr()方法获取属性
var attr=$("p").attr("title");//获取p元素节点属性title
创建元素节点
var li_1=$("<li></li>");或 var li_1=$("</li>");//创建一个li元素
$("ul").append(li_1);//添加到<ul>节点中
prepend()//向每个匹配的元素内部前置内容
prependTo()与appendTo()用法一样
after()//在每个匹配元素之后插入内容
$('p').after("你好");
结果是你好
insertAfter()//该方法正好颠倒$(A).after(B)

remove()方法
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除
节点被remove()方法删除后，还可以继续使用
var $li=$("ul li:eq(1)").remove();
$li.appendTo("ul");//把刚才删除的节点又重新添加到<ul>元素中
$("ul li:eq(1)").appendTo("ul");//等同以上两行代码

empty()方法
方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
$("ul li:eq(1)").empty();//清空元素里的内容，不删除该元素

clone()方法
$("ul li").click(function(){
$(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到ul元素中
})

$(this).clone(true).appendTo("body");//在clone（）中传递了一个参数true
其含义是复制元素的同时复制元素所绑定的事件

$("ul li").filter(":contains('a'),:contains('b'),:contains('c')");
filter(expr)://筛选出与指定表达式匹配的元素集合，其中expr是多个选择器的集合

替换节点
replaceAll()与replaceWith()作用相同，操作相反
$('p').replaceWith("你好");
$("你好").replaceAll('p');

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

wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹

wrapInner()
$("strong").wrapInner("");//标签内的内容被一对标签包裹了

属性操作
var p_txt=$("p").attr("title");//获取元素节点属性title
$("p").attr("title","your title");//设置单个的属性值
$("p").attr({"title":"your title","name","test"});//设置多个属性的值
$("p").removeAttr("title");//删除属性

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

利用空格删除多个class名
$("p").removeClass("high another");

$("p").toggleClass("another");//重复切换类名another

判断是否含有某个样式
$("p").hasClass("another");
$("p").is(.another);//等价于上式

next()方法用于取得匹配元素后面紧邻的同辈元素
prev()方法用于取得匹配元素前面紧邻的同辈元素
siblings()方法用于取得匹配元素前后所有的同辈元素
closest()方法用来取得最近的匹配元素
$("p").height();//获取元素的高度值，也可改变高度值
对应的还有width()
html()方法类似于JS中的innerHTML
text()方法类似于JS中的innerText//读取或设置元素中的文本内容
js中的innerText属性并不能在Firefox浏览器下运行，而jquery的
text（）方法支持所有的浏览器
this指向当前文本框，"this,defaultValue"就是当前文本框的默认值

val()方法还有另外一个用处，它能使select，checkbox和radio相应的选项被选中
$("#single").val("...");//选一项等价于$("#sngle option:eq(1)").attr("selected",true);
$("#single").val(['a','b']);//选多项
注意：val（）方法是从最后一个选项往前读取

offset()方法它的作用是获取元素在当前视窗的相对偏移
position()方法它的作用是获取元素相对于最近的一个position样式设置为relative或者absolute
的祖父节点的相对偏移

scrollTop()与scrollLeft()
var scrollTop = $("p").scrollTop();//获取元素的滚动条距顶端的距离
var scrollLeft = $("p").scrollLeft();//获取元素的滚动条距左侧的距离

load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑给
window对象，则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，
则会在元素的内容加载完毕后触发。
$(window).load(function(){
//代码
})
等价于js中 window.onload=function(){
//代码
}

onload事件一次只能保存对一个函数的引用而jquery的$(document).ready()方法
会在现有的行为下追加新的行为，也就是一个文件可多次使用$(document).ready()方法

事件绑定
bind(type ,[data],fn)
第一个参数是事件类型
第二个参数为可选参数，作为event.data属性传递给事件对象的额外数据对象
第三个参数则是用来绑定的处理函数
bind（）方法也可以多次调用

合成事件 hover()和toggle()
hover()方法用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数，
当光标移开时会触发指定的第二个函数
toggle(fn1,fn2,...fnn);用于模拟鼠标的连续单击事件

事件冒泡
假设网页上有两个元素，其中一个嵌在另一个中，并都被绑定了click事件，
当单击内部元素的事件时，外部的也跟着触发，即为冒泡。
$("elemnet").bind("click",function(event){
//...添加事件对象event防止冒泡
event.stopPropagation();
preventDefault()方法阻止元素的默认行为
})

event,type()方法获取事件类型
$("a").click(function(e){
alert(event.type);//获取事件类型
return false;//阻止链接跳转
})

event.preventDefault()方法//阻止默认事件
event.stopPropagation()方法//阻止事件冒泡
event.target()方法获取到触发事件的元素
$("a").click(function(){
alert(event.target.href);//获取触发事件的<a>元素的href属性值
return false;//阻止链接跳转
})

event.pageX()和event.pageY()
该方法的作用是获取到光标相对于页面的x左标和y坐标
如果页面上有滚动条，还要加上滚动条的宽度或高度

event.which()方法
在鼠标单击事件中获取到鼠标的左,中,右健(左1，中2，右3)；在键盘事件中获取键盘的按键

event.metaKey()为键盘事件获取<ctrl>按键
event.originalEvent()方法//该方法的作用是指向原始的事件对象

移除按钮上以前注册的事件
$("#btn").click(function(){
$("#aa").unbind();
})
unbind([type],[data]);//第一个参数是事件类型，第二个参数是将要移除的函数
one()方法为元素绑定处理函数，但处理函数只触发一次

模拟操作
使用trigger()方法完成模拟操作，在用户进入页面后就触发click事件，而不需要用户去主动单击

trigger()方法触发事件后，会执行浏览器默认操作
$("input").trigger("focus");
$("input").triggerHandier("focus");//该方法会触发元素上绑定的特定事件，
同时取消浏览器的默认操作

绑定多个事件类型
$(function()){
$("div").bind("mouseover mouseout",function(){
//...
});
});

添加事件命名空间，便于管理
$(function(){
$("div").bind("click.plugin",function(){
//...});
$("div").bind("mouseover.plugin",function(){
//...});
$("button").click(function(){
$("div").unbind(".plugin");
});

$(function(){
$("div").bind("click.plugin",function(){
//...});
$("div").bind("click",function(){
//...});
$("button").click(function(){
$("div").trigger("click!");//注意click后面的感叹号
单击<button>元素只触发click事件，不触发click.plugin事件
});
});
单击元素<button>后，"plugin"命名空间的事件被删除

jquery中的动画
$("element").show(1000);1秒内显示
$("element").hide(slow);600毫秒内隐藏

fadeIn()和fadeOut()//此方法只改变元素的透明度
slideUp()和slideDown方法

自定义动画方法animate()
animate(params,speed,callback);
params:一个包含样式属性及值的映射
speed：速度参数，可选
callback：在动画完成时执行的函数，可选

累加累减动画
$(function(){
$)("#panel").click(function(){
$(this).animate({left:"+=500px"},300);//在当前的位置累加500px
});
});

动画回调函数
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px"},3000)
.animate({top:"200px",width:"200px"},3000,function(){
$(this).css("border","5px solid blue");
})
});
callback回调函数适用于jquery所有的动画效果方法，例如slideDown()方法的回调函数
$("#element").slideDown("normal",function(){
//...
});

停止元素的动画
stop([clearQueue],[gotoEnd]);
参数clearQueue和gotoEnd均是可选参数，为Boolan值，
clearQueue代表是否要清空未执行完的动画队列，
gotoEnd代表是否直接将正在执行的动画跳转到末状态
stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画
注意：如果有一组动画，jquery只能设置正在执行的动画的最终状态而
没有提供直接到达未执行动画队列最终状态的方法

判断元素是否处于动画状态
if(!$(element).is(":animated")){
//如果当前没有进行动画，则添加动画
}

toggle()方法//toggle()方法可以切换元素的可见状态，如果可见，则隐藏，反之可见。
$("#panel").click(function(){
$(this).next("div.content").toggle();
});

slideToggle()方法
slideToggle()方法通过高度变化来切换匹配元素的可见性
fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值

反选操作
$("#check").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
//this.checked=!this.checked;//js写法
});
});

$("tbody>tr").hasClass('selected')//含有 selected高亮样式

$(this)hasSelected?"removeClass":"addClass";
等价于$(this).removeClass('selected');
或者$(this).addClass('selected');

Ajax
Ajax不足
1.浏览器对 XMLHttpRequest对象的支持度不足
2.破坏浏览器前进，后退按钮的正常功能
3.对搜索引擎的支持不足
4.开发和调试工具的缺乏

jquery对Ajax操作进行了封装，在jquery中$.ajax方法属于最底层的方法，第2层是
load（），$.get(),$.post()方法，第3层是$.getScript()和$.getJSON()方法。
load(url,[data],[callback]);
url---请求html页面的url地址
data---发送至服务器的key/value数据
callback---请求完成时的回调函数，无论成功或失败

$("#aaa").load("test.html .para");//将test.html页面中class为para的内容加载到id为aaa的元素中

load()传递方式，如果有参数传递，采用get方式，反之用post方式

$.get()方法和$.post()方法
$.get(url,[data],[callback],[type])
type---服务器返回内容的格式

$.getScript()方法和$.getJson()方法
$(document.createElement("script")).attr("src","test.js").appendTo("head");
或者$("<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="test.js"/").appendTo("head");
实现动态加载JavaScript文件
以上等价于$(function(){
$('#send').click(function(){
$.getScript('test.js');
})
})
$.getScript()方法也有回调函数，他会在javascript文件成功加载后运行
$(function(){
$.getScript("...js"),function(){
$("#go").click(...);}
})

$.getJson()方法用于加载json文件，与$.getScript()方法用法相同

$("#send").click(function(){
$.get("get1.php",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
})
//serialize()方法能将dom元素内容序列化为字符串
serialize()方法还可自动编码

serializeArray()方法
serializeArray()与serialize()类似，该方法将dom元素序列化后，返回json格式的数据

$.param()方法
它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化

$("#loadding").ajaxStart(function(){ //ajax请求开始
$(this).show();
});
$("#loadding").ajaxStop(function(){ //ajax请求结束
$(this).hide();
});

$.ajax({
url:"test.html" ,
global:false //不触发全局ajax事件
})

表单验证插件--validation

使用方法：
（1）引入jquery库和validation插件
（2）确定需要验证的表单
$("#commentform").validate();
（3）针对不同的字段，设置字段相应的属性
class="required"为必须填写，minlngth=“2”为最小长度为2

jqury form表单插件
http://malsup.com/jquery/form/#download

通过核心方法ajaxForm（）很容易将表单升级为ajax提交方式
$("#myform").ajaxForm(function(){
$("#output").html("提交成功").show();
})
form 插件还有一个核心方法ajaxSubmit（）也能完成同样的功能
$("#myform").submit(function(){
$(this).ajaxSubmit(function(){
$("#outpt").html("提交成功" ).show();
})
return false;//阻止默认提交
})

jquery livequery动态绑定事件插件
http://plugins.jquery.com/project/liveQuery
$("a").livequery('click',function(){
alert("livequery导致的点击");
return false;
})

jquery UI插件
http://ui.jquery.com/download

cookie插件
http://plugins.jquery.com/project/Cookie
1.写入cookin
$.cookin('the_cookin','the_value');
2.读取cookin
$.cookin('the_cookin');
3.删除cookin
$.cookin('the_cookin',null);
其他可选参数
$.cookin('the_cookin','the_value',{
expires:7,
path:'/',
domain:'jquery.com',
secure:true
})