jQuery's Practical Syntax

jQuery selectors

basic selector

select all&("*")

Tag selector $("tag name")

Class selector $(".class")

ID selector $("#id")

The selector can select multiple at a time, separated by $("#id,.class")

 

level selector

descendant selector $("div p")

Child selector $("div>p")

The next sibling tag $("div+p") Note that this must be the next P tag

Select all sibling tags after $("div~p")

 

filter selector

:eq[X] X+1 element $("li:eq[0]")

:gt[X] element greater than X

:lt[X] element less than X

:odd odd number

:even even 0 is even and the first element

:first first element

:last last element

 

 

attribute selector

$("div[value]") All div tags with value attribute

$("div[value='aaa']") Value = aaa in the div tag

$("div[value!='aaa']") value in the div tag! = aaa

$("div[value^='aaa']") The value in the div tag starts with aaa

$("div[value$='aaa']") The value in the div tag ends with aaa

 

 

filter selector

.eq(index) index is a number starting from 0, select the element with index number

.first( ) selects the first element that matches

.last( ) last

.parent( ) parent

.siblings( ) all siblings excluding self

.find( ) finds all descendants

.prevAll() all previous siblings

.nextAll() all siblings after


Manipulate the dom

text() - set or get the text content of the selected element

html() - Set or get the content of the selected element (including HTML markup)

val() - set or get the value of a form field

attr() - set or get the value of an attribute

       There is one parameter to set, and no parameter is to get!

removeAttr () - removes an attribute

Action style

addClass() adds a style class name to the specified element

removeClass() removes the style class name from the specified element

toggleClass () Toggle style class name for the specified element

hasClass () to determine whether there is a style class name

Action element

1. Add inside

$("div").append(node) // Append the element node to the end of the element inside the div

node.appendTo("div") // append node to the end of the element inside the div

$("div").prepend(node) // append the element node to the beginning of the element inside the div

node.prependTo("div") // append node to the beginning of the element inside the div

2. Add externally

$("div").before(node) // add sibling node node after div

$("div").after(node) // add sibling node node before div

3. Delete

remove() - removes the selected element and its children (suicide)

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)       动画立即执行完毕,这种用法使用较多

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324624243&siteId=291194637