美文网首页
JavaScript-jQuery笔记

JavaScript-jQuery笔记

作者: lioilwin | 来源:发表于2017-08-26 22:57 被阅读8次

    一.Dom对象和JQuery对象相互转换

    Dom对象代表HTML元素(标签)对象,
    jQuery对象是包装DOM对象产生的对象,
    jQuery不能用DOM方法,同理DOM也不能用jQuery方法。
    
    1).Dom对象转为JQuery对象  
        var $jQ = $(document.getElementById("username"));
        alert($jQ.val());
    
    2).JQuery对象转为Dom对象
        // 1.通过[index]转换
        var dom = $("#id1")[0];
        alert(dom.value);
        // 2.通过get(index)转换
        var dom = $("#id2").get(0);
        alert(dom.value);
    

    二.选择器

    1).基本选择器

    $("div") 匹配名为"div"的元素       
    $("#one") 匹配id属性值为"one"的元素      
    $(".two") 匹配class属性值为"two"的元素           
    $("*")    匹配所有元素
    $("div, #one, .two") 匹配多个选择器合并结果
    

    2).层次选择器

    $("ancestor descendant")匹配后代元素      
    $("parent > child)  匹配子元素       
    $("prev + next")    匹配之后紧接元素    
    $("prev ~ siblings")匹配之后同辈元素    
    $("p").siblings("siblings")匹配所有同辈元素 
    

    三.过滤选择器

    1).基础过滤器

    $("div:first")匹配找到的第一个元素        
    $("div:last")匹配找到的最后一个元素        
    $("div:not(#one)")匹配id不为one的div元素
    $("div:even") 匹配索引值为偶数的div元素(从0开始)      
    $("div:odd")  匹配索引值为奇数的div元素(从0开始)      
    $("div:eq(0)")匹配索引值等于0的div元素(从0开始)      
    $("div:gt(0)")匹配索引值大于0的div元素(从0开始)  
    $("div:lt(2)")匹配索引值小于2的div元素(从0开始)      
    $(":header")匹配标题元素,如h1, h2, h3等
    $(":animated")匹配正在执行动画的元素
    

    2).内容过滤器

    $("div:contains('xx')")匹配含有给定文本的元素      
    $("div:empty")匹配不含子元素或者文本的空元素       
    $("div:has(p)")匹配含有p元素的div元素        
    $("div:parent")匹配含有子元素或者文本的元素
    

    3).可见过滤器

    $("div:hidden")匹配不可见元素,如在css中display:none和<input type="hidden"/>
    $("div:visible")匹配可见元素
    

    4)属性过滤器

    $("div[id]")匹配有id属性的div元素
    $("div[id='id2']")匹配有id属性值为id2的div元素
    $("div[id!='id2']")匹配没有id属性或id属性值不为id2的div元素,等价于div:not([id='id2'])
    $("div[id^='i']")匹配有id属性值以i开头的div元素
    $("div[id$='2']")匹配有id属性值以2结束的div元素
    $("div[id*='d']")匹配有id属性值包含d的div元素
    $("div[id][name$='e']")复合属性选择器,匹配有id属性且name属性值以e结尾的div元素
    

    5)子元素过滤器

    $("div :nth-child(index/even/odd)")匹配div元素下的第i个子元素(从1开始)/奇偶元素
        注意: div后必须有空格,才能匹配子元素   
    $("div p:first-child") 匹配div元素的第一个p元素   
    $("div :last-child")匹配div元素的最后一个子元素 
    $("div :only-child")div元素只有一个子元素,才会被匹配!
    

    6).表单属性过滤器

    $("input:enabled")匹配可用的input元素
    $("input:disabled")匹配不可用的input元素
    $("input:checked")匹配被选中的input元素(复选框/单选框等,不包括select中option)
    $("select option:selected")匹配被选中的option元素
    

    7).表单过滤器

    $(":input")匹配所有表单元素,如input/select/textarea元素 
    $(":text")匹配的单行文本框元素
    $(":password")匹配密码框元素
    $(":radio")匹配单选按钮元素
    $(":checkbox")匹配复选框元素
    $(":submit")匹配提交按钮元素
    

    四.操作Html/Css

    1).内部插入

    append(content) 在被选元素内部结尾插入content元素
    appendTo(content) 将被选元素插入到content元素内部结尾
    prepend(content) 在被选元素内部开头插入content元素
    prependTo(content) 将被选元素插入到content元素内部开头
    

    2)外部插入

    after(content) 在被选元素后插入content元素
    insertAfter(content) 将被选元素插入到content元素后
    before(content) 在被选元素前插入content元素
    insertBefore(content) 将被选元素插入到content元素前
    

    3)操作属性

    attr(..,..) 增改查
    removeAttr(..) 删
    val(..)
        1).设置/获取表单value属性
        2).传入function(index, value)参数
        2).选中select/checkbox/radio的选项
    

    3)操作文本

    text(..); 纯文本内容
    html(..); html内容
    

    4)创建元素

    $("<input />")
    

    5)删除元素

    remove() 删除所选元素(包括后代元素)
    empty() 清空元素所有后代(包括文本但不包含属性).
    

    6)克隆节点

    clone(true)(true表明要复制事件)
    

    7)替换节点

    replaceWith()
    replaceAll()
    

    8)样式操作

    addClass()追加class属性
    removeClass()移除class属性
    toggleClass()切换class属性
    hasClass()判断是否含有某个class属性
    css() 设置或返回一个或多个样式属性
    height() 被选元素的宽度
    width() 被选元素的高度
    

    9)事件

    $().ready() 页面加载完成后执行
    click() 点击元素事件
    blur() 元素失去焦点
    focus() 元素获得焦点
    

    10)查找

    children() 所有子元素(不考虑后代元素)
    next()     后面紧邻同辈元素
    prev()     前面紧邻同辈元素
    siblings() 所有同辈元素    
    parent()   父元素
    

    简书: http://www.jianshu.com/p/cff6b507ef20
    CSDN博客: http://blog.csdn.net/qq_32115439/article/details/54978867
    GitHub博客:http://lioil.win/2017/02/10/JQuery.html
    Coding博客:http://c.lioil.win/2017/02/10/JQuery.html

    相关文章

      网友评论

          本文标题:JavaScript-jQuery笔记

          本文链接:https://www.haomeiwen.com/subject/qhgvdxtx.html