什么是jquery？
Jquery是javascript的一个函数库包含以下功能:
-
html元素选取
-
html元素的操作
-
css操作
-
html事件的函数
-
javacript的特效
-
html的遍历和修改
-
ajex
jquery的引用
使用jquery的两种方法
下载对应的jQuery库，从jquery.com进行下载
<head> <script src="jquery-1.10.2.min.js"></script> </head>
2.使用CNN
百度 <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head> 又拍 <head> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> </head> 新浪 <head> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> 谷歌 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head> 微软 <head> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> </head>
jQuery基本语法
jquery语法是通过选取html元素，并对其进行选取元素执行某些操作
基础语法:$(selector).action()
-
美元符号定义jquery
-
selector选择符查询和查找对应html元素
-
jquery的action()执行对元素的操作
$(this).hide()-隐藏当前的元素
$("p").hide()-隐藏所有的<p>元素
$("p.test").hide()-隐藏所有class="test"的<p>元素
$("#test").hide()-隐藏所有id="test"的元素
文档就绪事件
$(document).ready(
function(){
//开始书写对应的jQuery代码
}
)
这样写的原因是：
-
防止文档加载之前运行jQuery代码-在DOM加载完成之后才进行操作
注意:
jQuery入口函数与js入口函数区别
$(document).ready(
function(){
//执行代码
}
)
//或者
$(function(){
//执行代码
})
//javascript入口函数
window.onload=function(){
//执行代码
}
|
|
window.onload
|
$(doucument).read()
|
|
执行时机
|
必须等待网页全部加载完毕，包括图片等
|
只需要等待网页中dom结构加载完毕，就可以执行包裹代码
|
|
执行次数
|
只能执行一次，如果执行两次，那么第一次执行会全部覆盖
|
可以执行多次，第n次都不会被上一次覆盖 |
|
简写方案
|
无
|
$(function(){});
|
Jquery选择器
- jQuery选择器允许对html元素
- jQuery选择器基于元素id、类、属性、属性值等进行查找html元素，它基于已经存在的css选择器。除此之外，它还有一个自定义的选择器。
- jQuery中所有的选择器都是通过美元符号开头$()
元素选择器
<html>
<head>
<title>
初始化jQuery
</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(
function(){
$("p").hide();
}
)
})
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
#id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落</p> <p id="test">这是另外一个段落，id为test</p> <button>点一下我</button> </body> </html>
class选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">这是一个标题</h2> <p class="test">这是一个段落。</p> <p>这是另外一个段落。</p> <button>点我</button> </body> </html>
其他例子
| $("*") | 选择所有的元素 |
| $(this) | 选择当前html元素 |
| $("p.intro") | 选择class为intro的p标签 |
| $("p:first") | 选择第一个<p>元素 |
| $("ul li:first") | 选取第一个<ul>元素的第一个<li>元素 |
| $("ul li:first-child") | 选取每个<ul>元素的第一个<li>元素 |
| $("[href]") | 选取带有href属性的元素 |
| $("a[target="_blank"]") | 选取所有target属性值等于"_blank"的<a>元素 |
| $("a[target!='_blank']") | 选取所有属性值不等于'_blank'的<a>元素 |
| $("tr:even") | 选取偶数位置的<tr>元素 |
| $("tr:odd") |
选取奇数位置的
<tr>元素
|