jQuery定位元素和封装方法

 

2018年07月20日 17:47:36

阅读数：29

    说到jQuery，无非就是定位元素，使用方法，理清逻辑，写代码就可以了。

   昨晚，写了200行jQuery代码，就那个方法套方法，if else里套if，else，我现在还懵着呢。现在看见if、else就有点发憷的感觉。

    先给大家推荐一个写前端的工具：sublime。大小就30、40M，功能却异常的强大，具有代码补全，输入提示，自动调格式等功能，写JavaScript、jQuery、css、HTML等非常的方便。

    废话少讲了，开始这篇博客的正题。这篇博客非常适合jQuery的初学者阅读。内容非常的浅显，基础，但这也正是jQuery最核心的内容。

   1、定位元素（写一段HTML代码来演示）

HTML

1. <div id="dv1">

2. <div id="dv2">

3. <input type="text" name="" id="txt1">

4. <input type="text" name="" id="txt2">

5. <input type="text" name="" id="txt3">

6. <input type="text" name="" id="txt4">

7. <p></p>

8. </div>

9. <input type="text" name="" id="txt5">

10. </div>

我开始写jQuery代码了：

       1、//子和孙辈。div的id为dv1的那个div，它下面的所有的input标签（包括子和孙辈）。

$("#dv1 input").css("background-color","red");

        2、//子辈。div的id为dv1的那个div，它下面的子辈的input标签（只包括子辈）。

$("#dv1 > input").css("background-color","red");

红色的那个id为txt5

        3、////子辈。div的id为dv2的那个div，它下面的p标签的文字为123。。如果改为dv1，则找不到p。

$("#dv2 >  p").html("123");

          4、//紧跟的兄弟辈。id为txt3后面紧跟的兄弟元素，即txt4.

（那个*号代表任意，也可以换成input），最后改变颜色的是txt4.

$("#txt3 + *").css("background-color","red");

txt4后为p标签

$("#txt4 + *").html("123");

        5、//所有的兄弟辈。id为dv2，后面所有的兄弟结点。即txt5的背景为红色

$("#dv2 ~ *").css("background-color","red");

         //id为txt1，后面所有的兄弟结点。即id为txt2、3、4.

还可以用方法来定位元素。

     1、子辈不包括孙子辈，相当于#dv1 >input 的那种情况。在这里我都不截图了。

1. var dv1=$("#dv1");

2. dv1.children("input").css("background-color","red");

     2、子孙辈，相当于#dv input 的那种情况。

dv1.find("input").css("background-color","red");

   3、子辈的子辈，相当于dv2的子辈

dv1.children().children().css("background-color","red");

dv1.children().children("p").html("133");

     4、紧跟自己的兄弟辈，（相当于#txt1 + *）的情况，即txt2

$("#txt1").next().css("background-color","red");

    5、自己后面所有的兄弟辈，（相当于#txt1 ~ *）,即txt2、3、4

$("#txt1").nextAll().css("background-color","red");

     6、父辈，txt2的父亲辈的兄弟辈，即txt5

$("#txt2").parent().next().css("background-color","red");

    7、父辈以及祖辈。

$("#txt1").parents("div").find("input").css("background-color","red");

哈哈，定位元素就讲完了。学会了这些，基本的查到元素都明白了。

本博客还有一个重磅内容就是方法。

方法就讲的简单一点了。分为两种，一种是直接调用的方法，一种是jQuery对象可以点出来的方法。

直接调用的方法

1. /*自己定义的方法f*/

2. function f(num1,num2){

3. var max=num1>num2? num1:num2;

4. alert(max);

5. }

6.  

7. /*页面加载完成后调用，相当于c#里的load方法*/

8. $(function(){

9. f(1,2);

10.  

11. });

jQuery对象可以点出来的方法

1. /*主方法，相当于load*/

2. $(function(){

3.  

4. $("#btn").click(function(){

5. $("#btn").f1().f2().f3("12","张三","男");

6. });

7. });

8. /*自己定义了三个方法*/

9. $.fn.f1=function(){

10. // alert("div");

11.  

12. alert("hello world 一次");

13. return this;

14. };

15. $.fn.f2=function(){

16. // alert("div");

17.  

18. alert("hello world 两次");

19. return this;

20. };

21. $.fn.f3=function(id,name,sex){

22. // alert("div");

23.  

24. alert("我的id"+id+"我的名字"+name+"我的性别"+sex);

25. return this;

26. };

依次弹出框：

这就是所谓的链式编程，就能一直点下去。