Jquery学习——选择器、DOM操作、动画

来源：互联网发布：java书籍下载编辑：程序博客网时间：2024/05/16 05:04

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:i want to say

jquery: $("p").append("hello"); / $("hello").appendTo("p");

结果： i want to sayhello

2向元素内部前置内容: prepend()/perpendTo()

例子：HTML:i want to say

jquery: $("p").prepend("hello"); / $("hello").perpendTo("p");

结果： helloiwant to say

3.向匹配元素之后插入内容：after()/insertAfter()

例子：HTML:i want to say

jquery: $("p"). after ("hello"); / $("hello"). insertAfter("p");

结果： i want to sayhello</b>

4.向匹配元素之前插入内容：before()/insertBefore()

例子：HTML:i want to say

jquery: $("p"). before ("hello"); / $("hello").insertBefore ("p");

结果： hello</b>iwant to say

<4>删除节点：remove()/detach()绑定事件留下来/empty()清空元素中的后代元素

<5>复制节点：clone()

<6>替换节点：replaceWith()

例如：$(“p”).replaceWith(“你好”)

<7>包裹节点：wrap()将匹配元素一个一个用wrap()内的内容包裹/wrapAll()将所有匹配元素用一个wrapAll()内的元素包裹/wrapInner()用匹配元素包裹wrapInner()内的元素。

例如：$(“strong”).wrap(“”)

结果：

<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值，第一个表示是否清空动画队列，第二个表示是否直接到达动画结尾。

0 0