喵星之旅-成长的雏鹰-Web前端-7-jQuery基础

成长的雏鹰JavaWeb

jQuery简介

jQuery的用法、优势、配置环境

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。

优势:

  • 体积小，压缩后只有100KB左右
  • 强大的选择器
  • 出色的DOM封装
  • 可靠的事件处理机制
  • 出色的浏览器兼容性
  • 使用隐式迭代简化编程
  • 丰富的插件支持

jQuery 库可以通过一行简单的标记被添加到网页中。下载文件到本地然后引用（也可以把下面CDN的网址打开，直接复制粘贴为js文件使用）：

1
2
3
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

谷歌和微软的服务器都存有 jQuery 。

如需从谷歌或微软引用 jQuery，请使用以下代码之一：

1
2
3
4
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

jQuery语法

使用jQuery弹出提示框

1
2
3
4
5
6
<script>
     $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>

$(document).ready()与window.onload类似，但也有区别
Alt text

jQuery语法结构

1
$(selector).action() ;
  • 工厂函数$()：将DOM对象转化为jQuery对象
  • 选择器 selector：获取需要操作的DOM 元素
  • 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

jQuery操作页面元素

  • 使用addClass( )方法为元素添加样式
  • 使用css( )方法设置元素样式
  • 使用show( )、hide( ) 方法设置元素的显示和隐藏
    1
    2
    3
    4
    5
    6
    jQuery 对象.addClass([样式名]);
    css("属性","属性值") ;
    css({"属性1":"属性值1","属性2":"属性值2"...}) ;
    $(selector).show();
    $(selector).hide();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title>仿京东左侧菜单</title>
  <link href="css/style.css" rel="stylesheet"/>
 </head>
 <body>
	<div class="nav-box">
		<div class="nav-top"><a href="">全部商品分类</a></div>
		<ul>
			<li>
				<a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
			</li>
			<li>
				<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>
			</li>
			<li>
				<a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>
			</li>
			<li>
				<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>
			</li>
			<li>
				<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>
			</li>
		</ul>
	</div>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/hover.js"></script>
 </body>
</html>

hover.js:
$(document).ready(function(){
	/**一级内容悬浮**/
	$("li").mouseover(function(){
		$(this).css({"background":"orange"});//当前li 背景颜色为橙色

		$(this).children("div").show();//让相应二级内容显示
		
	}).mouseout(function(){
			 $(this).css({"background":"#c81623"});
			$(this).children("div").hide();

	});
});

“$”等同于“ jQuery ”

1
2
3
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})

链式操作(对一个对象进行多重操作，并将操作结果返回给该对象)

对于设置性操作会把当前的jQ对象进行返回，所以可以在后面继续链式编程
对于获取性操作来说，返回的是具体的值（不是jQ对象），所有不可以继续链式编程了

隐式迭代(jQuery在设置属性时会自动的遍历，因此我们不需要再遍历)

对于设置性操作来说，会把获取到的所有元素都设置上相同的操作。
对于获取性操作来说，只会获取到第一个元素对应的值。
如要每个元素都设置上不同的操作，自己手动遍历。

1
2
3
4
5
 $(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });

$('body').css('color', 'pink').css('fontSize', 30).css('backgroundColor', 'lime').css('backgroundColor', 'red');

DOM对象和jQuery对象

DOM对象

浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
Alt text

jQuery对象

DOM对象：直接使用JavaScript获取的节点对象

1
2
3
var objDOM=document.getElementById("title"); 
var objHTML=objDOM.innerHTML;

jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

1
2
$(“#title”).html( );  等同于  document.getElementById("title").innerHTML;

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

jQuery对象与DOM对象的相互转换

DOM对象转jQuery对象

使用$()函数进行转化：$(DOM对象)

1
2
3
var txtName =document.getElementById("txtName"); 
var $txtName =$(txtName);

jQuery对象转DOM对象
jQuery对象是一个类似数组的对象，
可以通过[index]的方法得到相应的DOM对象

1
2
3
var $txtName =$ ("#txtName"); 
var txtName =$txtName[0];

通过get(index)方法得到相应的DOM对象

1
2
var $txtName =$("#txtName"); 
var txtName =$txtName.get(0);

jQuery选择器

jQuery选择器类似于CSS选择器，用来选取网页中的元素

1
2
3
4
5
6
7
$("h3").css("background","#09F");

获取并设置网页中所有<h3>元素的背景
“h3”为选择器语法，必须放在$()中
$(“h3”)返回jQuery对象
.css()是为jQuery对象设置样式的方法

jQuery选择器功能强大，种类也很多，分类如下

通过CSS选择器选取元素

基本选择器
层次选择器
属性选择器

通过过滤选择器选择元素

基本过滤选择器
可见性过滤选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
Alt text

层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素
Alt text

后代选择器

后代选择器用来获取元素的后代元素

1
2
3
$(".textRight p").css("color","red");

设置class为textRight元素中的所有<p>标签的字体全部为红色

子选择器

子选择器用来获取元素的子元素

1
2
$(".textRight>p").css("color","red");

相邻选择器

相邻选择器用来选取紧邻目标元素的下一个元素

1
2
$("h1+p").css(text-decoration","underline");

同辈选择器

同辈选择器用来选取目标元素之后的所有同辈元素

1
2
$("h1~p").css("text-decoration","underline");

属性选择器

属性选择器通过HTML元素的属性来选择元素
Alt text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a标签带有class属性
$("#news a[class]").css("background","#c9cbcb");

class属性值为hot
$("#news a[class='hot']").css("background","#c9cbcb");

class值不等于hot
$("#news a[class!='hot']").css("background","#c9cbcb");

a标签href属性值以www开头
$("#news a[href^='www']").css("background","#c9cbcb");

a标签href属性值以html结尾
$("#news a[href$='html']"). css("background","#c9cbcb");

a标签href属性值包含“k2”的元素
$("#news a[href*='k2']").css("background","#c9cbcb");


过滤选择器

通过特定的过滤规则来筛选出所需的元素

主要分类:

  • 基本过滤选择器
  • 可见性过滤选择器
  • 表单对象过滤选择器
  • 内容过滤选择器、子元素过滤选择器……

基本过滤选择器

Alt text

Alt text

可见性过滤选择器

Alt text

1
2
3
$("p:hidden").show();
$("p:visible").hide();

jQuery选择器的注意事项

特殊符号的转义

1
2
3
4
5
6
7
<div id="id#a">aa</div>
<div id="id[2]">cc</div>


$("#id\\#a");
$("#id\\[2\\]");

选择器中的空格(选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果)

1
2
3
4
5
6
var $t_a = $(".test :hidden"); //带空格的jQuery选择器
选取class为“test”的元素内部的隐藏元素

var $t_b = $(".test:hidden");  //不带空格的jQuery选择器
选取隐藏的class为“test”的元素

文章目录
  1. jQuery简介
  2. jQuery语法
  3. DOM对象和jQuery对象
    1. DOM对象
    2. jQuery对象
    3. jQuery对象与DOM对象的相互转换
  4. jQuery选择器
    1. 基本选择器
    2. 层次选择器
    3. 后代选择器
    4. 子选择器
    5. 相邻选择器
    6. 同辈选择器
    7. 属性选择器
    8. 过滤选择器
    9. 基本过滤选择器
    10. 可见性过滤选择器
  5. jQuery选择器的注意事项
|