一、jQuery技术的介绍
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
注:简化了JavaScript对DOM对象定位以及对DOM对象属性操作开发步骤
1、jQuery学习的重点知识
- 熟练jQuery选择器和过滤器的语法
- 熟练掌握jQuery对象所提供的功能函数
2、jQuery的使用
首先需要知道的是jQuery是一个脚本文件,所以需要下载该工具文件,并导入到工程中。
注:jQuery未引入报错:ReferenceError: $ is not defined
(1)jQuery库的引入
<script type="text/javascript" src="js/jquery.min.js"></script>
3、jQuery中的$
$号是jQuery“类”的一个别称,$()构造了一个jQuery对象。所以,“$()”可以叫做jQuery的构造函数。
jquery体系中最重要的工具就那个代表国际财富的$!其实Jquery的$的主要功能就是字符检索功能,同时返回一个Jquery对象,从而利用jquery框架所提供的jquery对象的方法来处理这个对象。
简洁理解jquery的代表符号$, 代表的是jquery的顶层对象,也可以理解为jquery对象本身。
jquery中$的四大功能:
- 1)$(function)----$(document).ready(function(){});
- 2)$("#idname")----这个用来代表检索页面中具有本名字空间中唯一标记,其文本标记为“idname”;这个idname前加入“#”实际是为了与css规范相对应。注:在css编排中,同样使用"#idname"来定义具有唯一姓名(id)来定义对应对象的样式
- 3)$(".cssidname")----这个用来代表一个css标记标签tag的样式内容;
- 4)$("httag")----这个最直接的设计代表的是html的保留字标签;
4、jQuery对象与DOM对象区别
(1)DOM对象
- 创建者:在浏览器加载网页时,由浏览器负责创建
- 一个HTML标签对应一个DOM标签
- 可以通过管理DOM对象,来对关联HTML标签中的属性进行操作。
(2)jQuery对象
- 创建者:是jQuery函数负责创建的——》函数 $(funtion(){})
- jQuery对象就是一个数组
- jQuery对象中存放的是本次所定位的DOM对象
- 可以通过jQuery对象中的功能函数,来快速的对所定位的DOM对象进行操作管理
- jQuery对象的命名方式:以$开头,如:$obj
二、jQuery对象与DOM对象的转换
1、如何将jQuery对象转换为DOM对象
for(let i = 0; i < $obj.length; i++){
let domObj = $obj[i];
}
(1)快速遍历函数——each()
each函数中需要传递一个函数,该函数有两个参数,第一个是下标,即index;第二个传入一个对象
function myCheckbox(index, domObj){
alert("第" + (index+1) + "个checkbox标签的value是:" + domObj.value)
}
function fun5(){
let $obj = $(":checkbox")
$obj.each(myCheckbox)
}
2、如何将DOM对象转换成jQuery对象
let $obj = $(domObj)
注:jQuery对象与DOM对象之间属性和函数彼此不能调用
三、jQuery中的选择器语法
1、什么是选择器语法
选择器语法就是对DOM对象进行定位的条件,比如根据ID定位,根据标签类型名
2、在jQuery中选择器类型
在jQuery中只有三种选择器:基本选择器、层级选择器、INPUT标签选择器
3、基本选择器
定位条件:可以根据ID编号,根据标签类型名,根据标签采用的样式选择器进行定位
使用:
- $("#id编号"):用来代替 document.getElementById("id") ,即根据ID编号定位对应的DOM对象,让DOM对象保存到一个数组中并返回。返回的这个数组就是jQuery对象
- $(".样式选择器名称"):用来代替 document.getElementsByClassName("样式选择器名") 将使用了指定的样式选择器的DOM对象保存到同一个数组中并返回。返回的这个数组就是jQuery对象
- $("标签类型名"):用来代替 document.getElementsByTagName("标签类型名") 将所有指定的标签类型所关联的DOM对象保存到同一个数组中并返回。返回的这个数组就是jQuery对象
- $("*"):定位浏览器中所有的DOM对象保存到同一个数组中并返回。返回的这个数组就是jQuery对象(用于浏览器全局切换皮肤)
- $("条件1,条件2"):只要DOM对象满足其中的一种条件(至少一个),就会被定位到数组中,即相当于mysql中的or
- $符号,本身代表一个类(即jQuery类)
<!!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>jQuery的使用</title>
<style type="text/css">
div{
background: #7F7F7F;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<!-- 定义被选择的对象 -->
<div id="one" class="two"></div><br>
<div class="two"></div><br>
<div></div><br>
<span>我是span标签</span><br />
<!-- 定义按钮 -->
<input type="button" id="btn01" value="选择id为one的元素" onclick="fun1()" />
<input type="button" id="btn02" value="选择class为two的元素" onclick="fun2()" />
<input type="button" id="btn03" value="选中所有的div元素" onclick="fun3()"/>
<input type="button" id="btn04" value="选中所有元素" onclick="fun4()" />
<input type="button" id="btn05" value="选中id为one与所有的span元素" onclick="fun5()" />
<script>
function fun1(){
let $obj = $("#one")
$obj.css({
background: '#FF0000'
})
}
function fun2(){
let $obj = $(".two")
$obj.css({
background: '#00FF00'
})
}
function fun3(){
$("div").css({
background: '#0000FF'
})
}
function fun4(){
$("*").css({
background: 'yellow'
})
}
function fun5(){
$("#one,span").css({
background: 'coral'
})
}
</script>
</body>
</html>
(1)全选框案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的主页</title>
<style>
*{
margin: 0;
padding: 0;
}
#selectAllBut{}
.ah{}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
function selectAll(){
//1、获取第一个checkbox的选中状态
let flag = $("#selectAllBut").prop("checked")
//2、为所有数据行的checkbox设置选中状态
$(".ah").prop("checked", flag)
}
</script>
<input type="checkbox" onclick="selectAll()" id="selectAllBut"/>全选<br />
<input type="checkbox" class="ah"/>学习<br />
<input type="checkbox" class="ah"/>睡觉<br />
<input type="checkbox" class="ah"/>吃饭<br />
</body>
</html>
prop() 方法设置或返回被选元素的属性和值。
- 当该方法用于返回属性值时,则返回第一个匹配元素的值。
- 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。
- 返回属性的值:$(selector).prop(property)
- 设置属性和值:$(selector).prop(property,value)
- 使用函数设置属性和值:$(selector).prop(property,function(index,currentvalue))
- 设置多个属性和值:$(selector).prop({ property:value, property:value,...})
4、层级选择器
定位条件:可以根据标签之间的父子关系定位;可以根据标签之间的兄弟关系定位
标签之间的关系:
- (1)父子关系,即包含关系
- (2)兄弟关系:两个标签拥有相同的父标签,并且彼此之间没有包含关系
使用:
- $("定位父标签条件>定位子标签条件"):定位当前父标签下,所有满足条件的直接子标签。
- $("定位父标签条件 定位子标签条件"):定位当前父标签下,所有满足条件的直接子标签和间接子标签
- $("定位当前标签条件~定位兄弟标签条件"):定位当前标签后面,所有满足条件的兄弟标签
- $("定位当前标签条件+定位兄弟标签条件"):定位当前标签后面与之近邻的,并且满足条件的所有兄弟标签
- $("定位当前标签条件").siblings("定位兄弟标签条件"):定位当前标签(前面与后面)所有满足条件的兄弟标签
简单案例:
<!!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
background: gray;
}
</style>
</head>
<body>
<div id="one">我是div01</div>
<div id="two">我是div02</div>
<div>我是div03
<div class="son">我是div03的子div</div>
<div class="son">我是div03的子div</div>
</div>
<div>我是div04</div>
<span>我是span标签</span><br />
<input type="button" id="btn01" value="选择body中所有的div子标签" onclick="fun1()"/>
<input type="button" id="btn02" value="选择body下的直接div子标签" onclick="fun2()"/>
<input type="button" id="btn03" value="选中id为one的下一个兄弟div" onclick="fun3()"/>
<input type="button" id="btn04" value="选中id为two的所有后面兄弟div" onclick="fun4()"/>
<input type="button" id="btn05" value="选择id为two的所有兄弟div" onclick="fun5()"/>
<script type="text/javascript">
function fun1(){
$("body div").css({
background: 'pink'
})
}
function fun2(){
$("body>div").css({
background: 'orange'
})
}
function fun3(){
$("#one+div").css({
background: 'aqua'
})
}
function fun4(){
$("#two~div").css({
background: 'red'
})
}
function fun5(){
$("#two").siblings("div").css({
background: 'green'
})
}
</script>
</body>
</html>
5、INPUT标签选择器
type取值:text、password、radio、checkbox、file、button、submit、reset
INPUT标签作用:作为浏览器向网站发送请求时携带请求参数。
使用:
- $(":type属性名字")
- $(":button"):定位页面中所有的button关联的DOM
简单案例:
使用用户名和密码模拟对百度页面进行请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<center>
<form action="http://www.baidu.com">
loginName: <input type="text" name="uname" /><br>
password : <input type="password" name="pass" /><br>
<input type="submit" />
</form>
</center>
</body>
</html>
按钮点击事件获取input标签的值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!-- 定义表单元素 -->
<form id="myForm" action="">用户名:
<input type="text" name="username" /><br><br>
密 码:
<input type="password" name="passwd" /><br><br>
性 别:
<input type="radio" name="gender" value="1" checked/>男
<input type="radio" name="gender" value="0" />女<br><br>
照 片:
<input type="file" name="photo"/><br><br>
兴 趣:
<input type="checkbox" name="interest" value="music" checked/>音乐
<input type="checkbox" name="interest" value="food" />美食
<input type="checkbox" name="interest" value="travel" />旅游
<input type="checkbox" name="interest" value="shopping" />购物
<br><br>
<input type="submit" value="提交"/>
</form>
<br><br>
<!-- 定义按钮 -->
<button id="btn01" onclick="fun1()">选择文本输入框并输出用户输入的值</button>
<button id="btn02" onclick="fun2()">选择密码输入框输出用户输入的密码</button>
<button id="btn03" onclick="fun3()">选择单选框的value属性值</button>
<button id="btn04" onclick="fun4()">选择文件上传框并输出用户选择的文件</button>
<button id="btn05" onclick="fun5()">选择复选框并输出用户选择的值</button>
<script type="text/javascript">
function fun1(){
let $obj = $(":text")
let value = $obj.val() //val()函数:jQuery对象中的一个功能函数,用于读取jQuery对象中第一个DOM对象的value属性内容
alert("文本框的value值是" + value)
}
function fun2(){
let value = $(":password").val()
alert("密码框中的内容是:" + value)
}
function myFun(index, domObj){
alert("第" + (index+1) + "个radio标签的value是:" + domObj.value)
}
function fun3(){
let $obj = $(":radio")
//因为有两个单选框,所以此时需要使用到jQuery对象转换成DOM对象
for(let i = 0; i < $obj.length; i++){
let = domObj = $obj[i]
myFun(i, domObj)
}
}
function fun4(){
alert($(":file").val()) //file类型的val值为路径
}
function myCheckbox(index, domObj){
alert("第" + (index+1) + "个checkbox标签的value是:" + domObj.value)
}
function fun5(){
let $obj = $(":checkbox")
$obj.each(myCheckbox)
}
</script>
</center>
</body>
</html>