这篇博客介绍了jQuery的基本概念和核心思想，强调了其在JavaScript开发中的广泛使用。内容包括jQuery的初体验，核心函数的示例，以及jQuery对象与DOM对象的区别和互转方法。重点讲解了jQuery的选择器，如基本选择器、层级选择器、过滤选择器及其应用实践。
1、jQuery 介绍
什么是 jQuery ?
jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。
jQuery 核心思想！！！
它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用
jQuery。
jQuery 好处！！！
jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、
制作动画效果、事件处理、使用 Ajax 以及其他功能
2、jQuery 的初体验！！！
需求：使用 jQuery 给一个按钮绑定单击事件?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
window.onload = function () {
//使用原生JavaScript
// var btnObj = document.getElementById("btnId");
// // alert(btnObj);//[object HTMLButtonElement] --dom对象
// btnObj.onclick = function () {
// alert("js原生的单击事件");
// }
// alert($);
//使用jQuery
$(function () {
//表示页面加载完成之后，相当于onload事件 window.onload = function(){}
var $btnObj = $("#btnId");//表示按id查询标签对象
$btnObj.click(function () {
//绑定单击事件
alert("jQuery的单击事件");
})
});
}
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
常见问题
1、使用 jQuery 一定要引入 jQuery 库吗？
答案： 是，必须
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
2、jQuery 中的$到底是什么？
答案： 它是一个函数
3、怎么为按钮添加点击响应函数的？
1、使用 jQuery 查询到标签对象
2、使用标签对象.click( function(){}
3、jQuery 核心函数
$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数
1、传入参数为 [ 函数 ] 时：
表示页面加载完成之后。相当于 window.onload = function(){
}
2、传入参数为 [ HTML 字符串 ] 时：
会对我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
4、传入参数为 [ DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象
举例如下：
-
传入函数
$(function () { //$()传入函数 alert("页面加载完成之后自动调用");//运行浏览器解读完自动触发 });
-
传入参数为html字符串
$(function () { $("<div>\n" + //传入参数为 [ HTML 字符串 ] " <span>div-span1</span>\n" + " <span>div-span2</span>\n" + " </div>").appendTo("body"); });
-
传入参数为标签对象（选择器字符串）
//在body中新建三个button标签 $(function () { //传入标签对象 alert($("button").length);//3 }); -
传入参数为dom对象
$(function () { //传入dom对象 alert($(document.getElementById("btn01")));//[object Object] });
4、jQuery 对象和 dom 对象区分
什么是 jQuery 对象，什么是 dom 对象
- Dom 对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象 2.通过 getElementsByName()查询出来的标签对象是 Dom 对象 3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象 4.通过 createElement() 方法创建的对象，是 Dom 对象 DOM 对象 alert 出来的效果是：[object HTML 标签名 Element] - jQuery 对象
5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象 6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象 7.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象 jQuery 对象 alert 出来的效果是：[object Object]
问题：jQuery 对象的本质是什么？
jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
jQuery 对象和 Dom 对象使用区别
jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法
document.getElementById("testDiv").innerHTML = "这是一个DOM对象的属性innerHTML";
//$("#textDiv").innerHTML = "这是一个DOM对象的属性innerHTML";//不能使用
$("#textDiv").click(function () {
alert("click是JQuery对象的一个方法");
});
//document.getElementById("testDiv").click(function () {
// alert("click是JQuery对象的一个方法");
//});//不能使用
Dom 对象和 jQuery 对象互转
- dom 对象转化为 jQuery 对象（*重点）
- 先有 DOM 对象
- $( DOM 对象 ) 就可以转换成为 jQuery 对象
alert($(document.getElementById("testDiv")));//[object Object]
-
jQuery 对象转为 dom 对象（*重点）
- 先有 jQuery 对象
- jQuery 对象[下标]取出相应的 DOM
alert($(document.getElementById("testDiv"))[0]);//[object HTMLDivElement]
JQuery 的选择器（重点）
基本选择器
#id 选择器：根据 id 查找标签对象
.class 选择器：根据 class 查找标签对象
element 选择器：根据标签名查找标签对象
* 选择器：表示任意的，所有的元素（全部标签）
selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回（将每一个选择器匹配到的元素合并后一起返回。）
// #id 选择器：根据 id 查找标签对象
描述:
查找 ID 为"myDiv"的元素。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv");
结果:
[ <div id="myDiv">id="myDiv"</div> ]
// element 选择器：根据标签名查找标签对象
描述:
查找一个 DIV 元素。
HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码:
$("div");
结果:
[ <div>DIV1</div>, <div>DIV2</div> ]
//.class 选择器：根据 class 查找标签对象
描述:
查找所有类是 "myClass" 的元素.
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
// * 选择器：表示任意的，所有的元素（全部标签）
描述:
找到每一个元素
HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>jQuery
代码:
$("*")
结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
// selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回（将每一个选择器匹配到的元素合并后一起返回。
描述:
找到匹配任意一个类的元素。
HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
$("div,span,p.myClass")
//p.myClass表示标签名必须是p标签，而且class必须是myClass
//结果的顺序是页面中标签从上到下的顺序
结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
练习：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<!-- 引入JQuery文件 -->
<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 () {
//定位到button标签，为其绑定单击事件
//让button绑定id为one的标签样式
//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>
</head>
<body>
<!-- <div>
<h1>基本选择器</h1>
</div> -->
<input type="button" value="选择 id 为 one 的元素" id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="选择 所有的元素" id="btn4" />
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<!-- display:none : 表示让div模块消失，不出现在页面上 -->
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>
层级选择器
ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
// ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
描述:
找到表单中所有的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")//查找form标签内部的所有input子元素
结果:
[ <input name="name" />, <input name="newsletter" /> ]
// parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
描述:
匹配表单中所有的子级input元素。
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")//查找form标签直接包含的input
结果:
[ <input name="name" /> ]
// prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
描述:
匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
// prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
描述:
找到所有与表单同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]
练习：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color
最低0.47元/天 解锁文章
扫一扫
1341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
