1、jQuery 介绍
什么是jQuery?
jQuery，顾名思义，也就是JjavaScript和查询(Query)，它就是辅助JavaScript开发的js类库。
jQuery核心思想! ! !
它的核心思想是write less, do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery流行程度
jQuery现在已经成为最流行的JavaScript 库，在世界前10000个访问最多的网站中，有超过55%在使用
jQuery。
jQuery好处! ! !
jQuery是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
2， jQuery核心函数
$ 是jQuery的核心函数，能完成jQuery的很多功能。
(
)
就
是
调
用
()就是调用
()就是调用这个函数
1、传入参数为[函数]时:
表示页面加载完成之后。相当于window.onload = function(){}
2、传入参数为[HTML 字符串]时:
会对我们创建这个html标签对象
3、传入参数为 [选择器字符串]时:
$("#id属性值");
id选择器，根据id查询标签对象
$(“标签名”);
标签名选择器，根据指定的标签名查询标签对象
S(".class属性值");类型选择器， 可以根据class属性查询标签对象
4、传入参数为 [DOM对象]时:
会把这个dom对象转换为jQuery对象
3、jQuery对象和dom对象区分
3.1、什么是jQuery对象，什么是dom对象
Dom对象
1.通过getElementByld(查询出来的标签对象是Dom对象
2.通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement()方法创建的对象,是Dom对象
5. Dom对象获取id
document.getElementById("testDiv")
jQuery对象
5.通过JQuery提供的API创建的对象,是JQuery对象
6.通过JQuery包装的Dom对象，也是JQuery对象
7.通过JQuery提供的API查询到的对象，是JQuery对象
jQuery对象获取id
$("#id")
3.2、问题: jQuery 对象的本质是什么?
jQuery对象是dom对象的数组+ jQuery提供的一系列功能函数
3.3、jQuery 对象和Dom对象使用区别
jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法
3.4、Dom对象和jQuery对象互转
3.4.1、dom对象转化为jQuery对象(*重点)
1、先有DOM对象
2、$( DOM对象)就可以转换成为jQuery 对象
3.4.2、jQuery 对象转为dom对象(*重点)
1、先有jQuery对象
2、jQuery对象下标]取出相应的
alert( $(document.getElementById("testDiv"))[0] );
4、jQuery选择器(*****重点)
4.1、基本选择器(*****重点)
#ID 选择器:根据id查找标签对象
.class 选择器:根据class查找标签对象
element：
选择器:根据标签名查找标签对象
选择器:表示任意的，所有的元素
selector1, selector2 组合选择器:合并选择器1,选择器2的结果并返回
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function () {
// css() 方法 可以设置和获取样式
$("#one").css("background-color","#bbffaa");
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function () {
$(".mini").css("background-color","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function () {
$("div").css("background-color","#bbffaa");
});
//4.选择所有的元素
$("#btn4").click(function () {
$("*").css("background-color","#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function () {
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
4.2、层级选择器(*****重点)
ancestor descendant
后代选择器
:在给定的祖先元素下匹配所有的后代元素
parent > child
子元素选择器:在给定的父元素下匹配所有的子元素
prev + next
相邻元素选择器:匹配所有紧接在prev 元素后的next 元素
prev ~ sibings
之后的兄弟元素选择器:匹配prev元素之后的所有siblings 元素
<script type="text/javascript">
$(document).ready(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
</script>
4.3、过滤选择器
基本过滤器:
:first
获取第一个元素
:last
获取最后个元素
:not(selector)
去除所有与给定选择器匹配的元素
:even
匹配所有索引值为偶数的元素，从0开始计数
:odd
匹配所有索引值为奇数的元素，从0开始计数
:eq(index)
匹配一一个给定索引值的元素
gt(index)
匹配所有大于给定索引值的元素
:t(index)
匹配所有小于给定索引值的元素
:header
匹配如h1, h2, h3之类的标题元素
:animated
匹配所有正在执行动画效果的元素
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(document).ready(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.选择最后一个 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.选择class不为 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.选择索引值为偶数的 div 元素
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.选择索引值为奇数的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.选择索引值为大于 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.选择索引值为等于 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.选择索引值为小于 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.选择所有的标题元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.选择当前正在执行动画的所有元素
$("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
//11.选择没有执行动画的最后一个div
$("#btn11").click(function(){
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
</script>
内容过滤器:
:contains(text)匹配包含给定文本的元素
:empty
匹配所有不包含子元素或者文本的空元素
:parent
匹配含有子元素或者文本的元素
:has(selector)
匹配含有选择器所匹配的元素的元素
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
/**
:contains(text)
:empty
:has(selector)
:parent
*/
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function(){
$("div:contains('di')").css("background", "#bbffaa");
});
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
$("div:has(.mini)").css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});
</script>
属性过滤器:
[attribute]
匹配包含给定属性的元素。
[attribute=value]
四配给定的属性是某个特定值的元素
[attribute! =value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value]
匹配给定的属性是以某些值开始的元素
[attribute$ =value]
匹配给定的属性是以某些值结尾的元素
[attribute* =value]
匹配给定的属性是以包含某些值的元素
[attrSel1 ][attrSel2][attrSelN]复合属性选择器, 需要同时满足多个条件时使用。
<script type="text/javascript">
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});
</script>
5、jQuery的属性操作
html()
它可以设置和获取起始标签和结束标签中的内容。
跟dom属性innerHTML一样。
text()
它可以设置和获取起始标签和结束标签中的文本。
跟dom属性innerText -样。
val()
它可以设置和获取表单项的value属性值.
跟dom属性value- -样
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// 不传参数，是获取，传递参数是设置
// alert( $("div").html() );// 获取
// $("div").html("<h1>我是div中的标题 1</h1>");// 设置
// 不传参数，是获取，传递参数是设置
// alert( $("div").text() ); // 获取
// $("div").text("<h1>我是div中的标题 1</h1>"); // 设置
// 不传参数，是获取，传递参数是设置
$("button").click(function () {
alert($("#username").val());//获取
$("#username").val("超级程序猿");// 设置
});
});
</script>
</head>
<body>
<div>我是div标签 <span>我是div中的span</span></div>
<input type="text" name="username" id="username" />
<button>操作输入框</button>
</body>
</html>
val方法同时设置多个表单项的选中状态:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
/*
// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
*/ $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
});
</script>
</head>
<body>
<body>
单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多选 ：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选 ：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</body>
</html>
6、 DOM的增删改
内部插入
appendTo() a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) 把a插到b所有子元素前面，成为第一个子元素
外部插入:
insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBefore(b) 得到ab
替换:
replaceWith() a.replaceWith(b) 用b替换掉a
replaceAll() a.replaceAll(b) 用a替换掉所有b
删除:
remove() a.remove(); 删除a标签
empty() a.empty(); 清空a标签里的内容
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
