01-10jQuery框架

• jQuery框架

jQuery框架

概念：jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码。

特点：

(1) 具有独特的链式语法，可以把多个操作写在一行代码里，更加简洁

(2) 拥有大量的选择器，不仅有高效灵活的css选择器【id,类，元素】，并且可对CSS选择器进行扩展

(3) 拥有便捷的插件扩展机制和丰富的插件（树形菜单、日期控件、图片切换插件、弹出窗口等）

(4) jQuery兼容各种主流浏览器，兼容性更强

(5) 很多API都方法化了

jQuery的核心思想：（write less，do more）写得更少，做得更多

基础语法：$(selector).action()

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

一、与JS比较

    <script>
        //js中的页面加载事件：当整个页面加载完成(节点，样式，图片等)之后才会执行里面的代码
        window.onload = function(){
            alert(111);
        }
        window.onload = function(){
            alert(222);
        }
        //jQuery页面加载事件：加载时机是节点加载完成就执行了
        $().ready(function(){
            alert(333);
        })
        jQuery(function(){
            alert(444);
        });
        //执行顺序 333 - 444 - 222
        /*
            1.jQuery页面加载事件一定都会执行，而js中的页面加载事件只会执行最后一个 
            2.jQuery页面加载事件优先执行 (这个需要看版本)
        */

        /*
            以后页面中会引入多个前端框架：如果有2个前端框架都定义了$。
            你再页面中用$符号是哪一个框架的
        */
    </script>

二、jQuery版本介绍

jQuery是一个js框架，代码本质上就是js代码，使用时需要引入jQuery.js 注意需要先导包 ！！！

// 引人jQuery：使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>

三、 jQuery编程步骤

1. 引入jQuery

// 引人jQuery：使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>

2. 编写jQuery入口函数即页面加载事件

$(function(){})       // 多个$(function(){})中的代码都会执行，多个window.onload只会执行最后一个

3. 使用选择器定位到需要操作的节点

var $obj = $("body"); // 一般情况下为了避免dom对象与jquery对象混淆，可以将jquery对象的变量名用加上$前缀  即$obj 
注：$()即$函数，body：选择器（元素选择器）

4. 调用jQuery的API进行后续操作

四、DOM对象与jQuery对象转换

• DOM对象

getElementById()

getElementsByName()

getElementsByTagName()

window对象，document对象

parentNode获取的对象

即我们用传统的方法（javascript）获得的节点对象

• jQeury对象

通过选择器和$函数获取的节点对象。实质就是通过jQuery包装DOM对象后产生的对象

• 将Dom对象转换成jquery对象

$(dom对象)
例如：var $obj = $(obj);

//------------------------------------------------------------
<div id="d1">易烊千玺</div>
var div1 = document.getElementById("d1");    //jQuery对象相当于对dom对象的封装，可以看成将dom对象的数组
//dom对象 转换成 jQuery对象 
var $div2 = $(div1);   // $(dom对象)
$div2.css("color","red"); // 调用jQuery方法设置样式

• 将jQuery对象转换成dom对象：

var obj = $obj.get(0); 
var obj = $obj[0,1,2...];

//------------------------------------------------------------
var $div = $("div"); // 获取jQuery对象
//jQuery对象 转换成 dom对象
var div1 = $div[0]     // 或者使用  $div.get(0)来获取对象 
div1.style.backgroundColor = "pink"; // 此时div1是通过下标获取到的，jQuery对象将dom对象放进了一个数组里面

注：dom对象与jQuery对象的方法和属性不能混淆，jQuery对象不能调用dom对象的属性和方法

五、jQuery选择器

1. 基本选择器

Id选择器： id="d1" 调用方法 #d1

类/class选择器: class="c1" 调用方法.c1

元素选择器： p 调用方法 p

2. 基本过滤选择器

:first - 第一个

:last - 最后一个

:eq(index) - 指定索引的

