jQuer的实用语法

jQuery选择器

基本选择器

全选      &("*")

标签选择器   $("标签名")

类选择器    $(".class")

ID选择器    $("#id")

选择器可以一次选择多个 用,隔开   比如$("#id,.class")

层级选择器

后代选择器         $("div p")

子代选择器         $("div>p")

下一个兄弟标签       $("div+p")  注意这个必须是紧邻的P标签

选择后面的所有兄弟标签   $("div~p")

过滤选择器

:eq[X]       第X+1个元素                      $("li:eq[0]")

:gt[X]   大于X的元素

:lt[X]     小于X的元素

:odd    奇数

:even    偶数     0是偶数  也是第一个元素

:first   第一个元素

:last   最后一个元素

属性选择器

$("div[value]")   div标签中 所有有value属性的

$("div[value='aaa']")   div标签中 value = aaa 的

$("div[value!='aaa']") div标签中 value != aaa 的

$("div[value^='aaa']")    div标签中 value以aaa开头 的

$("div[value$='aaa']") div标签中 value 以aaa结尾 的

筛选选择器

.eq(index)              index是从0开始的一个数字,选择序号为index的元素

.first( )          选择匹配第一个元素

.last( )      最后一个

.parent( )     父亲

.siblings( )    所有兄弟     兄弟不包括自己

.find( )      查找所有后代

.prevAll()      所有之前的兄弟

.nextAll()     所有之后的兄弟


操作dom

text() - 设置或获取所选元素的文本内容

html() - 设置或获取所选元素的内容(包括 HTML 标记)

val() - 设置或获取表单字段的值

attr()- 设置或获取属性的值

       有一个参数就是设置,没有参数就是获取!

removeAttr ()- 移除属性

操作样式

addClass()             给指定的元素添加样式类名

removeClass()        给指定的元素移除样式类名

toggleClass ()         给指定的元素切换样式类名

hasClass ()             判断是否有样式类名

操作元素

1.在内部添加

$(“div”).append(node)          // 在div内部元素的结尾追加元素node

node.appendTo(“div”)           // 把node追加到div内部元素的结尾

$(“div”).prepend(node)         // 在div内部元素的开头追加元素node

node.prependTo(“div”)         // 把node追加到div内部元素的开头

2.在外部添加

$(“div”).before(node)           // 在div后面添加兄弟节点node

$(“div”).after(node)              // 在div前面添加兄弟节点node

3.删除

remove() - 删除被选元素及其子元素(自杀)

empty() - 删除被选元素的子元素,不包括被选元素!

删除被选元素的子元素用html(“”)更加高效!

4.复制

clone()- 如果加参数true就是深层复制,会把之前绑定的事件也给复制

replaceWith()-替换节点

jQuery尺寸

1.宽度和高度

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

 

.height()方法和.css(“height”)的区别:

返回值不同:.height()方法返回的是数字类型(20); .css(“height”)返回的是字符串类型(20px)

2.坐标值

offset()           //获取和设置元素在当前窗口的相对偏移,返回的是一个对象,设置值后自动变成相对定位       Object {top: 50, left:8}

position()       //只能获取元素相对于父亲的偏移,返回的是一个对象,不能设置值

获取值:offset().left     offset().top     position() .left        position() .top

设置值:$("p").offset({left:txtLeft,top:txtTop});

区别:

使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移。

使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。

3.滚动条

scrollTop()     //获取或者设置垂直方向上到页面顶端的距离

scrollLeft()     // 获取或者设置水平方向上到页面左端的距离

scroll()           // 触发滚动事件:$(selector).scroll(function(){…});       

 

jQuery动画效果

显示/隐藏

 $(selector).show(speed,callback);

 $(selector).hide(speed,callback);

 $(selector).toggle(speed,callback);

speed:隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒

callback:隐藏或显示完成后所执行的函数

滑动

 $(selector).slideDown(speed,callback);

 $(selector).slideUp(speed,callback);

 $(selector).slideToggle(speed,callback);

淡入淡出

1          $(selector).fadeIn(speed,callback);

2          $(selector).fadeOut(speed,callback);

3          $(selector).fadeToggle(speed,callback);

4          $(selector).fadeTo(speed,opacity,callback);

opacity:必选参数,将淡入淡出效果设置为给定的不透明度

自定义动画

  $(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

操作多个属性

停止动画

 $(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

stop(true)              所有动画不执行

stop(false,true)       动画立即执行完毕,这种用法使用较多

猜你喜欢

转载自www.cnblogs.com/hyn934/p/8904937.html