[关闭]
@GivenCui 2016-06-15T07:29:40.000000Z 字数 4461 阅读 667

第二课 jQuery基础

jQuery

目录

JS课程合集跳转链接

jQuery语法

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action( )
基础语法： jQuery(selector).action( ) $与jQuery等价

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪事件

为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。
等价于window.onload = function () { // here };

  1. $(document).ready(function(){
  3.    // jQuery methods go here...
  5. }); 
  1. $(function(){
  3.    // jQuery methods go here...
  5. });

jQuery选择器

回顾DOM

一. 重新认识下DOM
DOM是Document Object Model, 文档对象模型,它是javascript和html之间的接口, DOM是典型的树形结构.
二. 节点关系
1. 父节点
2. 子节点
3. 后代节点
4. 兄弟节点
三. 常用的选取元素的方式
1. document.getElementById()
2. document.getElementsByTagName()
3. document.getElementsByName()

jQuery基本选择器

jQuery构造函数, 通过传入CSS选择器作为参数, 能让我们轻松的获得想要的元素或元素集合.

ID选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery的基本选择器</title>
  6.     <script type="text/javascript" src="../../../../../jquery-2.2.3.js"></script>
  7.     <script type="text/javascript">
  8.         // 获得ID为my_p的P元素
  9.         // 
  10.         // JS原生的
  11.         // 
  16.         // jQuery对象和DOM对象的转换
  17.         var p2 = $("#my_p");    // 获得jQuery对象
  18.         console.log(p2.html()); 
  20.         var domP = p2.get(0);   // jQuery对象转换成DOM对象
  21.         console.log(domP.innerHTML);
  23.         var p3 = $(domP);       // DOM对象转换成jQuery对象
  24.         cosole.log(p3);
  26.     </script>
  27. </head>
  28. <body>
  29.     <p>第一个p标签.</p>
  30.     <p id="my_p">my_p标签.</p>
  32. </body>
  33. </html>

元素标签名选择器 (“element”)

语法: $("tagName")
element: 要搜索的元素。引用DOM节点的tagName属性。
在使用这个表达式的时候，会调用了JavaScript的getElementByTagName()函数，以返回适当的元素。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>element demo</title>
  6.   <style>
  7.   div, span {
  8.     width: 60px;
  9.     height: 60px;
  10.     float: left;
  11.     padding: 10px;
  12.     margin: 10px;
  13.     background-color: #eee;
  14.   }
  15.   </style>
  16.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  17. </head>
  18. <body>
  20. <div>DIV1</div>
  21. <div>DIV2</div>
  22. <span>SPAN</span>
  24. <script>
  25. $( "div" ).css( "border", "9px solid red" );
  26. </script>
  28. </body>
  29. </html>

样式类选择器 (“.class”)

语法:$( ".class" )
class: 一个用来搜索的样式类。一个元素可能带有多个样式类；只要有其中一个样式类匹配。

对于选择器，jQuery使用JavaScript的原生getElementsByClassName()函数，如果浏览器支持它的话。

属性选择器

$("[name = 'value']") 获得元素name属性为value的所有元素
选择器表达式中的元素属性值必须遵守W3C CSS选择器的规则；一般来说，这意味着除了有效的标识符之外的别的东西用引号包围起来。
双引号在单引号里面：$('a[rel="nofollow self"]')
单引号在双引号里面：$("a[rel='nofollow self']")
在单引号里面转义单引号：$('a[rel=\'nofollow self\']')
在双引号里面转义双引号：$("a[rel=\"nofollow self\"]")

前端匹配[name^=”value”]
末端匹配[name$=”value”]
多重元素属性选择器 [name=”value”][name2=”value2″]

多重选择器 (“selector1, selector2, selectorN”)

jQuery( "selector1, selector2, selectorN" )
selector1: 任何有效的选择器。
selector2: 任何有效的选择器。
selectorN: 根据你的喜好，添加任意个有效的选择器。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>multiple demo</title>
  6.   <style>
  7.   div, span, p {
  8.     width: 126px;
  9.     height: 60px;
  10.     float: left;
  11.     padding: 3px;
  12.     margin: 2px;
  13.     background-color: #eee;
  14.     font-size: 14px;
  15.   }
  16.   </style>
  17.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  18. </head>
  19. <body>
  21. <div>div</div>
  22. <p class="myClass">p class="myClass"</p>
  23. <p class="notMyClass">p class="notMyClass"</p>
  24. <span>span</span>
  26. <script>
  27. $( "div, span, p.myClass" ).css( "border", "3px solid red" );
  28. </script>
  30. </body>
  31. </html>

后代元素选择器 (“ancestor descendant”)

$( "ancestor descendant" )
ancestor: 任何有效的选择器。
descendant: 一个用来筛选后代元素的选择器。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>descendant demo</title>
  6.   <style>
  7.   form {
  8.     border: 2px green solid;
  9.     padding: 2px;
  10.     margin: 0;
  11.     background: #efe;
  12.   }
  13.   div {
  14.     color: red;
  15.   }
  16.   fieldset {
  17.     margin: 1px;
  18.     padding: 3px;
  19.   }
  20.   </style>
  21.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  22. </head>
  23. <body>
  25. <form>
  26.   <div>Form is surrounded by the green border.</div>
  28.   <label for="name">Child of form:</label>
  29.   <input name="name" id="name">
  31.   <fieldset>
  32.     <label for="newsletter">Grandchild of form, child of fieldset:</label>
  33.     <input name="newsletter" id="newsletter">
  34.   </fieldset>
  35. </form>
  36. Sibling to form: <input name="none">
  38. <script>
  39. $( "form input" ).css( "border", "2px dotted blue" );
  40. $( "form fieldset input" ).css( "backgroundColor", "yellow" );
  41. </script>
  43. </body>
  44. </html>

子元素选择器 (“parent > child”)

$( "parent > child" )
parent: 任何有效的选择器。
child: 一个用来过滤子元素的选择器。
限制了层级关系必须是父子关系

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>child demo</title>
  6.   <style>
  7.   body {
  8.     font-size: 14px;
  9.   }
  10.     </style>
  11.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  12. </head>
  13. <body>
  15. <ul class="topnav">
  16.   <li>Item 1</li>
  17.   <li>Item 2
  18.     <ul>
  19.     <li>Nested item 1</li>
  20.     <li>Nested item 2</li>
  21.     <li>Nested item 3</li>
  22.     </ul>
  23.   </li>
  24.   <li>Item 3</li>
  25. </ul>
  27. <script>
  28. $( "ul.topnav > li" ).css( "border", "3px double red" );
  29. </script>
  31. </body>
  32. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注