[关闭]
@mwumli 2016-03-02T07:13:24.000000Z 字数 2456 阅读 1467

JQuery 使用

jquery


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

使用

  1. 在当前需要使用 Jquery HTMl 文件中引入 JQuery

    <script src="jquery.min.js"></script>
    
  2. script 标签的 $(function(){ }) 中就可以使用 JQuery 提供的各种方法

例如 :

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

最基本的 $ 方法

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

所以总结下来 :

  1. 只有 JQuery 对象才能使用 JQuery 的其他方法
  2. $ 方法可以根据提供的选择器,找到相应的 Dom 元素, 返回一个 JQuey 对象
  3. 所谓的 JQuery 对象其实就是一个数组
    如果选择器对应一个元素, 那么返回肯定是一个元素的数组 [dom1]
    如果选择器对应多个元素,那么返回肯定是多个Dom元素的数组 [dom1, dom2 ...]
  4. $ 方法可以把一个 dom 对象直接变成一个 JQuery 对象
  5. 如果我们想对选择器对应的多个元素中的某个元素使用 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 元素内容

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

设置 HTMl 属性

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

  1. 设置一个属性值 : $(selector).attr("title", "这是个标题")
  2. 设置多个属性值 :
  1. $(selector).attr({
  2. "title" : "这是个标题",
  3. "href" : "这是个链接"
  4. })

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

CSS 的操纵

  1. addClass()/removeClass()/toggleClass() 添加 class/删除 class/ 切换 class
  1. $("p").addClass("red"); 添加一个 class red
  2. $("p").addClass("red blue"); 添加两个 class red blue
  3. $("p").removeClass("red blue"); 删除两个 class red blue
  1. css() 设置或获取 指定css 的值
    这个使用方法和 attr() 相似

遍历

  1. parent() 返回被选元素的直接父元素
  2. parents() 返回被选元素的所有祖先元素 ,一路向上直到文档的根元素 ()
  3. children() 返回被选元素的所有直接子元素
  4. find() 返回被选元素的后代元素,一路向下直到最后一个后代
  1. $("span").parent(); // span 的直接父元素
  2. $("span").parents(); // span 的所有父元素
  3. $("span").parents('p'); // span 的所有父元素中的 p 元素(参数可以传一个选择器来进行过滤)
  4. $("div").children(); // div 元素下的所有直接子元素
  5. $("div").children('.hello'); // div 元素下的所有直接子元素中的 class 是 hello 的元素
  6. $("div").find("span"); // div 元素下的所有 span 元素
  7. $("div").find("*"); // div 元素下的所有后代元素
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注