JS 学习笔记让前端飞我爱编程

JS jQuery

2017-05-26  本文已影响30人  壬万er

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
下载：
jquery官网

一、使用Jquery

jquery其实就是一个js文件，使用它就像我们用一个外部js文件一样使用即可。一般放在html的head中引入。

<script src="./libs/jquery-3.1.1.js" type="text/javascript"></script>

二、Jquery的入口

<script type="text/javascript">
    //带整个文档加载完毕之后再去执行我们传入的匿名函数。  document.onload = function () {}
    $(document).ready(function () {
        //jquery代码
    });
    //上面的入口可以简写成如下形式,完全与前面的的等价
    $(function () {
        
    });
</script>

说明：

三、JQuery对象和DOM对象的转换

DOM对象转换成JQuery对象
** $(domObj)**

JQuery对象用两种方式转变成DOM对象：
1、利用数组下标方式(常用)
** JQueryObj[0]**
2、利用get方法：
** JqueryObj.get[0]**

<script type="text/javascript"> 
    $(function () { 
        var $div = $("#div");//JQuery操作节点，得到的是JQuery节点对象。Jquery对象一般用$开头来表示
        var div = document.getElementById("div"); //得到的DOM对象
        
        /*
            DOM对象转换成JQuery对象
            $(domObj)
         */
        var $div1 = $(div);
        
        /*
            JQuery对象用两种方式转变成DOM对象：
            1、利用数组下标方式
                JQueryObj[0]
            2、利用get方法：
                JqueryObj.get[0]
         */
        var domDiv1 = $div[0];
        var domDiv2 = $div.get(0);      
    }); 
</script>

四、JQuery选择器

1.ID选择器

<script type="text/javascript">
    $(function() {
        //通过id找到元素。注意返回的jquery对象
        var $box = $("#box");
    })
</script>

2.类选择器

<script type="text/javascript">     
  $(function() {
      var $link = $(".myLink");
      console.log($link);
})
</script>

3.标签名选择器

<script type="text/javascript">
    $(function() {
        //找到标签名为a的标签
        var $a = $('a');    
    })
</script>

4.群组选择器(并集)

<script type="text/javascript">
  $(function() {
      var $elements = $(".box,#toBaidu,h1");    //可以同时选中多个元素.不同的选择器用,隔开
      console.log($elements);
  })
 </script>

5.后代选择器

$(function () {
    var $as = $("p a"); //找到p标签下的所有a标签
    console.log($as);
})

6.通配符选择器

$(function() {
  var $all = $("*");    //获取当前文档中所有元素的
  console.log($all);
  alert($all.length);
})

五、JQuery高级选择器

1.后代选择器和find方法

jquery对象.find(选择器)：是jquery对象的方法，表示找到这个标签下的所有的指定的选择器的元素。

<script type="text/javascript">
            $(function () {
                var $allLi1 = $(".box li");
                console.log($allLi1);
                //找到 class是box的元素下面的所有的li标签元素
                var $allLi2 = $(".box").find("li"); // 效果等同于前面的后代选择器。
                console.log($allLi2);
            })
        </script>

2.子元素选择器和children方法

<script type="text/javascript">
    $(function () {
        var $divs = $(".box>div"); //子元素选择器
        console.log($divs);
        // 找到.box 元素下的所有直接子元素。只找儿子不找孙子。 和子元素选择器后果一样。
        // children方法也可以带参数，代表表示这个选择器选中的子标签
        var $children = $(".box").children(); 
        console.log($children);
        
        var $cc = $(".box").children(".item1");
        console.log($cc);   
    })
</script>

3.Next选择器( + )和next方法

<script type="text/javascript">
    $(function () {
        //next选择器其实就是兄弟选择器.
        //找到.box .item2 后的 是 .item3的紧挨着的下一个兄弟
        var $nextDiv1 = $(".box .item2 + .item3");
        console.log($nextDiv1);
        //同next选择器. 可以跟参数，也可以不跟参数。有参数 表示下一个兄弟必须满足这个条件,否则就拉到
        //不跟参数表示如果有下一个兄弟就返回，没有拉到
        var $nextDiv2 = $(".box .item2").next(".item3");
        console.log($nextDiv2);
    })
</script>

4.nextAll选择器( ~ )和nextAll方法

<script type="text/javascript">
    $(function () {
        //获取.item2的所有的同辈div标签  注意：不包括.item这个标签
        var $divs = $(".item2~div");
        console.log($divs);
        //也可以使用nextAll方法，效果同上。  可以不跟参数，表示后面的所有同辈元素
        var $divss = $(".item2").nextAll("div");
        console.log($divss);
    })

5.prev方法和prevAll方法

