jquery学习总结

Posted 2021-04-08 Java小学生的成长日志

一.选择页面元素

jQuery的基本设计和主要用法,就是"选择某个元素,然后对其进行各种操作". 这是他去与其他函数库的根本特点.

使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素

选择表达式可以是CSS选择器:

    $(document) //选择整个文档对象

    $("#myId") //选择id为myID的网页元素

    $("div.myClass")    //选择class为myClass的div元素

    $("input[name=first]")    //选择name属性等于first的input元素

也可以是jQuery特有的表达式

    $("a:first") //选择网页中第一个a元素

    $("tr:odd")    //选择表格的奇数行

   $("#myForm:input")    //选择表单中的input元素

    $("div:visible")    //选择可见的div元素''

    $("div:gt(2)")    //选择所有的div元素,除了前三个

    $("div:animated")    //选择当前处于动画状态的div元素

    

二.  改变结果集

如果选择多个元素,jQuery提过过滤器,可以缩小结果集

    $("div").has("p")    //选择包含p元素的div元素

    $("div").not("myClass")    //选择class不等于myClass的div元素

    $("div").filter(".myClass");    //选择class等于myClass的div元素

    $("div").first();    //选择第一个div元素

    $("div").eq(5);    //选择第6个div元素

有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法

    $("div").next("p");    //选择div元素后面的第一个p元素

    $("div").parent();    //选择div元素的父元素

    $("div").closest("form")    //选择离div最近的那个form元素

    $("div").children();    //选择div的所有子元素

    $("div ").sublings();    //选择div的同级元素

三  链式操作

    选中网页元素以后,就可以对他进行某种操作.

    jQuery允许将所有的操作连在一起,以链条的形式写出来,比如:

    $("div").find("h3").eq(2).html("hello")

   含义: 找到div元素/选择其中的h3元素/选择第三个h3元素/将他的内容改为"hello"

    这是jQuery最令人称道,最方便的特点,他的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同草哦做可以连在一起,

    jQuery还提供了.end()方法,使得结果集可以后退一步

    1. $('div')  
    2. .find('h3')  
    3. .eq(2)  
    4. .html('Hello')  
    5. .end()//退回到选中所有的h3元素的那一步  
    6. .eq(0)//选中第一个h3元素  
    7. .html('World'); //将它的内容改为World  

.end(): 回到最近一个"破坏性操作"之前,如果之前没有破坏性草哦做,则返回一个空集,所谓破坏性操作就是指任何该表所匹配的jQuery元素的操作

示例
描述：选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素

?

1 以上是关于jquery学习总结的主要内容，如果未能解决你的问题，请参考以下文章 jQuery 基础学习笔记总结 JQuery基础学习总结 jquery 快速入门学习总结 jquery 学习 总结 jQuery 第一阶段 学习使用总结 jQuery学习—jQuery中对象的查找方法总结