jQuery基础之二

jQuery基础之二

 

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

---

jQuery 1.9.0

jQuery中文文档
W3C的jQuery文档

---

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

相关标签：JavaScript

 

 

记录一下依稀记得的。来自《锋利的jQuery》第二章的总结

第一类：基本选择器（最常见的选择器）
①$("#id") ②$(".classname") ③ $("element") ④$("selector1,selector2,……,selectorN")

第二类：层次选择器
①$("ancestor descendant") 后代选择器 ② $("parent>child") 子代选择器
③$("prev+next") 紧接在prev后的next元素
④ $("prev~siblings") prev后的所有siblings元素

第三类：过滤选择器
①基本过滤选择器
②内容过滤选择器
③可见性过滤选择器
④属性过滤选择器
⑤子元素过滤选择器
⑥表单对象过滤选择器

Ps:私以为过滤选择器分类太细，应总结常用的几个过滤选择器，方便记忆。

第四类：表单选择器

$(":input")、$(":text")、$(":password")、$(":radio")、$(":image")
$(":checkbox")、$("submit")、$(":reset")、$(":button")、$(":file")
Ps:还是觉得表单选择器也挺细的，不知道常用的是哪几个

书中有段话：jQuery选择器的写法与CSS选择器的写法十分类似，只不过两者的作用效果不同，css选择器找到元素后是添加样式，而jQuery选择器找到样式后是添加行为。

作者： 慕粉1464062117 
链接：http://www.imooc.com/article/16236
来源：慕课网