<script type="text/javascript">
    $(function () {
        //找到紧挨着这个的上一个同辈div元素。 如果不是div则拉到。 
        //也可以不给参数，表示返回上一个同辈元素
        var $prev = $(".item2").prev("div");
        console.log($prev);
        //获取.item5的所有的前面的同辈div元素。
        var $prevAll = $(".item5").prevAll("div");
        console.log($prevAll);
    })
</script>

6.sibling方法

<script type="text/javascript">
    $(function () {
        //sibling获取的是所有同辈标签
        var $sibling = $(".item2").siblings();
        console.log($sibling);
    })
</script>

7.属性选择器

<script type="text/javascript">
    $(function () {
        // 找到有id属性的所有元素
        var $ids1 = $("[id]");
        console.log($ids1);
        //找到.box的所有后代中有id属性的元素
        var $ids2 = $(".box [id]");
        console.log($ids2);
        
        //找到id等于id的元素
        var $ids3 = $("[id=id4]");
        console.log($ids3);
        //id不是box的都会被选中，没有id属性的也算进去
        var $ids4 = $("[id!=box]");
        console.log($ids4)
        // id属性以b开头的
        var $ids5 = $("[id^=b]");
        console.log($ids5)
        
        // id属性的值包含子字符串b的
        var $ids6 = $("[id*=b]");
        // 包换单词bb
        var boxs = $("[class~=bb]")
        console.log($ids6)      
    })

六、过滤选择器

1.基本过滤选择器

<script type="text/javascript">
    $(function() {
        //所有的div元素中的第一个div
        var $first = $("div:first");
        console.log($first);
        // 所有div元素中的最后一个div
        var $last = $("div:last");
        console.log($last);
        //所有div元素中，class不是box的div
        console.log($("div:not(.box)"));
        // 所有的div元素中，索引是偶数的div
        console.log($("div:even"));
        // 所有div元素中，索引是奇数的div
        console.log($("div:odd"));
        // 所有div元素中，索引是0的div
        console.log($("div:eq(0)"));  // equal
        // 所有的div元素中，索引大于0的div
        console.log($("div:gt(0)"));  // great than
        //所有的div元素中 索引小于3的div
        console.log($("div:lt(3)"));
        //获取所有的标题元素   h1 h2 ...
        console.log($(":header"));
        //获取当前取得焦点的元素
        console.log($(":focus"));
    })
</script>

2.内容过滤选择器

选择器 描述
:contains(text) 选取含有文本内容为text的元素
:empty 选取不包含子元素或文本的元素
:has(selector) 选择与指定的选择匹配的元素
:parent 选取含有子元素或文本的元素 
<script type="text/javascript">
    $(function() {
        //选取包含文本 "标签" 的div元素。 如果div的子元素满足，那么这个div也算。
        console.log($("div:contains(标签)"));
        //选取，没有子标签或文本的div元素
        console.log($("div:empty"));
        //选取有 后代 是.item2的div元素
        console.log($("div:has(.item2)"))
        // 选取有文本或子元素的所有元素。  也就是能当爹的元素
        console.log($(":parent"));
    })
</script>

3.可见性选择过滤器

选择器 描述
:hidden 选取所有不可见的元素。包括input的type属性是hidden，display是none。
:visible 选取所有可见的元素。如果一个元素的visibility是hidden也会被选中。 
javascript
<script type="text/javascript">
    $(function() {
        console.log($("div:visible"));
        console.log($("div:hidden"));
    })
</script>

4.子元素过滤选择器

选择器 描述
:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
:first-child 相当于nth-child(1)
:last-child 返回父元素的第一个子元素
:only-child 如果父类元素仅仅有一个子元素就返回 
<script type="text/javascript">
    $(function() {
        // 从p元素的父元素的所有子元素中查找。如果第2个元素是p，则返回这个p元素，如果不是p则不返回这个子元素
        console.log($("p:nth-child(2)"));
        //从p元素的父元素的所有子元素中查找。如果第一个元素是p则返回这个p元素。否则不返回
        console.log($("p:first-child"));
        console.log($("p:last-child"));
        console.log($("div:only-child"));
    });
</script>

七、表单选择器

​ 为了更加方便的操作表单，jquery专门添加的表单选择器

<script type="text/javascript">
    $(function() {
        //获取所有的input、button、select、textarea
        console.log($(":input"));
        //选取所有的单行文本框 (type=text)
        console.log($(":text"));
        console.log($(":password"));
        console.log($(":radio"));
        console.log($(":checkbox"));
        console.log($(":submit"));
        console.log($(":button"));      
    });
</script>
上一篇 下一篇

猜你喜欢

热点阅读