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”);