一.前言：认识jqury
jqury: jQuery是一个兼容多浏览器的javascript库，提供了大量实用方法,简化了js操作。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器
$( function(){ ... }): 加载完执行
注意：使用jq注意先引入jq库。jq库的版本1（兼容低、高级浏览器） 版本2（兼容高级浏览器）。
|
选择元素：模拟css选择元素，独有的表达式选择，多种筛选方法 jq写法：方法函数化 链式操作 取值赋值合体 与js可以共存，不可以混用 |
二、jqury选择元素
1 JQ的$() 、 CSS()方法
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
| 语法 | 描述 | 实例 |
|---|---|---|
| $("*") | 选取所有元素 | 在线实例 |
| $(this) | 选取当前 HTML 元素 | 在线实例 |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 | 在线实例 |
| $("p:first") | 选取第一个 <p> 元素 | 在线实例 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("[href]") | 选取带有 href 属性的元素 | 在线实例 |
| $("a[target=‘_blank‘]") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 | 在线实例 |
| $("a[target!=‘_blank‘]") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | 在线实例 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 | 在线实例 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 | 在线实例 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 | 在线实例 |
|
Js: 元素.getElementsByTagName(“div”); document.getElementById(“divi”); |
|
jqury选择元素: 模拟css选择元素；和css一样，可以直接操作选中的所有元素 $(“#div1”) 选择一个 $(“.div1i”) 选择一组 $(“#header div”) $(“ul li”) |
2.JQ选择元素的风格跟CSS风格特别类似,，选中的一个或一组元素
|
1 2 3 4 5 6 7 |
JQ选择元素的风格跟CSS风格特别类似,，选中的一个或一组元素//document.getElementById(‘div1‘).style.background = ‘red‘; |
|
2 3 4 5 6 |
<ul> <li>1111</li> <li>1111</li> <li>1111</li> <li>1111</li> </ul> |
|
1 2 3 4 5 6 7 8 |
/* 原生js var aLi = document.getElementsByTagName(‘li‘); // JQ省略循环（jq省略原生的循环操作） //$(‘li‘).css(‘background‘, ‘red‘); //JQ省略原生当中的循环的操作 |
3.$()下的常用方法 1
has() not() filter() next() prev() find() eq() index() css() attr() val()
注意：设置样式 - 使用JSON格式
$(‘li‘).css(
{‘background‘, ‘red‘,
‘font-size‘:‘14px‘
});
4.$()下的常用方法2
addClass() removeClass() width() innerWidth() outerWidth() insertBefore() before() insertAfter() after() appendTo() append() prependTo() prepend() remove() on() off() scrollTop()
5.$()下的常用方法3
hover() show() hide() toggle() fadeIn() fadeOut() fadeTo() slideDown() slideUp()
6事件
实例： $(window).on(" resize scroll" , function(){ ... });
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
常见 DOM 事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
参考：菜鸟教程http://www.runoob.com/jquery/jquery-tutorial.html
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。