• 读<jquery 权威指南>[1]-选择器及DOM操作


    今天是小年了,2013马上要过去了,但是学习不能间断啊。最近正在看《jQuery权威指南》,先温习一下选择器和DOM操作。

    一、基本选择器

    1.table单双行:

    $(function () {

                $( "#tbStu tr:nth-child(even)" ).addClass("trOdd");

            })

    2.jQuery完善的检测机制:

         传统js处理对象时要首先判断是否存在;jQuery具有较完善的检测机制不需要判断,即使该元素不存在,也不会出现错误提示。

    3.选择器

    ①基本选择器:

    Image(1)

    ②层次选择器

    Image(2)

    注意:

    • $(“ancestor descendant”)是祖先与后代关系,而$(“parent child”)是父级与子级关系;
    • $(“prev+next”)可以使用.next()代替,表示prev后面紧邻的兄弟元素;而$(“prev~siblings”)等同于.nextAll(),表示prev后面所有兄弟元素;siblings()方法表示获取全部的兄弟元素。

    ③过滤选择器:

    Image(5)

    Image(6)

    Image(7)

    Image(8)

    Image(9)

    Image(10)

    Image(11)

    二.DOM操作

    1.访问元素

    ①元素属性操作-- attr()

    • 获取元素属性:attr(name)
    • 设置元素属性:

    attr(key,value);

    attr({key1:value1, key2:value2})

    attr(key,function(){}):函数返回值作为属性值。

    • 删除元素属性:removeAttr(name)

    ②元素内容操作-- html(),text()

    Image(12)

    ③获取或设置元素值-- val()

    设置元素值:val(value)

    获取元素值:val()

    获取select多个选项值:$("select").val().join( ",")

    设置多个选中:val(array)。

    ④元素样式操作

    css(name,value):设置样式

    addClass("class0 class1"):添加样式

    toggleClass(name):切换样式

    removeClass(name):删除样式,如果有参数则删除指定类,否则删除所有class。

    2.DOM-创建节点

    $(html):用于动态创建节点。要注意是否闭合。

    3.DOM-插入节点

    ①内部插入节点

    Image(13)

    ②外部插入节点

    Image(14)

    4.DOM-复制节点

    clone():复制元素,不复制行为。

    clone(true):复制元素,同时复制行为。

    5.替换节点

    replaceWith(content)

    replaceAll(selector)

    替换完成后元素的事件全部消失。

    6.包裹节点

    Image(15)

    7.删除元素

    remove([expr]):选择元素节点后删除该节点及其后代元素。

    empty():清空元素及其后代元素。

     

  • 相关阅读:
    go os/exec执行外部程序
    Go signals 信号
    选择注册协议
    全选功能
    字符限制
    JS 数字,金额 用逗号 隔开(数字格式化)
    placeholder 不支持IE修复
    JS设置弹出小窗口。
    IE 文档模式
    js报错:email() is not a function
  • 原文地址:https://www.cnblogs.com/janes/p/3531526.html
Copyright © 2020-2023  润新知