jQuery知识大杂汇

1.jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

举几枚栗子吧：

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

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

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

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

2.文档就绪事件：所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
   // 开始写 jQuery 代码...
});

为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

这个文档就绪事件是有简洁写法的哦！

$(function(){
   // 开始写 jQuery 代码...
});

还有一种写法(⊙o⊙)哦

$(document).on('ready',function(){
   //开始写jQuery代码...
})

3.jQuery 中所有选择器都以美元符号开头：$()。

4.jQuery选择器

5.要把jQuery代码放入单独的js文件，通过script的src属性引用。

6.mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

7.mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

8.mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

9.mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

10.hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

11.focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

12.blur()

当元素失去焦点时，发生 blur 事件。

13.需要注意在jQuery中，this也需要放入$(this)工厂函数里。

14.jQuery中DOM常用事件：

15.注意，在选区多个元素操作时，要用逗号隔开，而不是空格。

栗子：

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

16.jQuery在设置css属性是，如果是多个属性值一起设置，要注意，属性名和值都要放在引号内(⊙o⊙)哦

css({"propertyname":"value","propertyname":"value",...});

栗子：

$("p").css({"background-color":"yellow","font-size":"200%"});

17.jQuery获取尺寸的问题

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

18.jQuery的文档就绪事件的三种书写方式：

$(document).ready(function(){});

$().ready(function(){});

$(function(){})