$("li:first").css("color","red"); // 第一个li
$("li:last").css("color","lime");
$("li:eq(1)").css("color","gray"); // 索引为1的li

3. 属性选择器

属性名 - 有指定属性的

属性名="属性值" - 有指定属性和属性值的

 $("li[id]").css("color","yellow"); // 设置li标签下属性名为id的对象
 $("li[id='d2']").css("color","blue"); // 设置li标签下属性名为id=d2的对象

4. 层次选择器

• ul li 选择<ul>里面的所有<li>元素；
• div > p 选择所有直接子元素是<div>的<p>元素；
• h1 + p 选择紧跟在<h1>元素后紧挨着的<p>元素； 就是跟h1同级的第一个标签

六、jQuery事件绑定/注册

1. Js事件绑定/注册

• 直接绑定到元素中

<a href="javascript:void(0);" onclick="functionName();"/> // 点击后执行functionName()

• dom对象.事件

document.getElementById("id").onclick=function(){  //点击后执行function中的方法
    //逻辑代码
}

2. jQuery事件绑定/注册

• 绑定事件

$obj.事件名称(function(){  //obj就是可能是任意对象  一般都是通过选择器来找到需要绑定事件的元素
	//逻辑代码
});
$obj.on("事件名称", function(){
	//逻辑代码
});
$obj.bind("事件名称", function(){
	//逻辑代码
});

• 取消事件

$obj.off("事件名称");    // 通常用于移除通过 on() 方法添加的事件处理程序。
$obj.unbind("事件名称");   // 移除被选元素的事件处理程序  当事件发生时终止指定函数的运行。
注意：如果取消事件时不写时间名称，表示取消所有事件

七、jQuery的DOM操作

1. 文本操作

1.1 API

html()： 设置或者获取双标签中的的html文本

text()：设置或者获取双标签中的纯文本

val()：设置和获取有value属性的标签的value属性值

有value属性值的元素【大多数单标签都有】：input【按钮，文本框等】、select中option等

没有value属性值的元素【大多数双标签没有】：div、hn、span、a、p等

// 需求：当鼠标进入div显示红色的"有敌军潜入"，鼠标移开div还原

<div style="height: 150px;width: 150px;background-color: green" id="d1"></div>
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#d1").mouseover(function(){
			$(this).html("<span style='color:red'>有敌军潜入</span>");
		});
			
		$("#d1").mouseout(function(){
			$(this).text("");
		});
	});
</script>

2. 属性和样式操作

2.1 API

操作样式：css()，addClass()，removeClass()

.css() // 直接设置样式 
.css("width",200).css("height",300)

.addClass() // 向第一个 <p> 元素添加一个类名 这样就方便在head里面设置样式，然后通过类名设置样式，这样可以解决.多个css，防止记不住属性名
$("button").click(function(){
    $("p:first").addClass("intro");
});

.removeClass() // 从所有的 <p> 元素移除 "intro" 类：
$("button").click(function(){
    $("p").removeClass("intro");
});

操作属性：

attr()：操作【设置或获取】非boolean属性值的属性

prop()：操作【设置或获取】boolean属性值的属性（checked单选框复选框，selected下拉框）

data()：h5出的API，可以自定义属性data-属性名="属性值"，然后用data("属性名")获取可以自动转换。一般用于传递数据

注意：要自动转换的话属性值必须是标准格式就是双引号，不能使用单引号

removeAttr()：移除指定属性值

// 需求：鼠标移动到元素上改变背景颜色，点击改变属性和样式

<a href="javascript:;">File</a>
<a href="javascript:;">Edit</a> 
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		var $as = $("a");//jQuery对象
		for(var i = 0 ; i < $as.length ; i++){
			var a = $as[i];//dom对象
			//$(a)  将dom对象转换成jQuery对象，才能使用方法
			$(a).mouseover(function(){
				$(this).css('backgroundColor','skyblue');
			});
			$(a).mouseout(function(){
				$(this).css('backgroundColor','white');
			});
			$(a).click(function(){
				alert("当前元素的跳转地址为：" + $(this).attr('href'));
				$(this).addClass('c1');
			});
		}
	});
