$("#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("<b>你好</b>");
结果是<p></p><b>你好</b>
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("<strong>你好</strong>");
$("<strong>你好</strong>").replaceAll('p');
包裹节点
$("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来
wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹
wrapInner()
$("strong").wrapInner("<b></b>");//<strong>标签内的内容被一对<b>标签包裹了
属性操作
var p_txt=$("p").attr("title");//获取<p>元素节点属性title
$("p").attr("title","your title");//设置单个的属性值
$("p").attr({"title":"your title","name","test"});//设置多个属性的值
$("p").removeAttr("title");//删除属性
追加样式
$("p").addClass("another");//给<p>元素追加"another"类
利用空格删除多个class名
$("p").removeClass("high another");
$("p").toggleClass("another");//重复切换类名another
判断是否含有某个样式
$("p").hasClass("another");
$("p").is(.another);//等价于上式
next()方法 用于取得匹配元素后面紧邻的同辈元素
prev()方法 用于取得匹配元素前面紧邻的同辈元素
siblings()方法 用于取得匹配元素前后所有的同辈元素
closest()方法 用来取得最近的匹配元素
$("p").height();//获取<p>元素的高度值,也可改变高度值
对应的还有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()方法会在元素的事件中绑定一个处理函数。如果处理函数绑给
window对象,则会在所有内容加载完毕后触发,如果处理函数绑定在元素上,
则会在元素的内容加载完毕后触发。
$(window).load(function(){
//代码
})
等价于js中 window.=function(){
//代码
}
事件一次只能保存对一个函数的引用而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" src="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
})