jQuery
学习参考
概况
jQuery是由美国人John Resig于2006年创建的一个开源项目,如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系,它的主旨是:以更少的代码,实现更多的功能(Write less,do more)。
2.0版本以后,就不考虑兼容IE浏览器的问题
基本功能
1.访问和操作DOM元素
2.控制页面样式
3.对页面事件的处理
4.与Ajax技术的完美结合
5.大量插件在页面中的运用
搭建jQuery开发环境
jQuery其实就是一个JavaScript文件,搭建jQuery开发环境十分简单,先在项目添加jQuery文件,再导入
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
HelloWorld
//JS的页面加载事件: window.onload = function(){} 类似 //jQuery的页面加载事件: $(document).ready(function(){}) //注意:$(document).ready(function(){})可以简写成$(function(){}),一般使用简化的
区别:
执行时间不同:
$(document).ready在页面框架下载完毕后就执行;而window.onload必须在页面全部加载完毕(包含图片下载)后才能执行。
执行数量不同:
$(document).ready可以重复写多个,并且每次执行结果不同;
而window.onload尽管可以执行多个,但仅输出最后一个执行结果,无法完成多个结果的输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//JS的页面加载事件:会覆盖,整个页面的html元素和资源全部加载完毕后触发的事件
// window.onload = function(){
// alert("HelloWorld...1");
// }
//jQuery的页面加载事件:不会覆盖,整个页面的html元素全部加载完毕后触发的事件
// $(document).ready(function(){
// alert("HelloWorld...1");
// })
//jQuery页面加载事件简化版
$(function(){
alert("HelloWorld...1");
})
</script>
</head>
<body>
<script type="text/javascript">
// $(document).ready(function(){
// alert("HelloWorld...2");
// })
// window.onload = function(){
// alert("HelloWorld...2");
// }
$(function(){
alert("HelloWorld...2");
})
</script>
</body>
</html>
jQuery选择器
在页面中为某个元素添加样式或事件时,必须先准确地找到该元素——在jQuery库中,可以通过选择器实现这一重要的核心功能。
分类
基本选择器
基本选择器是jQuery中使用最频繁的选择器,它由元素ID、Class、元素名、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//通配符选择器
$("*").css("color","red");
//基本选择器
//id选择器
$("#h1_id").css("color","red");
//class选择器
$(".h1_class").css("color","red");
//标签选择器
$("p").css("color","red");
//群组选择器
$("h1,h3,h5,p").css("color","red");
})
</script>
</head>
<body>
<h1 id="h1_id">一级标签</h1>
<h2>二级标签</h2>
<h3 class="h1_class">三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>用良心做教育</p>
<p>做真实的自己</p>
<span>匠心育人</span>
<span>初心至善</span>
</body>
</html>
层次选择器
层次选择器通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中某类关系可以方便快捷地定位元素
选择器 | 功能描述 |
---|---|
ancestor descendant | 根据祖先元素匹配所有的后代元素 |
parent>child | 根据父元素匹配所有的子元素 |
prev+next | 匹配prev后的相邻元素 |
prev~siblings | 匹配prev后面的所有兄弟元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//派生/上下文关系选择器
//后代选择器
$("ul a").css("color","red");
//子代选择器
$("li>a").css("color","red");
//相邻兄弟选择器----注意:选择后者
$("a+a").css("color","red");
//后续选择器----注意:选择后者
$("ul~a").css("color","red");
})
</script>
</head>
<body>
<ul>
<li>
<a href="#">超链接1</a>
</li>
<li>
<a href="#">超链接2</a>
</li>
<li>
<a href="#">超链接3</a>
</li>
</ul>
<ul>
<li>
<a href="#">超链接4</a>
</li>
<li>
<a href="#">超链接5</a>
</li>
<li>
<a href="#">超链接6</a>
</li>
</ul>
<a href="#">超链接7</a>
<a href="#">超链接8</a>
<a href="#">超链接9</a>
<p>用良心做教育</p>
<a href="#">超链接10</a>
<a href="#">超链接11</a>
<a href="#">超链接12</a>
</body>
</html>
过滤选择器(表单选择器)
过滤选择器根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头
简单过滤选择器
//略写
<script type="text/javascript">
$(function(){
//选择第一个元素
$("li:first").css("color","red");
//选择最后一个元素
$("li:last").css("color","red");
//选择不是第一个元素
$("li:not(:first)").css("color","red");
//选择下标是偶数的元素
$("li:even").css("color","red");
//选择下标是奇数的元素
$("li:odd").css("color","red");
//选择指定下标的元素
$("li:eq(2)").css("color","red");
//选择大于下标的元素
$("li:gt(2)").css("color","red");
//选择小于下标的元素
$("li:lt(2)").css("color","red");
})
</script>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位
<script type="text/javascript">
$(function(){
//选择包含指定内容的元素
$("div:contains('John')").css("color","red");
//选择没有内容的元素
$("div:empty").text("用良心做教育");
//选择包含某个子标签的元素
$("div:has(p)").css("color","red");
//选择包含子标签或内容的元素
$("div:parent").text("用良心做教育");
})
</script>
<body>
<div>John Resig</div>
<div><p>George Martin</p></div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<div></div>
</body>
可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素
style="display:none"不可见
style="display:block"可见
<script type="text/javascript">
$(function(){
//选择不可见的元素
$("tr:hidden").css("display","block");
//选择可见的元素
$("tr:visible").css("color","red");
})
</script>
<body>
<table>
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
</body>
属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素,如ID号或匹配属性值的内容,并以“[”号开始、以“]”号结束
<script type="text/javascript">
$(function(){
/**
* 选择指定属性的元素
* $("input[placeholder]").css("color","red");
*
* 选择指定属性+值的元素
* $("input[placeholder='请输入账号...']").css("color","red");
*
* 选择指定属性+不等于值的元素
* $("input[name!='username']").css("color","red");
*
* 选择指定属性+以某个值开头的元素
* $("input[name^='n']").css("color","red");
*
* 选择指定属性+以某个值结尾的元素
* $("input[name$='word']").css("color","red");
*
* 选择指定属性+包含某个值的元素
* $("input[name*='am']").css("color","red");
*
* 选择多个属性的元素
* $("input[name][placeholder]").css("color","red");
*/
})
</script>
<body>
<form action="服务器地址" method="post">
账号:<input type="text" name="username" placeholder="请输入账号..."/>
<br />
密码:<input type="password" name="password" placeholder="请输入密码..."/>
<br />
确认密码:<input type="password" name="repassword"/>
<br />
姓名:<input type="text" name="name"/>
<br />
昵称:<input type="text" name="nickName" placeholder="请输入昵称..."/>
<br />
性别:
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<br />
爱好:
<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
<input type="checkbox" name="hobbies" value="basketball" checked="checked"/>篮球
<input type="checkbox" name="hobbies" value="shop"/>购物
<br />
国籍:
<select name="nationality">
<option value="001">韩国</option>
<option value="002">美国</option>
<option value="003" selected="selected">中国</option>
<option value="004">日本</option>
</select>
<br />
<input type="submit" value="注册" />
</form>
</body>
子元素过滤选择器
注意::nth-child索引从1开始
<script type="text/javascript">
$(function(){
/**
* 选择指定的子元素(注意:JQuery选择器中只有当前选择器的数字才是表示第几个元素,其余的都是下标)
* $("ul li:nth-child(1)").css("color","red");
*
* 选择第一个子元素
* $("ul li:first-child").css("color","red");
*
* 选择最后一个子元素
* $("ul li:last-child").css("color","red");
*
* 选择只有一个子元素的元素
* $("ul li:only-child").css("color","red");
*/
})
</script>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>用良心做教育</li>
</ul>
</body>
表单选择器
在jQuery选择器中引入表单选择器,该选择器专为表单量身打造,通过它可以在页面中快速定位某表单对象
<script type="text/javascript">
$(function(){
/**
* :input 表示所有的表单标签
*/
$(":input").css("display","none");
})
</script>
表单属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素,如enabled、disabled、checked、selected属性
(1)
<script type="text/javascript">
$(function(){
/**
* 选择可用表单元素
* $("input:enabled").val("用良心做教育");
*
* 选择不可用表单元素
* $("input:disabled").val("用良心做教育");
*/
})
</script>
<body>
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
</body>
(2)
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//选择选中状态的单选框
alert($("input[type='radio']:checked").val());
})
})
</script>
<body>
<form>
性别:
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
<input type="button" id="btn" value="普通按钮" />
</form>
</body>
(3)
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//选择选中状态的下拉列表
alert($("option:selected").text());
})
})
</script>
<body>
<form>
省份:
<select>
<option>四川</option>
<option>湖南</option>
<option>湖北</option>
<option>广东</option>
<option>广西</option>
</select>
<input type="button" id="btn" value="普通按钮" />
</form>
</body>
选择器综合案例
对于功能先是图标的变化,然后再是隐藏功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择</title>
<style type="text/css">
body{font-size:13px}
#all{border:solid 1px #666;width:320px;overflow:hidden}
#all #head{background-color:#eee;padding:8px;height:18px;cursor:hand}
#all #head h3{padding:0px;margin:0px;float:left}
#all #head span{float:right;margin-top:3px}
#all #content{padding:8px}
#all #content ul {list-style-type:none;margin:0px;padding:0px}
#all #content ul li{ float:left;width:95px;height:23px;line-height:23px}
#all #btn{float:right;padding-top:5px;padding-bottom:5px}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.js">
</script>
<script type="text/javascript">
$(function(){
$("img").click(function(){
if($(this).attr("src") == "../img/up.bmp"){
$(this).attr("src","../img/down.bmp");
$("#content").css("display","none");
}else if($(this).attr("src") == "../img/down.bmp"){
$(this).attr("src","../img/up.bmp");
$("#content").css("display","block");
}
})
$("#btn>a").click(function(){
if($(this).text() == "简化"){
$(this).text("更多");
$("ul>li:gt(5):not(:last)").css("display","none");
}else if($(this).text() == "更多"){
$(this).text("简化");
$("ul>li:gt(5):not(:last)").css("display","block");
}
})
})
</script>
</head>
<body>
<div id="all">
<div id="head">
<h3>学科分类</h3>
<span><img src="../img/up.bmp"/></span>
</div>
<div id="content">
<ul>
<li>
<a href="#">JavaEE</a><i> (1110) </i></li>
<li>
<a href="#">PHP</a><i> (230) </i></li>
<li>
<a href="#">BIG</a><i> (1430) </i></li>
<li>
<a href="#">Android</a><i> (1560) </i></li>
<li>
<a href="#">IOS</a><i> (870) </i></li>
<li>
<a href="#">H5</a><i> (1460) </i></li>
<li>
<a href="#">VR</a><i> (1450) </i></li>
<li>
<a href="#">小程序</a><i> (1780) </i></li>
<li>
<a href="#">演讲</a><i> (930) </i></li>
<li>
<a href="#">PPT</a><i> (3450) </i></li>
<li>
<a href="#">Word</a><i> (980) </i></li>
<li>
<a href="#">其他</a><i> (3230) </i></li>
</ul>
<div id="btn">
<a href="#">简化</a>
</div>
</div>
</div>
</body>
</html>
jQuery的选择器和CSS的选择器的区别
CSS的选择器:选择对应的标签,设置样式
jQuery的选择器:选择对应的标签,操作内容、属性、样式,设置各种事件等等