- 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编程步骤
- 引入jQuery
// 引人jQuery：使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
- 编写jQuery入口函数即页面加载事件
$(function(){}) // 多个$(function(){})中的代码都会执行，多个window.onload只会执行最后一个
- 使用选择器定位到需要操作的节点
var $obj = $("body"); // 一般情况下为了避免dom对象与jquery对象混淆，可以将jquery对象的变量名用加上$前缀 即$obj
注：$()即$函数，body：选择器（元素选择器）
- 调用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选择器
- 基本选择器
Id选择器： id=“d1” 调用方法 #d1
类/class选择器: class=“c1” 调用方法.c1
元素选择器： p 调用方法 p
- 基本过滤选择器
:first - 第一个
:last - 最后一个
:eq(index) - 指定索引的$("li:first").css("color","red"); // 第一个li $("li:last").css("color","lime"); $("li:eq(1)").css("color","gray"); // 索引为1的li
- 属性选择器
[属性名] - 有指定属性的
[属性名=“属性值”] - 有指定属性和属性值的$("li[id]").css("color","yellow"); // 设置li标签下属性名为id的对象 $("li[id='d2']").css("color","blue"); // 设置li标签下属性名为id=d2的对象
- 层次选择器
ul li选择<ul>里面的所有<li>元素；div > p选择所有直接子元素是<div>的<p>元素；h1 + p选择紧跟在<h1>元素后紧挨着的<p>元素； 就是跟h1同级的第一个标签
六、jQuery事件绑定/注册
- Js事件绑定/注册
- 直接绑定到元素中
<a href="javascript:void(0);" onclick="functionName();"/> // 点击后执行functionName()
- dom对象.事件
document.getElementById("id").onclick=function(){ //点击后执行function中的方法
//逻辑代码
}
- jQuery事件绑定/注册
- 绑定事件
$obj.事件名称(function(){ //obj就是可能是任意对象 一般都是通过选择器来找到需要绑定事件的元素
//逻辑代码
});
$obj.on("事件名称", function(){
//逻辑代码
});
$obj.bind("事件名称", function(){
//逻辑代码
});
- 取消事件
$obj.off("事件名称"); // 通常用于移除通过 on() 方法添加的事件处理程序。
$obj.unbind("事件名称"); // 移除被选元素的事件处理程序 当事件发生时终止指定函数的运行。
注意：如果取消事件时不写时间名称，表示取消所有事件
七、jQuery的DOM操作
- 文本操作
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.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 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，就是普通文本
});
})
});
