jquery基础和事件

jQuery介绍

(1)、JavaScript与jQuery比较

js:  1、入口函数只有一个，window.onload

1. 浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
2. DOM错综复杂，实现简单的效果很麻烦
3. 代码容错性差，出错后导致后面的代码不执行

jQuery:  1、市场占有率稳步上升，代码比较少，功能强大

2、DOM比较强大，事件处理，完全解决了浏览器的兼容性问题

3、ajax操作（比较好）

(2)、什么是jQuery

1、jQuery是一个JavaScript函数库。

2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。

(3)、为什么使用jQuery

1、目前网络上有大量开源的 JS 库, 但是 jQuery 是目前最流行的 JS 库，而且提供了大量的扩展。

2、很多大公司都在使用 jQuery， 例如:Google、Microsoft、IBM、Netflix。

3、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

​​​​​​​jQuery语法

(1)、基础语法

1、美元符号定义 jQuery

2、选择符（selector）"查询"和"查找" HTML 元素

3、jQuery 的 action() 执行对元素的操作。

(2)、实例

1、您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){ 

// 开始写 jQuery 代码... }

);

2、简洁写法（与以上写法效果相同）:

$(function(){ 

// 开始写 jQuery 代码... 

})

​​​​​​​1.3.3了解jQuery的$符号

$是什么

其实$就是一个函数：$();参数不一样，功能不一样

$常用的几种情况：

$(function() {});//参数是function，说明是入口函数

$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素

$(“div”);//查找所有的div元素

$(document).ready(funciton(){})//将document转换成jQuery对象

(4)、jQuery 入口函数与 JavaScript 入口函数的区别

 jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

 JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

​​​​​​​JQuery选择器

基本选择器

层级选择器

过滤选择器 筛选选择器（方法） 

​​​​​​​jQuery事件

(1)、什么是事件

1、页面对不同访问者的响应叫做事件。

2、实例：在元素上移动鼠标、选取单选按钮、点击元素

(1)、事件语法

1、单击事件

$("p").click(function(){ 

// 动作触发后执行的代码!! 

});

1. 双击事件

$("p").dblclick(function(){

  $(this).hide();

})

3、鼠标进入

$("#p1").mouseenter(function(){

alert('您的鼠标移到了 id="p1" 的元素上!');

});

4、鼠标离开

$("#p1").mouseleave(function(){

alert("再见，您的鼠标离开了该段落。");

});

5、获取焦点

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

6、失去焦点

$("input").blur(function(){

$(this).css("background-color","#ffffff");

});

jQuery css() 方法

(1)、jQuery css() 方法是什么

css() 方法设置或返回被选元素的一个或多个样式属性。

(2)、返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

$("p").css("background-color");

(3)、设置CSS属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

$("p").css("background-color","yellow");

(4)、设置多个CSS属性

如需设置多个 CSS 属性，请使用如下语法：

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

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