jQuery第一天

关于jQuery的几个特征

1. jq不需要遍历, 具有隐式迭代的特性
2. 找节点非常简单粗暴
3. 封装很多兼容性代码, 使用jquery可以暂且不用考虑兼容问题
4. 实现动画非常简单
5. 事件不会覆盖

jQuery的加载函数

 //  jquery : 强大的common.js
        // console.log( $);  //函数体
        // console.log(jQuery);  //函数体

        //console.log($ === jQuery); //true

        //js的加载函数
        window.onload = function () {
            console.log("js的加载函数");

        }

        //jq的加载函数的标准写法
        // 表示的是该文档已经准备好了, 可以执行当前ready中的函数了
        $(document).ready(function () {
            console.log("jq的加载函数")
        });

        //jq简写
        jQuery(function () {
            console.log("jq的加载函数的简写");
        });


        console.log("111");

        /*
        * 区别:
        * 1. jq的加载函数比js的加载函数快
        * 2. jq的加在函数只会等待页面加载完毕之后执行, 不会等待图片
        *    js的加在函数只会等待页面加载完毕之后执行, 会等待图片
        *
        *
        *
        * */

js和jquery的区别

<script src="js/jquery-1.12.4.js"></script>
    <script>

        $(function () {

            //1. 什么是js(dom)对象?-->用js的方式获取的元素就是js对象, 单个dom
            var li = document.getElementsByTagName("li");
            li[0].innerText = "ok";
            console.log(li);


            //2. 什么是jquery对象?-->用jq的方式获取的元素就是jq对象
            //  jq对象是一个伪数组, 本质是对象, 有多个dom对象的集合
            var $uu = $("#box");// 传选择器
            console.log($uu);

            var $li = $("li");
            console.log($li instanceof Array); //false
            console.log($li instanceof Object); //true
            //设置文本
            $li.text("jq来设置的文本");


            //3.js和jq的区别
            //①  js对象代表的是一个对象, jq对象代表的是一组对象, 所有对象的集合
            //②  js和jq的属性和方法不能互相调用

            //问题 : jq能调用js的属性/方法吗?
            //$li.innerText = "调用, 可以吗";  //不能

            //问题 : js能调用jq的属性/方法吗?
            // li.text("可以调用吗"); //不能


            //4.js想调用jq的方法 : 需要转化为jquery对象 --> 给钱就行  $(li)
            console.log($(li));
            $(li).text("给了钱的js这个vip");


            //5. jq想调用js的方法: 必须要转换为js对象 方法一 : 加索引    方法二 :  jq对象.get(0)
            console.log($li[0]);
            $li[0].innerText = "加完索引的jq";

            //6.js和jq的联系 : jquery是多个js的集合



        });

       $(document).ready(function () {

       })



    </script>

jQuery选择器

基本选择器

  名称   	用法                	描述                    
  ID选择器	$(“#id”);         	获取指定ID的元素             
  类选择器 	$(“.class”);      	获取同一类class的元素         
  标签选择器	$(“div”);         	获取同一类标签的所有元素          
  并集选择器	$(“div,p,li”);    	使用逗号分隔，只要符合条件之一就可。    
  交集选择器	$(“div.redClass”);	获取class为redClass的div元素

<div class="redClass"></div>

总结：跟css的选择器用法一模一样。



层级选择器

  名称   	用法         	描述                             
  子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 
  后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等



跟CSS的选择器一模一样。

过滤选择器

这类选择器都带冒号:

  名称        	用法                                	描述                                
  :eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
  :odd      	$(“li:odd”).css(“color”, ”red”);  	获取到的li元素中，选择索引号为奇数的元素             
  :even     	$(“li:even”).css(“color”, ”red”); 	获取到的li元素中，选择索引号为偶数的元素             

【案例：隔行变色】

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

  名称                	用法                         	描述                        
  children(selector)	$(“ul”).children(“li”)     	相当于$(“ul>li”)，子类选择器       
  find(selector)    	$(“ul”).find(“li”);        	相当于$(“ul li”),后代选择器       
  siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。           
  parent()          	$(“#first”).parent();      	查找父亲                      
  eq(index)         	$(“li”).eq(2);             	相当于$(“li:eq(2)”),index从0开始
  next()            	$(“li”).next()             	找下一个兄弟                    
  prev()            	$(“li”).prev()             	找上一次兄弟