一、jQuery介绍和安装
1、jQuery简介
jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库,是JavaScript的一个框架
它就是把JavaScript的代码封装好了，导入调用即可使用
2、jQuery安装和引用
jQuery安装基本说明
- 下载注意事项
- 1.x版本：兼容IE8以下（用的最多的）
- 2.x版本：不兼容IE8以下
- 3.x版本：不兼容IE8以下
安装好了之后，可以看到文件里有两个文件
可以看到， jquery-1.10.2.min.js 的文件大小只有91KB，这是里面的代码没有任何的格式，都堆积在一起，没有空格；而jquery-1.10.2.js 文件的大小虽然比较大些，但是它的代码逻辑都是比较清楚的，格式比较规范。
但是两个文件都可以使用，喜欢用体积大的或者体积小的就看个人习惯~
jQuery引用
- 下载Jquery库到本地后，引用本地文件，以下为引用方法
- 复制jquery-1.10.2.min.js文件，并粘贴到和即将使用的html文件的同目录下
二、jQuery语法和使用
1、jQuery语法
基础语法：$(selector).action()
- $符号代表定义jQuery
- 选择符(selector)"查询"和“查找”HTML元素
- jQuery的action()执行对元素的操作
2、jQuery使用
文件就绪事件
- 第一种写法
使用时所有jQuery函数位于document ready函数中
1. $(document).ready(function(){ 2. // 开始写 jQuery 代码... 3. });
- 第二种写法（简洁写法）
1. $(function(){ 2. // 开始写 jQuery 代码... 3. });
- jQuery和JavaScript的对比
1. //JavaScript 2. window.onload = function () { 3. //网页资源（dom结构，图片）都加载完之后才会执行这个里面的代码 4. //在一个页面中只能写一次，后面的会把前面的内容覆盖掉 5. } //jQuery $(function () { //只用加载dom结构就会执行这个里面的代码 //里面可以有多个 })
jQuery语法使用
- 语法示例
- $(this).hide()--隐藏当前元素
- $("p").hide()--隐藏所有元素
- $(".test").hide()--隐藏所有class="test"的元素
- $("#test").hide()--隐藏,id="test"的元素
代码演示 ：
通过引入js文件，然后通过 $("div").hide()隐藏div元素
- 首先通过一个script标签引入js文件，这个script标签只是用来引入文件，如果要写代码的话要另起炉灶，重新建立一个script标签，在里面写代码
先运行，查看结果，可看到页面中出现div元素的内容
- 然后在第二个script标签中写入隐藏div标签的语句
- 刷新页面，查看结果，发现div元素已经被隐藏
附上原操作代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></script> <script> $(function () { $("div").hide(); }) </script> </head> <body> <div> 这是div </div> </body> </html>
三、jQuery选择器
jQuery中分有三种选择器，分别为：
- 元素选择器
- id选择器
- class选择器
1、元素选择器
通过元素选择器实现鼠标点击后，隐藏内容的功能
首先，通过 <input type="button" value="点我隐藏"> 设置一个按钮，然后再写入一个p标签
接着在第二个script标签中写入一个文件就绪事件：$(function () {})，并在这一事件中通过元素选择器找到input元素
然后给input元素设置一个点击事件：$('input').click(function () {})
最后在这个点击事件中再次通过元素选择器找到p元素，给p元素设置一个隐藏功能：$('p').hide();
这就像是一个函数嵌套，当代码运行时，会等到其他元素加载完之后才会执行 $(function () {}) 内的代码，然后等鼠标点击按钮时（也就是执行了点击事件：
$('input').click(function () {})），会运行到 $('p').hide(); 然后隐藏p标签的内容
- 附上原操作代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></script> <script> //加载 $(function () { //通过元素选择器 //找到input标签，click为点击事件 $('input').click(function () { $('p').hide(); }) }) </script> </head> <body> <input type="button" value="点我隐藏"> <p> 这是内容 </p> </body> </html>
2、id选择器
id选择器的使用方法同元素选择器相同，只不过将$('p').hide();中的p换成一个id，比如：$('#div1').hide(); （#号表示获取的是id，#后的内容就是id的值）
- 附上原操作代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></script> <script> //加载 $(function () { //通过id选择器 //找到input标签，click为点击事件 $('input').click(function () { $('#div1').hide(); }) }) </script> </head> <body> <input type="button" value="点我隐藏"> <p id="div1"> 这是内容 </p> </body> </html>
3、class选择器
id选择器的使用方法同元素选择器相同，只不过将$('p').hide();中的p换成一个class，比如：$('.class').hide(); （. 表示获取的是class，. 后的内容就是class的值）
- 附上原操作代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></script> <script> //加载 $(function () { //通过id选择器 //找到input标签，click为点击事件 $('input').click(function () { $('.cla1').hide(); }) }) </script> </head> <body> <input type="button" value="点我隐藏"> <p class="cla1"> 这是内容 </p> </body> </html>
