JQuery
JQuery
-
-
- JQuery
-
- 一、简介
- 二、导入
- 三、基本使用方式
- 四、选择器`[重点]`
-
- 4.1 基本选择器
- 4.2 层级选择器
- 4.3 常用基本选择器
- 4.4 内容、可见性、属性选择器
- 4.5 子元素、表单元素选择器
- 五、属性赋值、内容改变
-
- 5.1 属性赋值
- 5.2 内容改变
- 六、CSS操作
- 七、事件
- 八、效果
- 九、元素的添加和删除
- 十、筛选和遍历
- 十一、jQuery的让渡
- 十二、AJAX的使用
- 十三、省市级联案例
-
JQuery
一、简介
jQuery是一个封装JavaScript的第三方库。
特点：操作简单，功能强大，选择器丰富
[丰富]，插件库丰富，浏览器兼容性好。
二、导入
两种结构：
调试、开发时使用原版。（体积比较大、有注释，变量命名规范，函数明确，例如：jquery.1.11.1.js）。
产品时使用压缩版。（体积较小、没有注释，变量命名和代码较不规范。例如：jquery.1.11.1.min.js）
两种方式：
一、下载并引入
<script type="text/javascript" src="js/jquery-1.11.0.js" >script>二、引入其他网站提供的CDN（百度，新浪等）
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">script>
三、基本使用方式
$()
1、里面写匿名函数，表示页面加载时调用。例如：
$(function(){
alert();
});
2、里面写选择器名称，表示获取页面元素。例如：
$(“#btn1”).click(function(){
});
四、选择器[重点]
选择器的作用是用来查找页面元素。
4.1 基本选择器
id选择器：$(“#div1”)，相当于原生的document.getElementById(‘div1’);
元素选择器：$(“div”)，相当于原生的document.getElementsByTagName(‘div’);
类选择器：$(“.class1”)，相当于原生的document.getElementsByClassName(‘class1’);
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-2.1.0.js" >script>
head>
<body>
<div>AAAdiv>
<div>BBBdiv>
<div>CCCdiv>
<div>DDDdiv>
<div>EEEdiv>
body>
html>
<script>
$(function(){
$("div").css("color", "red");
});
script>
*：表示所有的元素。例如：$("*")select1,select2,selectN：组合，例如：$(“#div1, #span1, .class1, li”);
4.2 层级选择器
select1 select2：选择器1 空格 选择器2，选择器1中的所有的后代选择器2元素。
select1>select2：选择器1中的所有的儿子选择器2元素。
select1+select2：选择器1中的下一个紧挨的选择器2元素（兄弟）。
select1~select2：选择器1中的后面的选择器2元素（兄弟）。
4.3 常用基本选择器
通常来说带有:号的选择器一般会与其他选择器组合使用。
与下标相关：
:last,:first，:eq,:gt,:lt。例如：$(“li:first”)：得到所有的li中的第一个。
:not(select1)：取反。例如：
$(“li:not(:eq(2))”)：得到所有的li中下标不为2的
:even：偶数（下标为0，2，4…）
:odd：奇数（下标为1，3，5…）
例如：$(“tr:odd”)得到所有的奇数行。
案例：
1、实现全选/全不选功能，使用一个复选框方式
2、写一个表格，实现奇偶行变色。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<table>
<tr><td>Header 1td>tr>
<tr><td>Value 1td>tr>
<tr><td>Value 2td>tr>
<tr><td>Header 1td>tr>
<tr><td>Value 1td>tr>
<tr><td>Value 2td>tr>
<tr><td>Header 1td>tr>
<tr><td>Value 1td>tr>
<tr><td>Value 2td>tr>
table>
<input type="checkbox"/><br />
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
body>
html>
<script type="text/javascript" src="js/jquery-1.11.0.js" >script>
<script>
$(function(){
// 表格隔行变色
$("tr:odd").css("background-color", "#CCCCCC")
$("tr:even").css("background-color", "#6495ED")
// 全选全不选功能
$("input:first").click(function(){
$("input:gt(0)").prop("checked", $("input:first").prop("checked"));
})
})
script>
4.4 内容、可见性、属性选择器
内容相关：
:contains(text)：内容包含某字符串的元素。
:empty：内容为空的元素。
:parent：得到内容不为空的元素。
:has(select1)：内容包含另一个标签。例如：$(“div:has§”)，表示得到里面包含p元素的div元素。
可见性：
:hidden：得到隐藏元素。
:visible：得到可见元素。
属性相关：
所有的属性相关的选择器都需要使用[]。
[attr]：表示得到有某个属性的元素。例如：$(“div[id]”)：得到有id属性的所有div
[attr=v]、[attr!=v]、[attr^=v]、[attr$=v]、[attr*=v]、也可以一次写多种属性相关选择器。
例如：
$("input[id][name$=abc][value*=hello]")：得到所有的input包含id属性，name以abc结尾，value包含hello的元素。
4.5 子元素、表单元素选择器
子元素：
:first-child：得到组元素的第一个元素。与:first的区别在于，:first只会得到第一个元素，即使有多组，也只会当作一组，会得到第一组的第一个元素。而:first-child会得到每一组的第一个元素。
:last-child：得到组元素的最后一个元素。与:last的区别在于，:last只会得到最后一个元素，即使有多组，也只会当作一组，会得到最后一组的最后一个元素。而:last-child会得到每一组的最后一个元素。
:nth-child(n)：得到组元素的第几个元素，序号从1开始。如果有多组会每一组都得到第n个元素。与:eq(index)的区别：eq会将多组元素当成1组，下标从0开始，把多组的元素相加计算下标。
表单相关选择器：
由于表单元素不同的元素，可能都是以input作为标签的名称，所以如果通过标签名称来查找比较麻烦，jquery提供了一些便利的选择器以获取表单元素。
:input跟input类似，都能够获取所有的input标签。
:text、:password、:radio、:checkbox、:file、:image、:button、:reset、:submit、:hidden等便利的选择来获取表单元素。
表单元素的属性：
:checked：获取单选框、复选框中被选中的元素。
:selected：获取下拉框被选中的option
:enabled：获取可以使用的元素。
:disabled：获取不可使用的元素。
五、属性赋值、内容改变
5.1 属性赋值
attr()用来访问属性。包含get和set。
removeAttr(“name”)：删除属性。
例如：操作a链接：
//获取值
var h = $("a").attr("href");
//设置值：
$("a").attr("href", "https://www.baidu.com");
如果要操作一些特殊的属性，例如：checkbox中checked属性。
需要使用prop：
removeProp(“name”)：删除属性。
例如：
//获取值
var h = $(":checkbox").prop("checked");
//设置值：
$(":checkbox").prop("checked", true);
注意：
特殊属性操作：文本框的value属性操作。
例如：
//获取文本框的值
var v = $(":text").val();
// 设置文本框的值
$(":text").val("hello");
5.2 内容改变
html()：获取元素内容，或者改变元素内容。相当于innerHTML。
text()：获取元素文本内容，或者改变元素文本内容。相当于innerText。
例如：操作a链接中间的文字信息。
//获取文字信息
var h = $("a").text();
//设置文字信息：
$("a").text("百度");
六、CSS操作
class操作：
addClass(“className”)：添加class样式
removeClass(“className”)：移除class样式
直接操作css：
两种方式：
1、一个属性的操作，使用两个参数：例如：$(“div”).css(“color”, “red”);
2、一次操作多个属性,使用一个对象参数。例如：$(“div”).css({“color”:“red”, “border”:“1px solid red”});
一些特殊的样式，有单独操作方式：
例如高度、宽度设置：$(“div”).height(200);
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.myClass{
background-color: #ccc;
}
style>
<script type="text/javascript" src="js/jquery-2.1.0.js" >script>
head>
<body>
<div id="div1">
Hello
div>
body>
html>
<script>
$(function(){
$("#div1")
// 链式编程
.height(200).width(200) // 特殊属性设置了常规方法
.addClass("myClass") // 添加已经定义好的样式
.css({"border":"1px solid red", "margin":"20px auto"}) // 一次性设置多个样式
.css("color", "red"); // 设置一个样式
});
script>
七、事件
跟原生的事件名称相似，去掉on。例如：click、change、focus、blur等，给一个元素添加事件如下：
$("#btn1").click(function(){
alert('再点击一下');
});
八、效果
隐藏和显示
淡出和淡入
滑动
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-2.1.0.js" >script>
head>
<body>
<img src="img/11.jpg" />
<input type="button" id="btn1" value="隐藏" />
<input type="button" id="btn2" value="淡出"/>
<input type="button" id="btn3" value="收起"/>
body>
html>
<script>
$(function(){
$("#btn1").click(function(){
if($("#btn1").val() == "隐藏"){
$("img").hide(1000);
$("#btn1").val("显示");
}else{
$("img").show(1000);
$("#btn1").val("隐藏");
}
});
$("#btn2").click(function(){
if($("#btn2").val() == "淡出"){
$("img").fadeOut(2000);
$("#btn2").val("淡入");
}else{
$("img").fadeIn(2000);
$("#btn2").val("淡出");
}
});
$("#btn3").click(function(){
if($("#btn3").val() == "收起"){
$("img").slideUp(2000);
$("#btn3").val("打开");
}else{
$("img").slideDown(2000);
$("#btn3").val("收起");
}
});
});
script>
九、元素的添加和删除
添加元素：
append：给某个元素里面添加子元素，放到所有的子元素的最后。
prepend：给某个元素里面添加子元素，放到所有的子元素的最前。
after：给某个元素后面添加兄弟元素。
before：给某个元素前面添加兄弟元素。
删除元素：
empty()：清空子元素。
remove()：删除元素本身。
remove(select1)：删除元素满足select1选择器条件的元素。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<select id="citySelect">
<option value="">请选择option>
<option value="1">武汉option>
<option value="2">黄石option>
select>
<input type="button" value="删除" />
body>
html>
<script type="text/javascript" src="js/jquery-2.1.0.js" >script>
<script>
$(function(){
$(":button").click(function(){
$("#citySelect option").remove(":gt(0)"); // 删除除了请选择以外的option
});
});
script>
十、筛选和遍历
筛选：选择器只能静态获取元素，如果需要动态获取元素，则需要使用以下筛选函数。
first()、last()得到第一个或最后一个元素。
parent(exp)：得到经过里面的选择器筛选的父元素。
children(exp)：得到经过里面的选择器筛选的子元素。
siblings(exp)：得到经过里面的选择器筛选的兄弟（前后的）元素。
each()：遍历。
$(function(){
var arr = [10,20,30,40,50];
$.each(arr, function(index, obj) {
console.log(index) // 下标
console.log(obj) // 数组元素
});
})
注意：上面的
$.each看起来比较奇怪，实际上在jQuery框架中，核心变量名称为jQuery，只不过为了节省空间，另外定义了一个变量$,它的值就是jQuery。上面的$.each()相当于jQuery.each()。
十一、jQuery的让渡
当一个页面引入了多个js库，而这些库都使用
$作为变量名，那么就会出现冲突，此时可以使用jQuery来代替$。也可以自定义变量，此时，需要使用让渡。例如：
var jq = jQuery.noConflict();// 自定义jQuery的核心变量
jq(function(){
var arr = [10,20,30,40,50];
jq.each(arr, function(index, obj) {
console.log(index) // 下标
console.log(obj) // 数组元素
});
})
十二、AJAX的使用
在jQuery中，提供了多种AJAX写法。
常用的有三种：
1、发送get请求
$.get("url", {"username":"zhangsan"}, function(data){
// 回调代码
});
2、发送post请求，将上面的get改成post即可。
3、当发送的请求比较复杂时，可以采用相对复杂的封装方式：
$.ajax({
"type":"GET",
"data":{},
"url":"",
"contentType":"application/json",
"dataType":"json",
"success":function(){
},
"error":function(){
}
});