目录
jQuery(一)
1.什么是jQuery
jQuery是一个优秀的JavaScript库,是一个凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。
理念:write less,do more
2.jQuery优势及特点
-
轻量级
-
强大的选择器
-
出色的DOM操作的封装
-
可靠地事件处理机制
-
完善的Ajax
-
不污染顶级变量
-
出色的浏览器兼容性
-
链式操作方式
-
隐式迭代
-
行为层与结构层的分离
-
丰富的插件支持
-
完善的文档
-
开源
3.jQuery常用网站
[官方地址] https://jquery.com/
[jQuery库] https://www.bootcdn.cn/jquery/ 不同版本
[jQuery常用工具] https://www.runoob.com/jquery/jquery-tutorial.htm
[jQuery常用工具] https://www.w3school.com.cn/jquery/index.asp
4.jQuery引入
1.通过本地引入
<script type="text/javascript" src="./jquery-3.5.1/jquery-3.5.1.js"></script>
2.通过cdn网站引入
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
3.jQuery位置问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
因为浏览器解析html是从上到下解析
所以在1,2位置需要使用匿名函数,
-->
<script>
// 1.放在<head>中
$(function(){
})
</script>
</head>
<body>
<!-- 2.放在<body>前面 -->
<script>
$(function(){
})
</script>
<!-- 3.放在<body>最后面 -->
<script>
</script>
</body>
</html>
5.jQuery入口函数的写法
1.
<script>
$(document).ready(function(){
alert('hello')
})
</script>
2.
<script>
jQuery(document).ready(function(){
alert('hello')
})
</script>
3.推荐常用
<script>
$(function(){
alert('hello')
})
</script>
4.
<script>
JQuery(function(){
alert('hello')
})
</script>
6.jQuery函数
<script>
//1.参数为匿名函数,当Dom加载完成后,执行此回调函数
$(function(){
//2.参数为选择器(字符串):查找所有匹配的标签,并将它们封装成jQuery对象
$('#btn').click(function(){
//3.参数为Dom对象:jQuery函数将Dom封装成jQuery对象并返回。
alert($(this).html())
//4.参数为HTML文本字符串
$('<input type="text" name="msg"></input>').appendTo('div')
})
})
</script>
7.jQuery对象
1.jQuery对象是jQuery函数的一个实例,该对象可以调用jQuery原型中的方法,也就是我们后面学的很多方法,比如each,map,slice,first,find, filter,not, on,off,css等方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<!--
1.jquery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2.基本行为
*size()/length:包含的dom元素的个数
*[index]/get(index):得到对应位置的dom元素
*each():遍历包含的所有dom元素
*index():得到所在元素的下标
-->
<script type="text/javascript">
$(function(){
//获取所有button
var $btns=$('button');
// console.log($btns)
//需求一 统计有多少个按钮
console.log('button个数为'+$btns.size())
console.log('button个数为'+$btns.length)
//需求二 取出第二个button的文本
console.log($btns[1].innerHTML);
console.log($btns.get(1).innerHTML);
//需求三 输出所有button标签的文本
$btns.each(function(index,item){
console.log(index,item.innerHTML,this);
})
//需求四 输出测试三按钮是所有按钮的第几个(下标)
console.log($('#btn3').index())
})
</script>
</body>
</html>
8.jQuery对象与Dom对象
jQuery对象与Dom对象是两种完全不一样的对象,jQuery对象是jQuery函数的实例,是一个类数组对象,而DOM对象是Node的实例,他们所能调用的方法完全不同。但是它们又有一定的关联性,jQuery对象的类数组的元素为DOM对象,对jQuery对象的操作实际上就是对jQuery数组中DOM对象的批量操作。 jQuery 对象和DOM对象可以相互转化。
Dom对象转化为jQuery对象
<script>
//dom为一个DOM对象,$dom为jQuery对象
var $dom=jQuerey(dom);
</script>
jQuery对象转化为Dom对象
<script>
//获取所有class为one的dom元素,可能多个,$doms为jQuery对象
var $doms=jQuery('.one');
//获取封装在jQuery对象中的第一个dom对象,doms为dom对象
var dom=$doms[0];
</script>
9.jQuery选择器
9.1基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="one"></div>
<div id="two"></div>
<div class="one"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 使用jQuery之前要先引入 -->
<script>
$(function(){
//所有选择器
$('*').css({
background:'red'
})
//标签选择器
$('div').css({
background:'red'
})
//id选择器
$('#two').css({
background:'red'
})
//类选择器
$('.one').css({
background:'red'
})
//组合选择器(取并集)
$('div,li').css({
background:'red'
})
//相交选择器(取交集)
$('div.one').css({
background:'red'
})
})
</script>
</body>
</html>
9.2层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>AAAA</li>
<li class="box">BBBB</li>
<li title="hello"><span>CCCC</span></li>
<li title="hello"><span>DDDD</span></li>
<span>EEEE</span>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
//选中ul下所有的span selector1 selector2后代选择器
// $('ul span').css({
// background:'yellow'
// })
//选中ul下所有的子元素span selector1>selector2 子代选择器
// $('ul>span').css({
// background:'red'
// })
//选中class为box的下一个li prev+next 下一个兄弟选择器
// $('.box+li').css({
// background:'blue'
// })
//选中ul下的class为box的元素 后面的所有兄弟元素 之后所有的兄弟选择器
$('ul .box~*').css({
background:'yellow'
})
})
</script>
</body>
</html>
9.3过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br>
<ul>
<li>AAAA</li>
<li title="hello">BBBB</li>
<li class="box">CCCC</li>
<li title="hello">DDD</li>
<li title="two">EEEE</li>
<li style="display:none;">我本来是隐藏的</li>
</ul>
<--
基本过滤器
语法: selector:过滤器
selector:first 获取所有已选择到的元素中的第一个元素
selector:last 获取所有已选择到的元素中的最后一个元素
selector:even 获取所有已选择到的元素中的索引为偶数元素
selector:odd 获取所有已选择到的元素中的索引为奇数元素
selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
selector:lt(num) 获取所有已选择到的元素中索引值小于num的元素
selector:gt(num) 获取所有已选择到的元素中索引值大于num的元素
selector1:not(selector2)获取所有已选择到的元素中除了selector2的元素
selector:header 获取标题h1~h6获取所有已选择到的元素中的标题元素
内容过滤器
语法: selector:过滤器
selector:contains(text) 获取所有已选择到的元素中文本包含text的元素
selector:empty 获取所有已选择到的元素中空元素(没有子节点)
selector:parent 获取所有已选择到的元素中非空元素(有子节点)
如$("div:parent")
selector:has(selector2) 获取所有已选择到的元素中包含selector2的元素
如$("div:has('span')")
可见性过滤器
语法: selector:过滤器
隐藏类型分2种:
1. 不占据屏幕空间
display:none
//input type="hidden"
2. 占据屏幕空间
visibility:hidden
透明度为0
使用:
:visible 选择所有占据屏幕空间的元素
:hidden 选择所有不占据屏幕空间的元素
属性过滤器
语法: selector[属性过滤器]
1. selector[attrKey]
获取所有已选择到的元素中具有属性attrKey的元素
2. selector[attrKey=attrVal]
获取所有已选择到的元素中具有属性attrKey,并且属性值为attrVal的元素
3. selector[attrKey^=attrVal]
获取所有已选择到的元素中具有属性attrKey,并且属性值为以attrVal开头的元素
4. selector[attrKey$=attrVal]
获取所有已选择到的元素中具有属性attrKey,并且属性值为以attrVal结尾的元素
5. selector[attrKey*=attrVal]
获取所有已选择到的元素中具有属性attrKey,并且属性值为包含attrVal的元素
6. selector[attrKey!=attrVal]
获取所有已选择到的元素中具有属性attrKey,并且属性值不为attrVal的元素或者 没有属性attrKey的元素
-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
//选择第一个div 获取所有已选择到的元素中的第一个元素
// $('div:first').css({
// background:'red'
// })
//选择最后一个class为box的元素 获取所有已选择到的元素中的最后一个元素
// $('.box:last').css({
// background:'red'
// })
//选择所有class属性不为box的div
// $('div:not(.box)').css({
// background:'red'
// })
//选择第二个和第三个li元素
//多个选择器不是同时执行的,是依次执行的
// $('li:gt(0):lt(2)').css({
// background:'red'
// })
//获取内容为BBBB的li
// $('li:contains("BBBB")').css({
// background:'red'
// })
//选择隐藏的li :hidden
// console.log($('li:hidden').length,$('li:hidden')[0]);
//选择有title属性的li元素
// $('li[title]').css({
// background:'red'
// })
//选择所有属性title为hello得li元素
$('li[title=hello]').css({
background:'red'
})
})
</script>
</body>
</html>
9.4后代过滤器
/*
后代过滤器
选择器一定要先选择到后代元素,是对选择到的后代元素的过滤,【注意】空格与>(即子代)的区别。
1. selector :nth-child(index)
获取每个selector元素中索引为index的子元素【注意】index从1开始
2. selector :first-child
获取每个selector元素中第一个子元素(每个父元素的第一个子元素)
注意与selector :first的区别,获取所有selector元素的子元素中的第一个(只有一 个)
3. selector :last-child
获取每个selector元素中最后一个子元素(每个父元素的最后一个子元素)
4. selector :only-child
获取每个selector元素中独生子子元素(每个父元素如果只有一个孩子元素,获 取该元素)
5. selector :first-of-type
获取每个selector元素中每种类型子元素中的第一个
6. Selector :last-of-type
获取每个selector元素中每种类型子元素中的最后一个
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
float: left;
border: 1px solid red;
width: 100px;
height: 30px;
}
.inner{
float: left;
border: 1px solid blue;
width: 10px;
height: 10px;
margin: 2px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
// //选中每一个outer中的第一个inner
// var $result=$('.outer .inner:first-child')
// $result.css('background','red')
//选中每一个outer中的最后一个inner
// var $result=$('.outer .inner:last-child')
// $result.css('background','red')
// :first 只有一个元素,第一个
// var $result = $('.outer .inner:first')
// $result.css('background', 'red')
// :last 同理
// var $result = $('.outer .inner:last')
// $result.css('background', 'red')
// 作为别人的第偶数/奇数个孩子
var $result = $('.outer .inner:nth-child(odd)')
$result.css('background', 'red')
})
</script>
</body>
</html>
9.5表单过滤器
/*
表单过滤器:主要是对选择的表单元素进行过滤
:enabled
选取所有可用元素该选择器仅可用于选择支持disabled属性(attribute)的HTML 元素(<button>, <input>,<optgroup>,<option>, <select>,和 <textarea>)
:disabled
选取所有不可用的元素该选择器也是仅可用于支持disabled属性的HTML元素
:checked
选取所有被选中的元素,用于复选框和单选框,下拉框
:selected
选取所有被选中的选项元素,该选择器只适用于<option>
:focus
选择当前获取焦点的元素
:input
选取所有的<input><textarea><select><button>元素。注意:$(“:input”)是选择可 以让用户输入的标签元素;而$(“input”)是选择名字为input的标签元素
:text
选取所有的单行文本框(<input type="text">)
:password
选取所有的密码框
表单过滤器:主要是对选择的表单元素进行过滤
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有input类型为image的表单元素
:reset 选取所有input类型为reset的表单元素
:button 选取所有input类型为button的表单元素
:file 选取所有input类型为file的表单元素
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
爱好:
<input type="checkbox" name="" id="">篮球
<input type="checkbox" name="" id="">足球
<input type="checkbox" name="" id="" checked>羽毛球<br>
性别:
<input type="radio" name="sex" id="" value="male">男
<input type="radio" name="sex" id="" value="female" checked>女<br>
邮箱:
<input type="text" name="email" id="" disabled="disabled"><br>
所在地:
<select name="" id="">
<option value="上海">上海</option>
<option value="苏州">苏州</option>
<option value="杭州" selected>杭州</option>
</select><br>
<input type="submit" value="提交">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
//选择不可用的文本输入框
$(':text:disabled').css({
background:'red'
})
//显示选择爱好的个数
console.log($(':checkbox:checked').length)
//显示选择的性别
console.log($(':radio:checked').val())
//显示选择的城市名称
$(':submit').click(function(){
var city=$('select>option:selected').html()
alert(city)
})
})
</script>
</body>
</html>