【jQuery】
一、jQuery的定义
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
特点
- 快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
- 提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
- 创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
- 提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
- 增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
- 更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。
二、jQuery的对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
参考文档：http://jquery.cuishifeng.cn/
三、jQuery的选择器及筛选器
1、选择器
-
基本选择器
$("*") #通用选择器
$("#id") #id选择器
$(".class") #类选择器
$("p") #通用选择器
$(".class,p,div")
-
层级选择器
$(".outer div") #后代元素选择器，匹配所有属于outer元素后代的div元素
$(".outer>div") #子元素选择器，匹配所有outer元素的子元素div
$(".outer+div") #毗邻元素选择器，匹配所有紧随outer元素之后的同级元素div
$(".outer~div") #普通兄弟选择器
-
表单选择器
$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
2、筛选器
-
基本筛选器
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:ll(4)") 选择td元素中序号小于4的所有的td元素
-
属性筛选器
$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 $("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
- 内容筛选器
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
- 可视化筛选器
$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
-
表单筛选器
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
- 查找筛选器
查找子标签：
$("div").children(".test") #返回匹配元素集合中每个元素的所有子元素（仅儿子辈）
$("div").find(".test") #返回匹配元素集合中每个元素的后代 向下查找兄弟标签：
$(".test").next() #紧挨着$('')的一个元素
$(".test").nextAll() #在$('')以后的所有的同辈元素
$(".test").nextUntil() #until有直到。。。之前的意思，所以他表示$('')以后的所有的同辈元素，不过要在nextUntil参数之前，不包括匹配的元素本身 向上查找兄弟标签： $("div").prev() $("div").prevAll() $("div").prevUntil()
查找所有兄弟标签： $("div").siblings() 查找父标签： $(".test").parent() $(".test").parents() $(".test").parentUntil()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<p>p123</p>
<p class="item">p123</p>
<p class="item">p123</p>
<p id="p1">p123</p>
<div class="outer">
<div class="inner">
<div id="d1">DIV</div>
<p>p1</p>
</div>
<p>p2</p>
</div>
<div class="c1">
<div class="c2">
<ul class="num">
<li>111</li>
<li>222</li>
<li>333</li>
<li class="l4">444</li>
<li>555</li>
</ul>
</div>
</div>
<div hx="1000">hx is egg!</div>
<div hx="2000">hx is egg!</div>
<input type="text">
<input type="checkbox">
<script>
//============================== 直接查找标签
// 基本选择器
// ---标签的选择器
// $("p").css("color","red") ; // [ele1,ele2]
// --- class 选择器
//$(".item").css("color","red");
// --- id 选择器
// $("#p1").css("color","red")
// 层级选择器
//$(".outer p").css("color","red");
//$(".outer>p").css("color","red");
// 基本筛选器 :
// $(".num li:first").css("color","red");
// $(".num li:last").css("color","red");
//$(".num li:eq(2)").css("color","red");
// $(".num li:gt(3)").css("color","red");
//$(".num li:odd").css("color","red");
//$(".num li:even").css("color","red");
// 属性选择器
// $("[egon=1000]").css("color","red");
// 表单选择器: 针对表单标签
//$("[type='text']").css("border","1px solid red");
// $(":text").css("border","1px solid red");
// $(":checkbox").css("border","1px solid red");
// 筛选器
// var num=2;
//
// //$(".num li:eq(num)").css("color","red");
// $(".num li").eq(num).css("color","red");
// ======================================导航查找标签
// 找兄弟
// $(".num li").eq(1).next().css("color","red"); // 找下一个兄弟标签
// $(".num li").eq(1).nextAll().css("color","red") ; // 找下一个兄弟标签
// $(".num li").eq(0).nextUntil(".l4").css("color","red") ; // 找下一个兄弟标签
// 查找所有的兄弟标签
// $(".num li").eq(1).siblings().css("color","red")
// 找儿子
//$(".outer").children("p").css("color","red")
//$(".outer").find("p").css("color","red")
// 找父亲
// $(".l4").parent().css("color","red")
// $(".l4").parents().css("color","red")
// $(".l4").parentsUntil(".c1").css("color","red")
</script>
</body>
</html>
示例
四、jQuery的操作元素
1、事件
- 事件绑定
语法: 标签对象.事件(函数)
$("p").click(function(){})
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>111</p>
<p id="p1">222</p>
<p>333</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
// $().事件方法名(function(){ })
$("p").click(function () {
//console.log(this) // this 指的是当前事件触发的标签
// console.log($(this))
//alert(this); // Dom(标签)对象--------> $(dom)
alert($(this).html())
})
</script>
</body>
</html>
2、文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>DIV</p>
</div>
<button>click</button>
<p>PPP</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 文本取值
console.log($("div").text()); // 不识别标签，只取文本
console.log($("div").html()); // 识别标签
// 文本赋值
$("button").click(function () {
// 操作p标签
//$("div p").text("hello");
// $("div p").html("hello")
$("div").text("<a href=''>click</a>");
//$("div").html("<a href=''>click</a>");
})
</script>
</body>
</html>
3、class操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: rebeccapurple;
}
.c2{
background-color: gray;
}
.c3{
font-size: 32px;
}
</style>
</head>
<body>
<script src="jquery-3.2.1.min.js"></script>
<div class="c1 c2">DIV</div>
<script>
/*
$("div").addClass("c3")
r.fn.init [div.c1.c2.c3, prevObject: r.fn.init(1)]
$("div").addClass("c3")
r.fn.init [div.c1.c2.c3, prevObject: r.fn.init(1)]
$("div").removeClass("c1")
r.fn.init [div.c2.c3, prevObject: r.fn.init(1)]
$("div").removeClass("c2")
r.fn.init [div.c3, prevObject: r.fn.init(1)]
$("div").removeClass("c2")
r.fn.init [div.c3, prevObject: r.fn.init(1)]
$("div").removeClass("c1")
r.fn.init [div.c3, prevObject: r.fn.init(1)]
$("div").removeClass("c3")
r.fn.init [div, prevObject: r.fn.init(1)]
*/
</script>
</body>
</html>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left_menu{
width: 20%;
height: 600px;
background-color: darkgrey;
float: left;
}
.content{
width: 80%;
height: 600px;
background-color: cadetblue;
float: left;
}
.hide{
display: none;
}
.item{
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<div class="left_menu">
<div class="item">
<div class="title c1">菜单一</div>
<div class="con">
<p>111</p>
<p>111</p>
<p>111</p>
</div>
</div>
<div class="item">
<div class="title c2">菜单二</div>
<div class="con hide">
<p>222</p>
<p>222</p>
<p>222</p>
</div>
</div>
<div class="item">
<div class="title c3">菜单三</div>
<div class="con hide">
<p>333</p>
<p>333</p>
<p>333</p>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".title").click(function () {
// console.log($(this));
// 第一： 当前触发事件的标签的兄弟标签
//$(this).next().removeClass("hide");
//$(this).parent().siblings().children(".con").addClass("hide")
// 支持链式操作
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
})
</script>
</body>
</html>
左侧菜单
版权声明：本文为smallmars原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。