jQuery使用(一）

jQuery中文手册

• jQuery中文文档

---

关于jQuery

• jQuery是一个js库
• jQuery可以简化js操作
• 建议查看jQuery源代码

---

jQuery语法

• 基础语法：

  $(selector).action()
  

  • $代表jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

jQuery组件

• 选择器

  • id 选择器$('#id')
  • 类 选择器$(".class")
  • 通配 选择器$("*")
  • 并列 选择器$("selector1,selector2,selector3,")
  • 后代 选择器$("ancestor descendant")
  • 子元素 选择器$("parent > child"),选取parent的第一个子元素
  • 匹配所有跟在pre后面的 next 元素,$("pre+next")
  • 同辈 选择器$("pre fellow"),选取与pre同辈的fellow元素
  • 获取第一次出现的元素$("li:first")/最后一次出现的元素$("li:last"),获取第一个li元素/最后一个li元素
  • 匹配所有索引值为偶数enev/奇数odd/指定索引eq(index)/大于gt(index)/小于lt(index)的元素，从 0 开始计数$("tr:even")/$("tr:odd")

    <table>
     <tr><td>Header 1</td></tr>
     <tr><td>Value 1</td></tr>
     <tr><td>Value 2</td></tr>
    </table>
    <script>
    	$("tr:even");
    	/*选中下面两个元素
    	 <tr><td>Value 1</td></tr>
    	 <tr><td>Value 2</td></tr>
    	*/
    </script>
    

  • 匹配标题元素$(":header")
  • 匹配包含给定文本的元素:contains(text)
  • 匹配所有不包含子元素或者文本的空元素:empty
  • 匹配含有选择器所匹配的元素的元素:has(selector)
  • 匹配所有不可见元素，或者type为hidden的元素:hidden
  • 属性选择器：
    • 匹配包含给定属性的元素element[attribute]
    • 匹配给定的属性是某个特定值的元素element[attribute=value]
    • 匹配给定的属性是以某些值开始 的元素element[attribute^=value]
    • 匹配给定的属性是以某些值结束 的元素element[attribute$=value]
    • 匹配给定的属性包含value 的元素element[attribute*=value]
    • 复合属性选择器([])$("input[id][name$='man']")//找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
    • 匹配所给选择器( :之前的选择器)的第一个子元素firsr-child/最后一个子元素last-child,第n个元素nth-child(n|even|odd|formula)

      $("ul li:first-child")	//在每个 ul 中查找第一个 li
      

• jQuery常用函数

  • 命名冲突(默认$为jQuery的别名）

    var jq=jQuery.noConflict()
    

  • $(element,{description}.append(element1)
    向element1元素追加element的html代码
  • $(document).ready(function)文档加载完成后执行的函数
  • $(seclector).each(function())对匹配到的每一个元素都执行function函数中的内容

    <!--html-->
    <div id="class1">class1</div>
    <div id="class2">class2</div>
    <!--script-->
    <script>
    	$('div').each(function(index, el){
    		el.innerHTML = "<p>" + index +"times.</p>";
    	})
    

    补充知识:this与$(this)的区别：
    上述案例中this为当前获取的div对象，而$(this)是为此html创建一个jQuery对象，此处jQuery对象没有innerHTML属性，所以会报错。·each(function(index,el){}),此处的index为选取到的对象索引，而el为选取的元素.
  • $(seclector).length返回匹配到的元素个数
  • $(seclector).get(index)返回第index个dom元素,而$(seclector:eq())返回的是jQuery对象。
  • data([key],[value])在元素上存放或读取数据,返回jQuery对象。$('div').data([key],[value])在一个div上存取名/值对数据.removedata同理。
  • on(events,[selector],[data],fn)
    • events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
    • selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的null或省略，当它到达选定的元素，事件总是触发。
    • data:当一个事件被触发时要传递event.data给事件处理函数。
    • fn:该事件被触发时执行的函数。
  • hover([overfunction(),]outfunction()),第一个参数为移入时触发的函数，第二个参数为移除时触发的函数。
  • toggle([speed],[easing],[fn])