jQuery基础之二

jQuery的中文文档十分详细,并且权威.
W3C的jQuery文档更加简单实用。

jQuery 1.9.0

jQuery操作DOM元素

元素本身

attr()

    获得元素的某项属性,更改或添加元素的属性值

    实例

        var className= $("div").attr("class")

        获得元素的类名

        attr("property",'value1')  更改一项属性

        attr({property1: 'value1',

            property2: 'value2' }) 更改多项属性

css()

    为元素添加或修改某项或多项属性

    var className= $("div").css("propertyName")

    css("propertyname","value")  更改一项属性

    $("div").css({"background":"red","width":"100px"}) 多项属性

    注意：

        多项属性时之间要用","隔开

        且与attr()的不同,设置多个属性时其类名也加上引号

addClass()

    为元素添加新类名,来改变样式

    $("div").addClass("red")

    为div元素添加样式

    注意：

        为元素添加新样式时不取消原有样式。

        addClass()的中类名不再加"."

        一次添加多项样式时之间要用" "空格隔开

removeClass()

    反 addClass()

removeAttr()

    反 css(),无需加属性值

clone()

    复制元素整体

    $(selector).clone()

    实例

        var a=$("#div1").clone()

        将id为div1的元素赋值给变量a

包裹元素和内容

wrap()

    用于包裹元素本身

    $(selector).wrap(wrapper)

    实例

    $("#div1").wrap("<div></div>")

    id为div1的元素整体被div标签包裹

wrapInner()

    实例

    $("#div1").wrapInner("<div id="div2"></div>")

    id为div1的元素的所有子元素被div2包裹,而div2又被div1包裹

元素的子元素

append(content)

    向指定的元素中追加内容,被追加的content参数,

    可以是字符 HTML元素标记还可以是字符串的标记

    默认在该元素的子元素的最后面

    实例

    js:

    $html="<p class="green">asdawdasdwadsawdsa</p>"

    $("div").append($html)

    相当于在div元素内部又加入p标签

appendTo()

    用法

        $(content).appendTo(selector)

    实例

        js:

        $html="<p class="green">asdawdasdwadsawdsa</p>"

        $($html).appendTo("div")

        将p标签加入到div标签的末尾处

remove()

    删除所选元素本身和子元素

    实例

        <span class="green">asd</span>

        <span class="red">asd</span>

        js:

            $("span").remove(".red")

            删除span标签中类名为red的元素,此时该span标签不再存在

empty()

    删除元素的所有子元素

    实例

    <span class="green">asd</span>

    js:

        $("span").empty()

        知识删除了asd文本节点span标签依然存在

层级之内

before()和 after()

    在元素的前后插入内容

    $(selector).before(content)

    $(selector).after(content)

替换内容

replaceWith() 和 replaceAll()

    格式

        $(selector).replaceWith(content)

        $(content).replaceAll(selector)

    实例

        $("#div1").replaceWith("<p>asdwsadaw</p>")

        把id为#div1的整个元素换为p标签

遍历元素

each()

    格式:$(selector).each(function(index))

    实例：

        <span class="green1"></span>

        <span class="green2"></span>

        <span class="green3"></span>

        <span class="green4"></span>

        js:

        $("span").each(function(){

            if(index==2){

                $(this).addClass("red")

            }

        }))

        为类为 green4的span元素添加red样式

        注意

            this的使用$(this)此时不加双引号

jQuery事件与应用

jQuery并没有创建太多新的事件,而是为绑定事件时提供了方便。

注意:这里得事件名称没有'on',绑定鼠标点击事件时只需click即可

新事件

ready事件

    ready事件类似于onLoad事件，但前者只要页面的DOM结构

    加载后便触发，而后者必须在页面全部元素加载成功才触发，

    ready()可以写多个，按顺序执行。

    注意:

        $(document).ready(function(){})等价于$(function(){});

focus和blur事件

    文本框的focus和blur事件

    focus事件:当点击文本框时,触发该事件

    blur事件:当文本框失去焦点时,触发该事件

change 事件

    当一个元素的值(value)发生改变时,将触发该事件

    实例：

        当改变下拉列表框的opnion时,将触发该事件

绑定事件的方法

bind() 方法

    通过bind()方法可以为获得的DOM对象绑定任意的事件

    $(selector).bind(event,[data],function)

    实例

        $("#btntest").bind("click mouseout",function(){

            $(this).attr("value","OK")

        })

        当鼠标点击id为btntest的按钮时改变其值为OK

    注意：

        事件要加引号

        多个事件一起绑定时当中空格隔开

绑定事件新方法

one() 方法

    $(selector).one(event,func)

    可以绑定任何有效的事件,但该事件函数只会触发一次

hover() 方法

    $(selector).hover(function1,function2)

    当鼠标移到所选元素上时,执行的function1,鼠标移出时执行function2

toggle() 方法

    $(seleector).toggle(func1,func2,func3,funcN)

    当第一次点击元素对象时执行func1,第二次点击元素对象时执行func2..

    当执行完最后一个函数时,再次点击将返回执行的第一个函数

卸载绑定事件方法

unbind() 方法

    可以移除元素已经绑定的事件

    $(selector).unbind(event[,fun])

    注意：

        若fun没有指定将移除所有的触发函数

模拟事件的触发

trigger() 方法

    该方法可以直接触发元素指定的事件

    $(selector).trigger(event)

    实例

        $("#form1 input:submit").trigger("click")

        当执行该语句是相当于点击提交按钮,表单元素将被提交

精彩集锦

1.this指针的使用

$("span").each(function(){

    if(index==2){$(this).addClass("red")}})

2.易错点睛

    var speed=‘24px’ 或var speed=24

    不可以 var speed=24px

秒客网

jQuery基础之二

jQuery基础之二

jQuery操作DOM元素

元素本身

包裹元素和内容

元素的子元素

层级之内

遍历元素

jQuery事件与应用

新事件

绑定事件的方法

精彩集锦

相关文章