jQuery入门
jQuery
jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码。我们首先来看看jquery的核心特点：
(1) 具有独特的链式语法，可以把多个操作写在一行代码里，更加简洁
(2) 拥有大量的选择器，不仅有高效灵活的css选择器【id,类，元素】，并且可对CSS选择器进行扩展
(3) 拥有便捷的插件扩展机制和丰富的插件（树形菜单、日期控件、图片切换插件、弹出窗口等）
(4) 这个就厉害了，jQuery兼容各种主流浏览器，包括互联网十大垃圾之一IE6.
(5) 很多API都方法化了
jQuery的核心思想：（write less，do more）写得更少，做得更多
引入jQuery
<script src="./dist/js/jQuery.js"></script>
- 编写jQuery入口函数即页面加载事件
1.jQuery页面加载事件都会执行，而js中的页面加载事件只会执行最后一个(多个$(function(){})中的代码都会执行，多个window.onload只会执行最后一个)
2.jQuery页面加载事件优先执行($(function(){})比window.onload加载快)
注意：jQuery3.x的不一定比window.onload加载快
<script>
//js中的页面加载事件：当整个页面加载完成(节点，样式，图片等)之后才会执行里面的代码
window.onload = function(){
alert(111);
}
window.onload = function(){
alert(222);
}
//jQuery页面加载事件：加载时机是节点加载完成就执行了
$().ready(function(){
alert(333);
})
jQuery(function(){
alert(444);
});
//333 - 444 - 222
</script>
jQuery===$
在Js中，=先比较类型，再比较值，而jQuery= 返回值为 t r u e 。所以使用 返回值为true。所以使用 返回值为true。所以使用的地方就可以使用jQuery，但是必须jQuery严格区分大小写，写成jquery都不行
之所以这样做得原因是因为其他的js框架也可能使用$符号，那么这时就可以使用jQuery来区分
DOM对象与jQuery对象转换
-
dom对象: 用js代码获取的对象就是dom对象：通过id，class,标签名等，this,window- dom对象
-
jQuery对象: 通过 ( ) 和选择器获取的对象就是 j Q u e r y 对象（通过选择器和 ()和选择器获取的对象就是jQuery对象（通过选择器和 ()和选择器获取的对象就是jQuery对象（通过选择器和函数获取的节点对象。实质是通过jQuery包装DOM对象后产生的对象）
建议：jQuery对象接收的时候变量名前加上$符号
注意：1. dom对象不能调用jQuery对象的api2. jQuery对象也不能调用dom对象的api -
将Dom对象转换成jquery对象：
$(dom对象)
例如：var $obj = $(obj);
- 将jQuery对象转换成dom对象：
var obj = $obj.get(0);
var obj = $obj[0,1,2...];
注：dom对象与jQuery对象的方法和属性不能混淆，jQuery对象不能调用dom对象的属性和方法
<body>
<div id="d1">易烊千玺div>
<script>
$(function(){
//jQuery对象相当于对dom对象的封装，可以看成将dom对象的数组
var div = document.getElementById("d1");
//dom对象 - jQuery对象
var $div1 = $(div);
$div1.css("color","red");
//$div1.style.color = "red"; //jQuery对象不能调用dom对象的API
var $div = $("div"); //[dom对象1]
//jQuery对象 - dom对象
var div1 = $div[0]// = $div.get(0)
div1.style.backgroundColor = "pink";
});
script>
body>
jQuery选择器
-
基本选择器
Id选择器： id="d1" #d1 类/class选择器: class="c1" .c1 元素选择器： p p *选择器： 代表所有/一般不使用 选择器分组/分组选择器：#d1,.c1,p -
基本过滤选择器
:first - 第一个 :last - 最后一个 :eq(index) - 指定索引的 -
属性选择器
[属性名] - 有指定属性的 [属性名="属性值"] - 有指定属性和属性值的 -
层次选择器 - 空格（略）
-
等等（都和js的选择器差不多）
<body>
<ul>
<li>张三丰li>
<li>张三丰li>
<li>张三丰li>
<li id="d1">张三丰li>
<li>张三丰li>
<li id="d2">张三丰li>
<li>张三丰li>
<li>张三丰li>
ul>
<script>
$(function(){
//ul下所有的li
$("ul li").css("background-color","gold");
//第一个li
$("li:first").css("color","red");
//最后一个li
$("li:last").css("color","lime");
//下标为1的li
$("li:eq(1)").css("color","gray");
//有id属性的li
$("li[id]").css("color","yellow");
//有id=d2的li
$("li[id='d2']").css("color","blue");
});
script>
body>
jQuery事件绑定/注册
- 绑定事件
// 主要用第一种，简单
$obj.事件名称(function(){
//逻辑代码
});
$obj.on("事件名称", function(){
//逻辑代码
});
$obj.bind("事件名称", function(){
//逻辑代码
});
- 取消事件
$obj.off("事件名称");
$obj.unbind("事件名称");
注意：如果取消事件时不写时间名称，表示取消所有事件
<body>
<div style="height: 200px;width: 200px;background-color: aqua;">
王天霸
div>
<script>
$(function(){
//绑定事件
$("div").click(function(){
//alert(this.innerHTML);
//this是dom对象 - 点的是哪一个对象就是谁
alert($(this).text());
})
//绑定鼠标移入事件
$("div").on("mouseover",function(){
$(this).css("background-color","yellow");
})
//绑定鼠标移出事件
$("div").bind("mouseout",function(){
$(this).css("background-color","aqua");
})
//取消事件
//$("div").off('click');
//$("div").unbind('mouseout');
$("div").off();//取消所有事件
});
script>
body>
jQuery操作内容和样式
-
文本操作
- API
html()： 设置或者获取双标签中的的html文本 text()：设置或者获取双标签中的纯文本 val()：设置和获取有value属性的标签的value属性值 有value属性值的元素【大多数单标签都有】：input【按钮，文本框等】、select中option等 没有value属性值的元素【大多数双标签没有】：div、hn、span、a、p等 -
属性和样式操作
- API
操作样式：css()，addClass()，removeClass() 操作属性： attr()：操作【设置或获取】非boolean属性值的属性 prop()：操作【设置或获取】boolean属性值的属性（checked单选框复选框，selected下拉框） data()：h5出的API，可以自定义属性data-属性名="属性值"，然后用data("属性名")获取可以自动转换。一般用于传递数据 注意：要自动转换的话属性值必须是标准格式就是双引号，不能使用单引号 removeAttr()：移除指定属性值
<style>
.c1{
width: 100px;
height: 100px;
background-color: blueviolet;
border-radius: 50px;
font-size: 40px;
text-align: center;
line-height: 100px;
}
style>
head>
<body>
<div>
<marquee>marquee>
div>
<input value="tom"/>
<script>
$(function(){
console.log($("div").html()); //获取html文本
$("div").html("马");//设置html文本
console.log($("input").val());//获取value属性值
$("input").val("jack");//设置value属性值
//$("div").css("width","100px").css("height","100px").css("backgroundColor","gray");
$("div").addClass("c1");
});
script>
body>
<body>
性别：
<label><input type="radio" value="f" name="sex" checked> 男label>
<label><input type="radio" value="m" name="sex"> 女label>
<hr/>
爱好：
<label><input type="checkbox" value="zq" name="hobby" checked> 足球label>
<label><input type="checkbox" value="lq" name="hobby"> 篮球label>
<label><input type="checkbox" value="ymq" name="hobby"> 羽毛球label>
<hr/>
学科：
<select>
<option>javaoption>
<option selected>uioption>
<option>h5option>
select>
<script>
$(function(){
//type=radio的input - 最后一个
$("input[type='radio']:last").prop("checked",true);
//$("input[type='radio']:first").prop("checked",false);
$("option:last").prop("selected",true);
alert($("input:first").attr("name"));
});
script>
body>
json格式的数据：data()
在jQuery里面获取属性有两种：attr()，prop()，data()
HTML5增加了一项新功能是：自定义数据属性，也就是data-自定义属性。获取值的时候：
(1) 使用data获取属性值有个前提，属性名必须是data-xxx。使用data()获取属性的语法格式：jQuery对象.data("xxx")
(2) 使用attr()获取属性的语法格式：jquery对象.attr("属性名")
<body>
<div data-obj="{'id':1,'name':'jack','age':20}">
<h1>11h1>
sdd
div>
<script>
$(function(){
//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"));
});
script>
body>
元素操作
-
API
追加：append() 删除：remove()，删除会将当前元素和里面的所有内容删除掉 清空：empty()，清空会保留当前元素
案例1：checkbox.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
<script type="text/javascript" src="./dist/js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
$("#checkAll").click(function(){ //全选
$("input[name='hobbies']").prop("checked",true);
})
$("#checkNotAll").click(function(){ //全不选
$("input[name='hobbies']").prop("checked",false);
})
//单击取反的时候
$("#checkUnAll").click(function(){
//将name=hobbies的所有input进行遍历
// $("input[name='hobbies']").each(function(){
// //获取每一个对象的checked属性值：true，false
// var oldState = $(this).prop("checked");
// //取反之后再设置回去
// $(this).prop("checked",!oldState);
// })
var $arr = $("input[name='hobbies']");
alert($arr.length);
for(var i = 0;i<$arr.length;i++){
var dom = $arr[i];
var oldState = $(dom).prop("checked");
$(dom).prop("checked",!oldState);
}
})
$("input:last").change(function(){
//获取自己的状态
var myself = $(this).prop("checked");
//把自己的状态 设置给 checkbox
$("input[name='hobbies']").prop("checked",myself);
})
});
//闭包
function checkChange(t){
//获取自己的状态
var myself = $(t).prop("checked");
//把自己的状态 设置给 checkbox
$("input[name='hobbies']").prop("checked",myself);
}
</script>
</head>
<body>
<h3>请选择你的爱好:</h3>
<div>
<input type="checkbox" name="hobbies"/>打篮球
<input type="checkbox" name="hobbies"/>踢足球
<input type="checkbox" name="hobbies"/>上网
</div>
<hr/>
<div>
<input type="button" id="checkAll" value="全选"/>
<input type="button" id="checkNotAll" value="全不选"/>
<input type="button" id="checkUnAll" value="反选"/>
<hr/>
<input type="checkbox" onchange="checkChange(this)" id="d1"/>
<label for="d1">全选/全不选</label>
</div>
</body>
案例2：user.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户新增title>
<script language="javascript" src="./dist/js/jquery-1.11.2.js">script>
<script language="javascript">
$(function(){
//提交添加数据
$("#btn_submit").click(function(){
//获取输入框的value属性值
var username = $("#username").val();
var email = $("#email").val();
var tel = $("#tel").val();
//拼接4个td
var td1 = ""+username+" ";
var td2 = ""+email+" ";
var td3 = ""+tel+" ";
var td4 = 'jQuery遍历
- 第一种：传统的遍历方式
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){
alert($(this).val());
});
jQuery遍历案例代码请参照元素操作案例1的代码
jQuery发异步请求
-
方式一
<script> // get传输方式 $.get("url",data,callback,type); // post传输方式 $.post("url",data,callback,type); </script> -
方式二
$.ajax({ url: "emp/list", //请求地址 type: "GET", //请求方式 data: "eid=1&ename=tom", //请求参数：格式1：key=value 格式2：json格式 success: function (result) { //请求成功后的回调函数，result是服务器返回的数据 }, async: true, //默认异步，可以不写，写成false，就是同步操作 dataType: "json" //如果是json，服务器返回值就是json对象，直接使用 //如果不指定dataType，就是普通文本 }); -
FastMock+jQuery案例案例:
<script> $(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" // ) $.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，就是普通文本 }); }) }); </script>