@mwumli 2016-03-02T15:13:24.000000Z 字数 2456 阅读 1635

JQuery 使用

jquery

JQuery 没有什么神秘的，只是一个提供了 $ 方法以及基于 $ 对象的函数库
本质还是 js
它被称为开发利器，因为提供了非常简单 dom 对象的查找以及非常实用的函数

使用

在当前需要使用 Jquery HTMl 文件中引入 JQuery
```
<script src="jquery.min.js"></script>
```
在 script 标签的 $(function(){ }) 中就可以使用 JQuery 提供的各种方法

例如 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>使用 Jquery</title>
    <link rel="stylesheet" href="jquery.min.js">
</head>
<body>
    <script type="text/javascript">
        $(function(){
			// 在这里就可以使用 JQuery 的写代码了
			// 使用 JQuery 中方法，必须首先使用 `$()` 方法查找 dom 元素  
			// 基于 $() 返回的对象来使用JQuery 的其他方法(隐藏，显示...)
        })
    </script>
</body>
</html>

最基本的 $ 方法

$(selector)
根据你的选择器，在当前网页中查找 dom 节点, 返回一个 JQuery 对象

为什么被称为 JQuery 对象?

因为 JQuery 的其他的方法几乎都是基于此对象使用的，例如 $("#hello").hide(), 就是对 id 为 hello 的元素隐藏
但为什么有时候会这样使用 $($("p")[0]).show() ?

首先, 这段代码的意思是把当前找到的所有 p 节点中第一个 p 节点隐藏
show() 是 JQuery 中的方法, 只能由 JQuery 对象来调用
$ 方法返回的是一个数组, $("p")[0] 就是取其中第一个元素, 而数组中的每一个元素都是原生 dom 节点 , 因此 $("p")[0] 返回只能是 js 原生 dom 节点
$ 方法中放入一个原生的 Dom 节点，会自动转化成 JQuery 对象
所以我们需要把 dom 节点重新放入 $ 方法中变成一个JQuery 对象, 就像现在这样 $($("p")[0])
最后，隐藏找到的 p 节点吧 $($("p")[0]).show()

所以总结下来 :

只有 JQuery 对象才能使用 JQuery 的其他方法
$ 方法可以根据提供的选择器，找到相应的 Dom 元素, 返回一个 JQuey 对象
所谓的 JQuery 对象其实就是一个数组
如果选择器对应一个元素, 那么返回肯定是一个元素的数组 [dom1]
如果选择器对应多个元素，那么返回肯定是多个Dom元素的数组 [dom1, dom2 ...]
$ 方法可以把一个 dom 对象直接变成一个 JQuery 对象
如果我们想对选择器对应的多个元素中的某个元素使用 JQuery 方法，那么通常这样 $($(selector)[index]) : 先取出 index 对应的 dom 元素, 然后把它封装成一个只有一个dom元素的 JQuery 对象

效果方法

就是实现一种动画效果

1, hide()/show()/toggle() 隐藏/显示/隐藏时显示，显示时隐藏
2. fadeIn()/fadeOut()/fadeToggle() 淡入/淡出/消失时淡入，显示时淡出
3. slideDown()/slideUp()/slideToggle() 向下滑动出现/向上滑动消失/切换前两种效果

这些函数都有两个参数,当然不填也没关系,会使用默认值 :
1. 第一个参数 : 实现这些效果的速度, 三个值 "slow", "fast", 1000(毫秒)
2. 第二个参数 : 回调函数, 当这些效果完成后执行这个函数

Dom 元素操纵

获取 dom 元素内容

text() 设置或返回所选元素文本内容
html() 设置或返回所选元素所有内容，包含HTML
val() 设置或返回表单字段的值(比如 input)

这三个方法如果不传参数, 就是获取内容
传了参数就是设置内容，字符串

设置 HTMl 属性

attr() -- 为元素设置或获取HTML的属性，比如 title, href 等等

设置一个属性值 : $(selector).attr("title", "这是个标题")
设置多个属性值 :

$(selector).attr({
    "title" : "这是个标题",
    "href" : "这是个链接"
})

当你值传入一个字符串的时候，就是获取该字符串所对应的的属性值, 比如 $(selector).attr("title")

CSS 的操纵

addClass()/removeClass()/toggleClass() 添加 class/删除 class/ 切换 class

$("p").addClass("red"); 添加一个 class red  
$("p").addClass("red blue"); 添加两个 class red  和 blue  
$("p").removeClass("red blue"); 删除两个 class red  和 blue

css() 设置或获取指定css 的值
这个使用方法和 attr() 相似

遍历

parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素，一路向上直到文档的根元素 ()
children() 返回被选元素的所有直接子元素
find() 返回被选元素的后代元素，一路向下直到最后一个后代

$("span").parent()； // span 的直接父元素
$("span").parents(); // span 的所有父元素
$("span").parents('p'); // span 的所有父元素中的 p 元素(参数可以传一个选择器来进行过滤)
$("div").children(); // div 元素下的所有直接子元素
$("div").children('.hello'); // div 元素下的所有直接子元素中的 class 是 hello 的元素
$("div").find("span"); // div 元素下的所有 span 元素 
$("div").find("*"); // div 元素下的所有后代元素