关闭

jquery选择器,文档处理,属性

1036人阅读 评论(0) 收藏 举报

子元素选择器:  $('ul li:last-child')

     first-child:  ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 

     last-child:  ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

     only-child:  如果某个元素是父元素中唯一的子元素,那将会被匹配    如果父元素中含有其他元素,那将不会被匹配。

     nth-child:    匹配其父元素下的第N个子或奇偶元素  ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!


      :nth-child(even)   :nth-child(2n)        匹配父元素下面的所有偶元素
      :nth-child(odd)    :nth-child(2n+1)    匹配父元素下面的所有奇元素
      :nth-child(3n)       匹配父元素下面的为3的倍数的元素
      :nth-child(2)         匹配父元素下面指定的元素
     

表单选择器:

      input:表单类型 (text,button,checkbox,radio,reset,file等)     

      input:button  返回所有的input  类型为button的元素集合


表单对象属性选择器:

      input:enabled  ,  disabled,   checked,   selected


jquery的文档处理


    1、内部插入节点:把一个新的节点插入另一个元素内部的结尾处
       内插分为:
            1)、插入到之前 append(插入到内部结尾)  父节点.append(要插入的节点)
            2)、把某个子节点追加到父节点中 appendTO  要插入的节点.appendTo(父节点)
            3)、插入到父节点内部第一个 :父节点.prepend (要插入的节点)
            4)、插入到某个之前:prependTo  子节点.prependTo(父节点)
            
    
    2、外部插入节点:把一个新的节点插入另一个元素的之前或者之后
        在某个同级节点前后插入
            1)、在某个匹配元素之后插入新的元素  匹配元素.after(要插入元素)
            2)、在某个匹配元素之前插入新的元素  匹配元素.before(要插入元素)
            3)、insertAfter:  待插入的元素.insertAfter(匹配元素)
            4)、insertBefore:  待插入的元素.insertBefore(匹配元素)

    
    3、创建节点:

        1)、$() 创建(可直接加属性和文本节点)   $("<a id='id1'>我也可以被创建</a>");
        
    4、删除节点:
        1)、remove()  真删除
        2)、empty()  伪删除  还存在
        
    5、复制节点: 克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
        
        1)、clone  克隆后不具有任何行为事件
        2)、clone(ture) 克隆后有行为事件
        
    6、替换
        1)、replaceWith  将所有匹配的元素替换成指定的HTML或DOM元素。     
        匹配元素$("li").replaceWith("<a href=#>我被替换了!</a>");
        2)、replaceAll  用匹配的元素替换掉所有 selector匹配到的元素
        $("<a href=#>我被替换回来了!</a>").replaceWith("li匹配元素");
        

    7、包裹  

                1、wrap(html)把所有匹配的元素用其他元素的结构化标记包裹起来。

                2、wrapAll(html)将所有匹配的元素用单个元素包裹起来这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。

                3、 wrapInner(elem)      将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来

   
属性:
        1、获取属性值:
        attr(name);
            注意:attr()获取的是第一个匹配的值,不会获取一个集合
                    <div id=2></div>
                用法:attr('属性名');  得到属性值
                
        2、一次设置一个属性
        attr(name,value)
        
        3、一次设置多个属性
        attr({name:value,name:value})
        
        4、函数设置属性:
        attr(name,function)
        $("img").attr("title", function() { return this.src });
        
        5、移除属性
        removeAttr(name)        
        
        
        
css:   用法和属性相似
        1、获取属性值:
        css(name);
            注意:attr()获取的是第一个匹配的值,不会获取一个集合
                    <div id=2></div>
                用法:attr('属性名');  得到属性值
                
        2、一次设置一个属性
        css(name,value)
        
        3、一次设置多个属性
        css({name:value,name:value})
        
        注意:如果属性名包含 "-"的话,必须使用引号:  例如:margin-left
      
        addClass();     给元素添加class属性
        removeClass();  删除元素的属性
        toggleClass();  切换样式 有变无,无变有。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:505502次
    • 积分:6796
    • 等级:
    • 排名:第3408名
    • 原创:159篇
    • 转载:99篇
    • 译文:2篇
    • 评论:46条
    最新评论