JQuery教程

JQuery教程

---

一、简介

概述

jQuery 是一套兼容多浏览器的 javascript 脚本库.。核心理念是写得更少，做得更多，使用 jQuery 将
极大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更
加健壮，"如虎添翼"。同时网络上丰富的 jQuery 插件，也让我们的工作变成了"有了 jQuery，一切 so
easy。" -- 因为我们已经站在巨人的肩膀上了。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

优点

• 提供了强大的功能函数
• 解决浏览器兼容性问题
• 实现丰富的 UI 和插件
• 纠正错误的脚本知识
  ......

二、安装与使用

官网地址

jquery.com

版本区别

• 完整版（学习版本） : jquery-2.1.4.js
• 压缩版（开发版本） : jquery-2.1.4.min.js

页面引入

三、JQuery核心

$ 符号在 jQuery 中代表对 jQuery 对象的引用， "jQuery"是核心对象。通过该对象可以获取jQuery
对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。$<==>JQuery

四、Dom对象与JQuery包装集对象

Dom对象：通过js代码获取的对象
JQuery包装集对象：通过JQuery获取的对象

var div = document.getElementById("testDiv"); //Dom对象
var jQueryObject = $("#testDiv"); //JQuery包装集对象

Dom对象与JQuery包装集对象的转换

Dom 对象转为 jQuery 对象，只需要利用 $() 方法进行包装即可

var domDiv = document.getElementById('mydiv');// 获取Dom对象
mydiv = $(domDiv); //转换为JQuery包装集对象

jQuery 对象转 Dom 对象，只需要取数组中的元素即可

jqueryDiv = $('#mydiv'); //获取JQuery对象
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为Dom对象

五、JQuery选择器

基础选择器

• id选择器（#id）

• 元素名称选择器(element)

• 类选择器(.class)

• 选择所有元素(*)

• 组合选择元素(selector1,selector2,...)

  $("#id") //id选择器
  $("div") //元素名称选择器
  $(".classname") //类选择器
  $("*") //选择所有元素
  $(".classname,.classname1,#id1") //组合选择器

层次选择器

选择器	实例	选取
后代选择器	$("#parent div")	选择id为parent的元素的所有div元素
子代选择器	$("#parent>div")	选择id为parent的直接div子元素
相邻选择器	$(".blue + img")	选择css类为blue的下一个img元素
同辈选择器	$(".blue ~ img")	选择css类为blue的之后的img元素

表单选择器

选择器	实例	选取
表单选择器	$(":input")	匹配所有 input, textarea, select 和 button 元素
文本框选择器	$(":text")	查找所有文本框
密码框选择器	$(":password")	查找所有密码框
单选框按钮选择器	$(":radio")	查找所有单选按钮
复选框选择器	$(":checkbox")	查找所有复选框
提交按钮选择器	$(":submit")	查找所有提交按钮
图像域选择器	$(":image")	查找所有图像域
重置按钮选择器	$(":reset")	查找所有重置按钮
按钮选择器	$(":button")	查找所有按钮
文本域选择器	$(":file")	查找所有文件域

六、JQuery Dom操作

jQuery 中非常重要的部分就是操作 DOM(Document Object Model)的能力。这是在原生js的基础之上进行了优化，使用起来更加方便。
注意：以下的操作方式只适用于jQuery对象。

操作元素的属性

attr(属性名称)：获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。
attr(属性名称，属性值)：设置指定的属性值
prop(属性名称)： 获取具有true和false两个属性的属性值
prop(属性名称，属性值)：设置具有true和false的属性值
removeAttr(属性名)：移除指定的属性

1.attr()

2.prop()

---

百度
新浪
全选

Tips：

1. 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法
2. 对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法
3. 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

操作元素的样式

attr("class")： 获取class属性的值，即样式名称
attr("class","样式名")：修改class属性的值，修改样式
addClass("样式名")： 添加样式名称
css()： 添加具体的样式
removeClass(class)： 移除样式名称

css()方法设置元素样式

天蓝色

大红色

天蓝色

操作元素的内容

html(): 获取元素的html内容
html("html, 内容"): 设定元素的html内容
text(): 获取元素的文本内容，不包含html
text("text 内容"): 设置元素的文本内容，不包含html
val(): 获取元素value值
val("值"): 设定元素的value值

html()和text()方法设置元素内容

Tips：
text()方法仅获取元素的内容，而html()方法连同标签一起获取

创建元素

$('元素内容')：直接创建元素

$('<p>this is a paragraph!!!</p>');

添加元素

prepend(content)： 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、 HTML 元素标记。
$(content).prependTo(selector)： 把 content 元素或内容加入 selector 元素开头
append(content)： 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、 HTML 元素标记。
$(content).appendTo(selector)： 把 content元素或内容插入selector 元素内，默认是在尾部
before(): 在元素前插入指定的元素或内容:$(selector).before(content)
after(): 在元素后插入指定的元素或内容:$(selector).after(content)

prepend()方法前追加内容

prependTo()方法前追加内容

append()方法后追加内容

appendTo()方法后追加内容

男神
偶像

小鲜肉

Tips:

1. append/prepend 是在选择元素内部嵌入。
2. after/before 是在元素外面追加。

移除元素

remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删
empty() 清空所选元素的内容

删除元素

jquery删除
javase
http协议
servlet

遍历元素

each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数
index 为遍历元素的序列号，从 0 开始
element是当前的元素，此时是dom元素

遍历元素 each()

jquery
javase
http协议
servlet

七、JQuery事件

事件类型：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error

常见事件举例：

//鼠标单击事件
$("p").click(function(){
$(this).hide();
});

//鼠标双击事件
$("p").dblclick(function(){
$(this).hide();
});

//聚焦事件
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});

//离焦事件
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

八、JQuery Ajax

AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
常用方法有：$.ajax()、$.get()、$.post()

$.ajax()

语法：$.ajax({name:value, name:value, ... })
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

$.ajax({
type:"get",
url:"js/cuisine_area.json",
async:true,
success : function (msg) {
var str = msg; console.log(str);
$('div').append("

");
for(var i=0; i<msg.prices.length;i++){
$('ul').append("

");
$('li').eq(i).text(msg.prices[i]);
}
},
error : function (errMsg) {
console.log(errMsg);
$('div').html(errMsg.responseText);
}
});

$.get()

语法：$.get(URL,data,function(data,status,xhr),dataType)
参数：
URL: 必需。规定您需要请求的 URL。
data: 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr): 可选。规定当请求成功时运行的函数。
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType: 可选。规定预期的服务器响应的数据类型。

//请求 "test.php"，但是忽略返回结果：
$.get("test.php");
//请求 "test.php" 并连同请求发送一些额外的数据（忽略返回结果）：
$.get("test.php", { name:"Donald", town:"Ducktown" });
//请求 "test.php" 并传递数据数组到服务器（忽略返回结果）：
$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });
//请求 "test.php" 并提醒请求的结果：
$.get("test.php", function(data){
alert("Data: " + data);
});

$.post()

语法：$(selector).post(URL,data,function(data,status,xhr),dataType)
参数：
URL: 必需。规定您需要请求的 URL。
data: 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr): 可选。规定当请求成功时运行的函数。
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType: 可选。规定预期的服务器响应的数据类型。

$("button").click(function(){
$.post("demo_test.html",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});