jQuery知识点1

1、使用jQuery前先引入jQuery库的js文件，然后直接使用即可。你可以前往官方网站下载jQuery库的js文件，你也可以直接如下在HTML页面中引入该文件的URI。

<!-- 引入jQuery库的js文件 -->
<script src="../jquery-3.0.0.js" type="text/javascript"></script>

<!-- 编写JS代码并使用jQuery -->
<script type="text/javascript">
......
</script>

2、使用jQuery 选择器选取元素，并封装为jQuery对象

$("#uid"); // 选取id属性为"uid"的单个元素
$(document)//选择整个文档对象  
$('#myId')//选择ID为myId的网页元素  
$('div.myClass')//选择class为myClass的div元素  
$('input[name=first]')//选择name属性等于first的input元素  
$("p"); // 选取所有的p元素
$(".test"); // 选择所有带有CSS类名"test"的元素
$("[name=books]"); // 选择所有name属性为"books"的元素
// 多个选择器以空格或指定符号隔开，将匹配与前者具有指定关系的最后一个选择器所表示的元素
$("#uid span"); // 选择id为"uid"的元素的所有后代span元素
$("p > span"); // 选择p元素的所有子代span元素
$("div + p"); // 选择div元素后面紧邻的同辈p元素
$("div p span"); // 选择div元素的所有后代p元素的后代span元素
// 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素
$("p#uid"); // 选择id属性为"uid"的p元素
$("div.foo"); // 选择所有带有CSS类名"foo"的div元素
$(".foo.bar"); // 选择所有同时带有CSS类名"foo"和"bar"的元素
$("input[name=books][id]"); // 选择所有name属性为"books"并且具备id属性的元素
// jQuery特有的选择器，当然也可以和其他选择器任意组合使用
$(":checkbox"); // 选取所有的checkbox元素
$(":text"); // 选取所有type为text的input元素
$(":password"); // 选取所有type为password的input元素
$(":checked"); // 选取所有选中的radio、checkbox、option元素
$(":selected"); // 选取所有选中的option元素
$(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)

3、过滤器，根据jQuery对象来筛选指定的元素。

// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素
$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
$("ul li").first(); // 选取ul li中匹配的第一个元素
$("ul li").last(); // 选取ul li中匹配的最后一个元素
$("ul li").slice(1, 4); // 选取第2 ~ 4个元素
$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素
$("div").find("p"); // 选取所有div元素的所有后代p元素
$("div").children(); // 选取所有div元素的所有子代元素
$("div").children("p"); // 选取所有div元素的所有子代p元素
$("span").parent(); // 选取所有span元素的父元素
$("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素
$("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素
$("#uid").next(); // 选取id为uid的元素之前紧邻的同辈元素

4、链式编程风格

// jQuery的链式编程风格
$("div").find("ul").addClass("menu").children().css("margin", 0).hide();

// 以下是上述代码的分解描述
$("div") // 返回一个匹配所有div元素的jQuery对象
.find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象
.addClass("menu") // 为这些ul元素添加CSS类名"menu"，并返回当前对象本身
.children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象
.css("margin", 0) // 为这些子代元素设置css样式"margin: 0"，并返回当前对象本身
.hide(); // 隐藏这些子代元素，并返回当前对象本身

5、属性操作

// selector 表示具体的选择器

$("selector").val(); // 获取第一个匹配元素的value值(一般用于表单控件)
$("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"

$("selector").html(); // 获取第一个匹配元素的innerHTML值
$("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"

$("selector").text(); // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理)
$("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"

$("selector").attr("class"); // 获取第一个匹配元素class属性
$("selector").attr("class", "code"); // 设置所有匹配元素的class属性为"code"
$("selector").removeAttr("class"); // 移除所有匹配元素的class属性

$("selector").prop("checked"); // 获取第一个匹配元素的checked属性值
$("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)
$("selector").removeProp("className"); // 移除所有匹配元素的className属性

6、文档处理

// 以下$A均表示当前jQuery对象，$B可以是选择器字符串、html字符串、DOM元素、jQuery对象

$A.before( $B ); // 在$A之前插入$B
$A.after( $B ); // 在$A之后插入$B

$A.insertBefore( $B ); // 将$A插入到$B之前的位置
$A.insertAfter( $B ); // 将$A插入到$B之后的位置

$A.append( $B ); // 在$A内部的末尾位置追加$B
$A.appendTo( $B ); // 将$A追加到$B内部的末尾位置

$A.prepend( $B ); // 在$A内部的开头位置追加$B
$A.prependTo( $B ); // 将$A追加到$B内部的开头位置

$A.replaceAll( $B ); // 用$A替换$B
$A.replaceWidth( $B ); // 用$B替换$A

$A.wrap( $B ); // 在$A的外侧包裹$B
$A.unwrap( ); // 只移除$A的父元素的标签
$A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来
$A.wrapInner( $B ); //在$A的内侧包裹$B

$A.empty(); // 清空$A的所有内容
$A.remove(); // 删除$A及其绑定的事件、附加数据等
$A.detach(); // 删除$A，但保留其绑定的事件、附加数据等

$A.clone(); // 克隆一个$A

7、工具方法

$.trim()  //去除字符串两端的空格。
$.each() //遍历一个数组或对象。  
$.inArray() //返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。  
$.grep() //返回数组中符合某种标准的元素。   
$.extend() //将多个对象，合并到第一个对象。   
$.makeArray() //将对象转化为数组。  
$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。  
$.isArray() //判断某个参数是否为数组。  
$.isEmptyObject() //判断某个对象是否为空（不含有任何属性）。  
$.isFunction() //判断某个参数是否为函数。  
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象。  
  $.support() //判断浏览器是否支持某个特性。  

8、jQuery核心：事件处理

 // selector 表示具体的选择器
  $("selector").blur() //表单元素失去焦点。  
  .change() //表单元素的值发生变化  
  .click() //鼠标单击  
  .dblclick() //鼠标双击  
  .focus() //表单元素获得焦点  
  .focusin() //子元素获得焦点  
  .focusout() //子元素失去焦点  
  .hover() //同时为mouseenter和mouseleave事件指定处理函数  
  .keydown() //按下键盘（长时间按键，只返回一个事件）  
  .keypress() //按下键盘（长时间按键，将返回多个事件）  
  .keyup() //松开键盘  
  .load() //元素加载完毕  
  .mousedown() //按下鼠标  
  .mouseenter() //鼠标进入（进入子元素不触发）  
  .mouseleave() //鼠标离开（离开子元素不触发）  
  .mousemove() //鼠标在元素内部移动  
  .mouseout() //鼠标离开（离开子元素也触发）  
  .mouseover() //鼠标进入（进入子元素也触发）  
  .mouseup() //松开鼠标  
  .ready() //DOM加载完成  
  .resize() //浏览器窗口的大小发生改变  
  .scroll() //滚动条的位置发生变化  
  .select() //用户选中文本框中的内容  
  .submit() //用户递交表单  
  .toggle() //根据鼠标点击的次数，依次运行多个函数  
  .unload()