jQuery_1

jQuery

1，概念：用js封装的一个库，方便使用

2，调用API方法

案例：如何使用和选择器及原生js和jQuery区别

<script src="jquery-1.11.1.js"></script><script>    //原生js    //        window.onload = function () {    //            var btn = document.getElementsByTagName("button")[0];    //            var divArr = document.getElementsByTagName("div");    //    //            btn.onclick = function () {    //                for(var i=0;i<divArr.length;i++){    //                    divArr[i].style.display = "block";    //                    divArr[i].innerHTML = "明日中秋！";    //                }    //            }    //        }    //jquery版    $(document).ready(function () {        //获取元素        var jQbtn = $("button");//根据标签名获取元素        var jQdiv = $("div");//根据标签名获取元素        //绑定事件        jQbtn.click(function () {            //事件驱动程序//                jQdiv.show(1000);//显示盒子。//                jQdiv.html("tomorrow中秋！");//设置内容            jQdiv.show(3000).html(1111);            //1.链式编程。  2.隐式迭代（方法内部无需再循环）。        });//事件绑定是通过方法绑定的。    });</script>

jQuery使用方法：

//1，引用包<script src="jquery-1.11.1.js"></script>$(document).ready(function(){//绑定事件及事件处理（通过方法实现）    //事件源.事件(function(){        //处理事件程序//});$("#demo").click(function(){alert(1);});});

关于jQuery入口函数作用：等待文档准备ok,再执行入口函数内的代码，操作dom

//入口函数$(document).ready(function(){//获取事件源并绑定事件    $("#demo").click(function(){alert(1)});});//入口函数简写$(function(){    $("#demo").click(function(){alert(1)});});

js入口函数：window.onload = function(){};

两者区别：
1）js入口函数只能出现一次，出现多次会存在事件覆盖；而jQuery可任意次
2）js需要所有文件资源加载完成后执行，而jQuery加载DOM后执行

关于$:$表示一个函数；根据参数进行不同的调用，返回jQuery对象

jQuery对象和DOM对象的相互转换：

1）DOM对象：js操作DOM返回的结果

//dom对象var btn = document.getElementById("demo");

2）jQuery对象：jQuery操作DOM返回的结果，把DOM对象进行封装，可以调用jQuery方法

//jQuery 对象var $(jBtn) = $("#demo");

即：手机－－dom对象；封装－－加上手机壳；手机＋手机壳－－jquery对象

转换：
1)DOM ——>>> jQuery:

var btn = document.getElementById("demo");var $btn1 = $(btn);//$(btn)就可以调用jquery的API$(document).ready(function(){});//这里就是把document这个dom对象封装成jquery对象，调用ready();

2)jQuery——>>>DOM

var btn2 = $btn[0];var btn3 = $btn.get(0);

常见jQuery选择器：

1，基础选择器：

1）ID选择器：$(“#IdName”).css(“color”,”red”);

2）类选择器：$(“.className”).css(“color”,”red”);

3）标签选择器：$(“eleName”).css(“color”,”red”);

2，层级选择器：

1）后代选择器：$(“#idName li”) : 选择idName的所有后代元素li

2）自带选择器：$(“#idName>ul>li”) ： 选择id为idName的元素的所有子元素ul的所有子元素li

3，基本过滤选择器：

1）:eq(index) : $(“li:eq(2)”).css(“color”, ”red”);选择li元素中索引号为2的一个元素

2）:odd : $(“li:odd”).css(“color”, “red”);选择li元素中索引号为奇数的所有元素

3）:even : $(“li:odd”).css(“color”, “red”);选择li元素中索引号为偶数的所有元素

4，筛选选择器（jq对象方法）：

符号 说明 用法 find(selector) 查找指定元素的所有后代元素（子子孙孙） $(“#j_wrap”).find(“li”).css(“color”, “red”)； children() 查找指定元素的直接子元素（亲儿子元素） $(“#j_wrap”).children(“ul”).css(“color”, “red”); siblings() 查找所有兄弟元素（不包括自己） $(“#j_liItem”).siblings().css(“color”, “red”); parent() 查找父元素（亲的） $(“#j_liItem”).parent(“ul”).css(“color”, “red”); eq(index) 查找指定元素的第index个元素，index是索引号，从0开始 $(“li”).eq(2).css(“color”, “red”);