JQuery用法

JQuery
优点 :
（1）提供了强大的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识…

1、Jquery对象
$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对 象。

通过该对象可以获取jQuery对象，调用jQuery提供的方法等。

只有jQuery对象才能调用jQuery提供的方法。

 $ <==> jQuery
1
Jquery的使用
在页面引入即可：

Dom对象与Jquery包装集对象
Dom对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：
var div = document.getElementById(“testDiv”);
var divs = document.getElementsByTagName(“div”);

Jquery包装集对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元 素的 jQuery 包装集：
var jQueryObject = $(“#testDiv”);

Dom对象 转 Jquery对象
Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var domDiv = document.getElementById(‘mydiv’);
// 获取Dom对象
mydiv = $(domDiv);

Jquery对象 转 Dom对象
jQuery对象转Dom对象，只需要取数组中的元素即可 :
// 第一种方式 获取jQuery对象
var jqueryDiv = jQuery(‘#mydiv’);
// 第二种方式 获取jQuery对象
jqueryDiv = $(‘#mydiv’);
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象 :
$(‘#mydiv’).each(function() {//遍历
var jquery = $(this);
});

原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象；
而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供而的方法。
2、Jquery选择器
jQuery中提供的简便的方式，供我们查找|定位元素。

基础选择器
id选择器 #id

$(“#testDiv”)选择id为testDiv的元素
元素名称选择器 element

$(“div”)选择所有div元素
类选择器 .class

$(“.blue”)选择所有class=blue的元素
选择所有元素 *

$(“*”)选择页面所有元素
组合选择器 selector1,selector2,selectorN

$(“#testDiv,span,.blue”)同时选中多个选择器匹配的元素
层次选择器

表单选择器

3、Jquery Dom操作
提供对HTML节点的操作，优化原生js；
注意：以下的操作方式只适用于jQuery对象。

操作元素的属性
 
 
1.attr()
 
 设置或者返回元素的属性 ; 
 
2.prop()
 
 设置 具有 true 和 false 两个属性的属性， 
如 checked, selected 或者 disabled。 
 
百 度 新 浪 全选
console.log($(‘:checkbox’).attr(‘checked’));
// 获取属性值：prop
// 若未选中显示false，选中显示 true

console.log(( " : c h e c k b o x " ) . p r o p ( ′ c h e c k e d ′ ) ) ; c o n s o l e . l o g ( (":checkbox").prop('checked')); console.log((":checkbox").prop( 
′
 checked 
′
 ));console.log((‘#a2’).prop(‘href’))
// 设置属性值

$(‘#a1’).attr(‘href’,‘https://jquery.com’);
$(“:checkbox”).prop(“checked”,false);
// 移除属性
$(‘#a2’).removeAttr(‘href’);
获取属性

aa bb
attr（属性名称）

获取指定的属性值，操作checkbox 时：
选中返回 checked，没有选中返回 undefined。

attr(‘checked’)
attr(‘name’)
prop（属性名称）

获取具有true和false两个属性的属性值

prop(‘checked’)
设置属性

attr(属性名称，属性值)

设置指定的属性值，操作 checkbox时：
选中返回checked，没有选中返回undefined。

attr(‘checked’,’checked’)
attr(‘name’,’zs’)
prop(属性名称，属性值)

设置具有true和false的属性值

prop(‘checked’,’true’)
移除属性

removeAttr(属性名)

移除指定的属性

removeAttr(‘checked’)
操作元素的样式
attr(“class”)

获取class属性的值，即样式名称
attr(“class”,“样式名”)

修改class属性的值，修改样式
addClass(“样式名”)

添加样式名称
css( )

添加具体的样式
removeClass(class)

移除样式名称
操作元素的内容
html( )

获取元素的html内容
html(“html,内容”)

设定元素的html内容
text( )

获取元素的文本内容，不包含html
text(“text,内容”)

设置元素的文本内容，不包含html
val( )

获取元素value值
val(‘值’)

设定元素的value值
创建元素
在jQuery中创建元素很简单，直接使用核心函数即可$

$(‘元素内容’);
$(‘

this is a paragraph!!!

’);
添加元素
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)
删除元素
remove( )删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty( )清空所选元素的内容
遍历元素each( )

$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
4、Jquery事件
ready加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
bind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData],
handler(eventObject));

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
这类类型可以包括如下:
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执行的函数

简单的bind( )事件

bind()方法绑多个事件
点击查看 名言
5、Jquery Ajax
$.ajax()
格式：$.ajax({})；
参数：缩

type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
get请求:
$.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);
}
});
post请求：
$.ajax({
type:“post”,
data:“name=tom”,
url:“js/cuisine_area.json”,
contentType: “application/x-www-form
urlencoded”,
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()
// 1.请求json文件，忽略返回值
$.get(‘js/cuisine_area.json’);

// 2.请求json文件，传递参数，忽略返回值
$.get(‘js/cuisine_area.json’,
{name:“tom”,age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get(‘js/cuisine_area.json’,function(data){
console.log(data);
});

// 4.请求json文件,传递参数,拿到返回值
$.get(‘js/cuisine_area.json’,
{name:“tom”,age:100},function(data){
console.log(data);
});

这是一个简单的 GET 请求功能以取代复杂
$.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax
$.post()
// 1.请求json文件，忽略返回值
$.post(‘…/js/cuisine_area.json’);

// 2.请求json文件，传递参数，忽略返回值
$.post(‘js/cuisine_area.json’,
{name:“tom”,age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.post(‘js/cuisine_area.json’,function(data){
console.log(data);
});

// 4.请求json文件,传递参数,拿到返回值
$.post(‘js/cuisine_area.json’,
{name:“tom”,age:100},function(data){
console.log(data);
});

这是一个简单的 POST 请求功能以取代复杂
$.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。
$.getJSON()
$.getJSON(‘js/cuisine_area.json’,
{name:“tom”,age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});

表示请求返回数据类型是JSON格式的ajax请求
重点
1、JQuery对象
2、JQuery基本选择器(ID、元素、class)、表单选择器
3、JQuery 操作DOM(元素创建、添加、遍历、更新、删除)
4、JQuery 常用事件绑定(click、focus、blur)
5、Jquery Ajax完成Get、Post请求发送