</script>

2.2 data()与其他API区别

概念：自定义数据属性，也就是data-自定义属性。

注意事项：

(1) 使用data获取属性值 有个前提，属性名必须是data-xxx。使用data()获取属性 的语法格式：jQuery对象.data("xxx")

(2) 使用attr()获取属性的语法格式：jquery对象.attr("属性名")

<input type="text" id="d1" 

		data-person='{"id":1,"name":"tom","address":"四川成都"}'  // 自动将json格式的字符串转换成json对象
		data-name="赵子龙" 
		data-age="22" 
		data-sex="true" />
            
<script type="text/javascript">
    $(function(){
        console.log($('#d1').attr('data-person'));//获取出来都是字符串
        console.log($('#d1').attr('data-name'));//获取出来都是字符串
        console.log($('#d1').attr('data-age'));//获取出来都是字符串
        console.log($('#d1').attr('data-sex'));//获取出来都是字符串
        console.log("====================================");
        //获取出来出来的值，会自动转换成相应的类型。能转就转，不能转就以字符串的形式存在
        console.log($('#d1').data('person'));
        console.log($('#d1').data('name'));
        console.log($('#d1').data('age'));
        console.log($('#d1').data('sex'));
    });
</script>

3. 元素操作

3.3 API

追加：append()

删除：remove()，删除会将当前元素和里面的所有内容删除掉

清空：empty()，清空会保留当前元素

JSON

概念：JSON 是用于存储和传输数据的格式。 通常用于服务端向网页传递数据 。

• JSON 是一种轻量级的数据交换格式。
• JSON是独立的语言。
• JSON 易于理解。

// json对象
           var obj1 = {"id":1,"name":"jack","age":20}
           //alert(obj1.name);
           var obj2 = {"id":1,"name":"jack","address":{"street":"陕西街","no":"125号"}}
          // alert(obj2.address.street);
           var obj3 = [{"id":1,"name":"jack","age":20},{"id":2,"name":"tom","age":30}]
           //alert(obj3[1].name);

           //json格式的字符串
           var str = ' {"id":1,"name":"jack","age":20}';
           //转json对象：要求必须是标准格式 -   也就是外面是单引号，里面属性是双引号,数字不用
           alert(JSON.parse(str).name);

           //data-*是html5出来的属性，为了传递数据 - 自动将json格式的字符串转成json对象
           //1.申明的时候必须用data-*  2.获取的时候：data(*)
           console.log($("div").data("obj"));

八、 jQuery遍历

场景：例如有多个input按钮，获取每个按钮的value值

第一种：传统的遍历方式

var $obj = $("input:button");
for(var i = 0 ; i < $obj.length ; i++){
    alert($($obj[i]).val());//注意$obj[i]是一个dom对象
}

第二种：jQuery提供的each函数

//$obj：jquery集合对象，index遍历元素的下标（从0开始），obj表示每一个节点
$obj.each(function(this){  // this表示每个对象
	alert($(this).val());
});

九、 jQuery发异步请求

方法1：

<input type="button" value="添加数据"/>
$(function(){
     $("input").click(function(){
	 $.get("url",data,callback,type);
	 $.get(
     "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",
     {"name":'tom'},
     function(data){
         console.log(data);
     },
     "json"
 )

方法2：

$(function(){
    $("input").click(function(){
		$.ajax({
           url: "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",                  //请求地址
           type: "GET",                       //请求方式
           data: "eid=1&ename=tom",         //请求参数：格式1：key=value  格式2：json格式
           success: function (result) {    //请求成功后的回调函数，result是服务器返回的数据  
           console.log(result);
           },
           dataType: "json"                 //如果是json，服务器返回值就是json对象，直接使用
           //如果不指定dataType，就是普通文本
          });
      })
});