JQuery小结

作者: alonwang | 来源:发表于2017-10-19 15:47 被阅读4次

    选择器

    元素选择器

    • ("p") 选取p元素。

    • $("p.intro") 选取所有 class="intro" 的 p 元素。

    • $("p#demo") 选取所有 id="demo" 的 p 元素。

    属性选择器

    • $("[href]") 选取所有带有 href 属性的元素。
    • $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    • $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    • $("[href='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

    CSS选择器

    • 把所有 p 元素的背景颜色更改为红色 $("p").css("background-color","red");

    事件

    当按钮的点击事件被触发时会调用一个函数:

        $("button").click(function() {..some code... } )
    

    名称冲突

    jQuery 使用 $符号作为 jQuery 的简介方式。
    某些其他 JavaScript 库中的函数(比如 Prototype)同样使用$ 符号。
    jQuery 使用名为 noConflict() 的方法来解决该问题。
    var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

    Html

    获得(设置)

    text()、html() 以及 val()
    不带参表示获取数据,带参表示设置内容

    添加

    • append() - 在被选元素的结尾插入内容
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

    删除

    • remove() - 删除被选元素(及其子元素)
    • empty() - 从被选元素中删除子元素

    获取并设置 CSS 类

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性

    尺寸

    • width()
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()

    遍历

    祖先

    • parent() 返回被选元素的直接父元素
    • parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
    • parentsUntil() 返回介于两个给定元素之间的所有祖先元素。

    后代

    • children() 返回被选元素的所有直接子元素
    • find() 返回被选元素的后代元素,一路向下直到最后一个后代。

    同胞

    • siblings() 返回被选元素的所有同胞元素
    • next() 返回被选元素的下一个同胞元素
    • nextAll() 返回被选元素的所有跟随的同胞元素
    • nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
    • prev()
    • prevAll()
    • prevUntil()

    过滤

    • first() 返回被选元素的首个元素
    • last() 返回被选元素的最后一个元素
    • eq() 返回被选元素中带有指定索引号的元素
    • filter() 不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
    • not() 返回不匹配标准的所有元素。

    Ajax

    load

        $(selector).load(URL,data,callback);
    

    get

        $.get(URL,callback);
    

    post

        $.post(URL,data,callback);
    

    相关文章

      网友评论

        本文标题:JQuery小结

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