1.jquery选择器:
<1>层次选择器:$("prev+nex")选择紧接在prev后的nex元素,一般用$("prev").next("nex")代替。
$("#prev~nex")选择prev之后ttributenex元素,一般用$("prev").nextAll("nex")代替。
<2>内容过滤器:
1.:contains(text)选取含有文本内容为“text”的元素2. :empty选取不包含子元素的空元素
3. :has(selector)选取含有selector元素的元素 4. :parent选取含有子元素的元素
<3>属性过滤选择器:
1. [attribute]选取含有attribute属性的元素 2. [attribute *= value]选取属性值含有value的元素/[attribute ^= value]选取属性值以value开头的元素/[attribute $= value]选取属性值以value结尾的元素/[attribute |= value]选取属性值以value为前缀的元素/[attribute $= value]选取属性值以value结尾的元素/[attribute ~= value]选取属性值以空格隔开,含有value的元素/[attribute $= value][attribute1]选取属性值以value结尾的元素并且含有属性attribute1的元素。
<4>选择器的注意:如果选择器本身含有:“#” “.” “(” “]”选取元素时需要使用转义符进行转义。
<5>超链接不跳转:return false;
<6>find() and filter()两个函数的区别:
二者都是筛选出与指定表达式匹配的元素的集合,
find()是在元素内找子元素,而filter()只要是匹配的就行。
2.jquery中的DOM操作
<1>获取属性值:attr();例如:var $a = $('p');var b = $a.attr('title');
<2>创建节点:例如:var $a = $(" <li class="苹果">苹果</li> ");
<3>插入节点:
1在元素内部最后追加节点:append()/appendTo(),appendTo()方法可以用来移动元素,首先从原来位置删除,然后再添加到新位置。
例子:HTML:<p>i want to say</p>
jquery: $("p").append("<b>hello</b>"); / $("<b>hello</b>").appendTo("p");
结果: <p>i want to say<b>hello</b></p>
2向元素内部前置内容: prepend()/perpendTo()
例子:HTML:<p>i want to say</p>
jquery: $("p").prepend("<b>hello</b>"); / $("<b>hello</b>").perpendTo("p");
结果: <p><b>hello</b>iwant to say</p>
3.向匹配元素之后插入内容:after()/insertAfter()
例子:HTML:<p>i want to say</p>
jquery: $("p"). after ("<b>hello</b>"); / $("<b>hello</b>"). insertAfter("p");
结果: <p>i want to say</p><b>hello</b>
4.向匹配元素之前插入内容:before()/insertBefore()
例子:HTML:<p>i want to say</p>
jquery: $("p"). before ("<b>hello</b>"); / $("<b>hello</b>").insertBefore ("p");
结果: <b>hello</b><p>iwant to say</p>
<4>删除节点:remove()/detach()绑定事件留下来/empty()清空元素中的后代元素
<5>复制节点:clone()
<6>替换节点:replaceWith()
例如:$(“p”).replaceWith(“<b>你好</b>”)
<7>包裹节点:wrap()将匹配元素一个一个用wrap()内的内容包裹/wrapAll()将所有匹配元素用一个wrapAll()内的元素包裹/wrapInner()用匹配元素包裹wrapInner()内的元素。
例如:$(“strong”).wrap(“<b></b>”)
结果:<b><strong></strong></b>
<8>属性操作:
获取属性和设置属性:
例如:$(“p”).attr(“title”)和$(“p”).attr({“title” : “your title” , “name” : “test”})
删除属性:
例如:$(“p”).removeAttr(“title”);
<9>样式操作:
追加样式:addClass()
移除样式:removeClass()例如:$(“p”).removeClass(“high another”);
切换样式:$(“p”).toggle(function(){代码1} , function(){代码2});
$(“p”).toggleClass(“another”);
<10>设置和获取HTML、文本、和值
html()/text()/val()
<11>遍历节点
children()获得匹配元素的子元素集合,不包含后代元素
next()获得匹配元素的下一个同辈节点
prev()获得匹配元素的上一个同辈节点
siblings()取得前后所有同辈元素
parent()返回一个父节点
parents()返回多个父节点
closest()返回第一个匹配的祖先元素
<12>CSS-DOM
css()方法获取设置元素的样式属性,例如:
$(“p”).css(“font-size”: “14” ,“background-color”: “#ddd”);
注:如果值是数字,会自动转为像素。
offset()获取当前视窗的的相对偏移
position()获取相对最近设置position为relative或absolute元素的相对偏移
scrollTop()和scrollLeft()获取元素滚动条距顶端和距左侧的距离。
3.jQuery中的事件和动画
<1>hover()方法:
例如;
$(‘p’).hover(function(){someaction}, function(){some action});两个函数分别对应光标移到元素上和移出元素。
<2>toggle()用于模拟鼠标单击事件,分别激发方法中的多个函数;另外一个作用是切换元素的可见状态。
<3>事件对象,停止事件冒泡,阻止默认行为,只需要为函数添加一个参数event,
例如:$(‘span’).bind(‘click’, function(event){
event.stopPropagation();
evevt preventDefault();
});
<4>对于只需要触发一次的事件,使用one()替换bind()。
<5>trigger()执行默认操作和模拟操作
例1:$(“#btn”).trigger(“click”);
例2:$(“#btn”).trigger(“focus”);
<6>fadeln()改变元素透明度,直到完全显示/fadelnOut()反之
<7>slideUp()使元素由显示变为自下而上收回;slideDown()使元素由隐藏变为由上而下伸展。可以用slideToggle()替换两个操作,点击元素时,会通过改变元素高度,切换显示/隐藏。
<8>自定义动画animate(paras,speed,callback);
Paras:一个样式属性及其映射
Speed:速度参数
Callback:动作完成时执行的函数
例:
$(“#panel”).click(function(){
$(this).animate({left:“400px”, height: “200px”, opacity: “1”}3000)
.animate({top: ”200px”},3000,function(){
$(this).css(“border”:“5px solid blue”);
}//回调函数
})
停止动画:
stop([clear], [gotoEnd])
两个参数都是boolean值,第一个表示是否清空动画队列,第二个表示是否直接到达动画结尾。