jQuery

JQuery

　　Jquery对象

　　　　jQuery 是⼀套兼容多浏览器的 javascript 脚本库.。核⼼理念是写得更少，做得更多，使⽤ jQuery 将极⼤的提⾼编写 javascript 代码的效率，帮助开发者节省了⼤量的⼯作，让写出来的代码更加优雅，更加健壮，“如⻁添翼”。

　　下载

　　　　http://jquery.com/ 下载

　　　优点:

（1）提供了强⼤的功能函数

（2）解决浏览器兼容性问题

（3）实现丰富的 UI 和插件

（4）纠正错误的脚本知识

安装

在页面引入即可

　　<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>

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);
});

示例：

write less, do more

　　Jquery选择器

　　　　基础选择器

选择器	名称	举例
id选择器	#id	$("#testDiv")选择id为testDiv的元素
元素选择器	element	$(“div”)选择所有div元素
类选择器	.class	$(".blue")选择所有class=blue的元素
选择所有元素	*	$("*")选择⻚⾯所有元素
组合选择器	selector1,selector2,selectorN	$("#testDiv,span,.blue")同时选中多个选择器匹配的元素

.blue {

background: blue;

}

</style>

<body>

<div id="mydiv1">id选择器1<span>span中的内容</span></div>

<div id="mydiv2" class="blue">元素选择器</div>

<span class="blue">样式选择器</span>

</body>

// id选择器

console.log("======id====");

var idSelecter = $('#mydiv1');

console.log(idSelecter.html());

console.log(idSelecter.text());

// 元素选择器

console.log("======name====");

var nameSe = $('div'); // 有多个div元素

nameSe.each(function () {

// this是dom对象，$(this)是jquery对象

console.log($(this).text());

});

// 类选择器，class

console.log("======class====");

var classSe = $('.blue'); // 有多个class=blue的元素

classSe.each(function () {

console.log($(this).text());

});

// 通⽤选择器：*

console.log("======所有元素====");

var all = $("*");

console.log(all.length);

// 组合选择器

console.log("======组合====");

var unionSe = $('span, .blue,div');

unionSe.each(function () {

console.log($(this).text());

});

</script>

层次选择器

选择器	名称	举例
后代选择器	ancestor descendant	$("#parent div")选择id为parent的元素的所有div元素
⼦代选择器	parent > child	$("#parent>div")选择id为parent的直接div⼦元素
相邻选择器	prev + next	$(".blue + img")选择css类为blue的下⼀个img元素
同辈选择器	prev ~ sibling	$(".blue ~ img")选择css类为blue的之后的img元素

<!DOCTYPE html>

<html>

<head>

<title>层次选择器</title>

.testColor {

background: green;

}

.gray {

background: gray;

}

</style>

</head>

<body>

<div id="parent">层次择器

<div id="child" class="testColor">⽗选择器

</div>

<div>

选择器2<div>选择器2中的div</div>

</div>

</body>

console.log("=========后代选择器-选择所有后代=====");

var ancestorS = $('#parent div');

ancestorS.each(function () {

console.log($(this).text());

});

console.log("=========⼦代选择器-选择⼉⼦辈=====");

var child = $('#parent>div');

child.each(function () {

console.log($(this).text());

});

console.log("=========相邻选择器=====");

var pre_next = $(".gray + img");

console.log(pre_next.length);

console.log("=========同辈选择器,其后，（弟弟）=====");

var pre_siblings = $(".gray ~ img");

console.log(pre_siblings.length);

</script>

</html>

表单选择器

Forms	名称	举例
表单选择器	:input	查找所有的input元素：$(":input")；注意：会匹配所有的input、textarea、select和button元素。
⽂本框选择器	:text	查找所有⽂本框：$(":text")
密码框选择器	:password	查找所有密码框：$(":password")
单选按钮选择器	:radio	查找所有单选按钮：$(":radio")
复选框选择器	:checkbox	查找所有复选框：$(":checkbox")
提交按钮选择器	:submit	查找所有提交按钮：$(":submit")
图像域选择器	:image	查找所有图像域：$(":image")
重置按钮选择器	:reset	查找所有重置按钮：$(":reset")
按钮选择器	:button	查找所有按钮：$(":button")
⽂件域选择器	:file	查找所有⽂件域：$(":file")

<!DOCTYPE html>

<html>

<head>

</head>

<body>

姓名:<input type="text" id="uname" name="uname" /><br />

密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />

年龄:<input type="radio" name="uage" value="0" checked="checked" />⼩屁孩

爱好:<input type="checkbox" name="ufav" value="篮球" />篮球

<input type="checkbox" name="ufav" value="爬床" />爬床

来⾃:<select id="ufrom" name="ufrom">

</select><br />

简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />

头像:<input type="file" /><br />

</form>

</body>

</html>

function checkForm() {

// 获取所有的表单元素

$(":input").each(function () {

// console.log($(this)[0]);

console.log($(this)[0].tagName);

})

console.log("------+++++++++++++++++++++--------")

// 获取 text

console.log("text-->" + $(":text").length); // 1

// 获取 password

console.log("password-->" + $(":password").length); // 1

// 获取radio

console.log("radio-->" + $(":radio").length); // 2

// 获取checkbox

console.log("checkbox-->" + $(":checkbox").length); // 3

// 获取file

console.log("file-->" + $(":file").length); // 1

// 获取按钮

console.log("button-->" + $(":button").length); // 2

// 获取submit按钮

console.log("submit-->" + $(":submit").length); // 1

// 获取image按钮

console.log("image-->" + $(":image").length); // 1

// 获取reset按钮

console.log("reset-->" + $(":reset").length); // 1

return false;

}

</script>

Jquery Dom操作

　　操作元素的属性

　　获取属性

方法	说明	举例
attr(属性名称)	获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。	attr(‘checked’) attr(‘name’)
prop(属性名称)	获取具有true和false两个属性的属性值	prop(‘checked’)

<input type="checkbox" name="ch" checked="checked" /> aa

<input type="checkbox" name="ch" /> bb

</form>

var ch = $("input[type='checkbox']")

console.log(ch)

ch.each(function (idx, em) {

console.log(idx + "-" + $(em) + "=" + this)

console.log($(em).attr('checked') + "==" + $(em).prop('checked'))

console.log('--------------')

})

</script>

设置属性

方法	说明	举例
attr(属性名称，属性值)	设置指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。	attr(‘checked’,’checked’) attr(‘name’,’zs’)
prop(属性名称，属性值)	设置具有true和false的属性值	prop(‘checked’,’true’)

移除属性

方法	说明	举例
removeAttr(属性名)	移除指定的属性	removeAttr(‘checked’)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<pre>

设置或者返回元素的属性 ;

设置具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。

</pre>

<hr />

<input type="checkbox" name="all" checked="checked" />全选

</body>

// 获取属性值：attr

console.log($('#a1').attr('href'));

console.log($(':checkbox').attr('name'));

// 若未选中显示undefined，选中显示 checked

console.log($(':checkbox').attr('checked'));

// 获取属性值：prop

// 若未选中显示false，选中显示 true

console.log($(":checkbox").prop('checked'));

console.log($('#a2').prop('href'))

// 设置属性值

$('#a1').attr('href', 'https://jquery.com');

$(":checkbox").prop("checked", false);

// 移除属性

$('#a2').removeAttr('href');

</script>

</html>

操作元素的样式

方法	说明
attr(“class”)	获取class属性的值，即样式名称
attr(“class”,“样式名”)	修改class属性的值，修改样式
addClass(“样式名”)	添加样式名称
css()	添加具体的样式
removeClass(class)	移除样式名称

增加元素的具体样式，格式：

1）css({‘样式名’:’样式值’,’样式名2’:’样式值2’})
例：css({"background-color":"red","color":"#fff"});
2）css(“样式名”,”样式值”)
例：css('color','white')

<!DOCTYPE html>

<html>

<head>

<title>设置元素样式</title>

div {

padding: 8px;

180px;

}

.blue {

background: blue;

}

.larger {

font-size: 30px;

}

.green {

background: green;

}

</style>

</head>

<body>

<h3>css()⽅法设置元素样式</h3>

</body>

// 获取样式名称

console.log($("#remove").attr("class"));

// 修改样式，那么id为remove的元素样式class只有green

// $('#remove').attr("class","green")

// 添加样式名称，class名称 --叠加

// $('#conBlue').addClass("blue larger");

// 添加元素具体样式

// { "":"" , "":"" } 名:值对

$('#conRed').css({ "background-color": "red", "color": "#fff" });

$('#remove').css('color', 'red');

// 移除样式

// $("#remove").removeClass("blue larger");

</script>

</html>

操作元素的内容

方法	说明
html()	获取元素的html内容
html(“html, 内容”)	设定元素的html内容
text()	获取元素的⽂本内容，不包含html
text(“text 内容”)	设置元素的⽂本内容，不包含html
val()	获取元素value值
val(“值”)	设定元素的value值

创建元素

在jQuery中创建元素很简单，直接使⽤核⼼函数即可

$('元素内容')

$('<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)

删除元素

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

<!DOCTYPE html>

<html>

<head>

span {

color: white;

padding: 8px;

margin: 5px;

float: left;

}

.green {

background-color: green;

}

.blue {

background-color: blue;

}

</style>

</head>

<body>

<span class="green">jquery<a>删除</a></span>

<span class="blue">javase</span>

<span class="green">http协议</span>

<span class="blue">servlet</span>

</body>

</html>

// 删除所选元素或指定的⼦元素

// $("span").remove();

// 删除样式为blue的span

// $("span.blue").remove();

// 清空元素

// $("span").empty();

// $(".green").empty();

</script>

遍历元素

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

<!DOCTYPE html>

<html>

<head>

span {

color: white;

padding: 8px;

margin: 5px;

float: left;

}

.green {

background-color: green;

}

.blue {

background-color: blue;

}

</style>

</head>

<body>

<span class="green">jquery</span>

<span class="green">javase</span>

<span class="green">http协议</span>

<span class="green">servlet</span>

</body>

$('span').each(function (idx, e) {

console.log(idx + " ---> " + $(e).text());

})

</script>

</html>

Jquery事件

　　ready加载事件

　　　　ready()类似于 onLoad()事件 ready()可以写多个，按顺序执⾏ (document).ready(function())等价于(document).ready(function(){})等价于(documen**t).ready(functio**n())等价于(function(){})

<!DOCTYPE html>

<html>

<head>

<title>ready事件</title>

// ⽂档载⼊完便触发ready⽅法

$(document).ready(function () {

$("div").html("ready go...");

})

// $(document).ready(function(){}) == $(function(){})

$(function () {

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

$(this).hide();

});

$(function () {

$("#btntest").bind("click", function () {

$("div").html("剁吧...");

});

</script>

</head>

<body>

<h3>⻚⾯载⼊时触发ready()事件</h3>

</body>

</html>

bind()绑定事件

为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。

$(selector).bind( eventType [, eventData], handler(eventObject));

简单的bind()事件

$(function () {

/*$("#test").bind("click",function(){

alert("世界会向那些有⽬标和远⻅的⼈让路！！");

});*/

* js的事件绑定

ele.οnclick=function(){};

* */

// 等同于上⾯的放⽅法

$("#test").click(function () {

alert("世界会向那些有⽬标和远⻅的⼈让路！！");

});

1.确定为哪些元素绑定事件

获取元素

2.绑定什么事件（事件类型）

第⼀个参数：事件的类型

3.相应事件触发的，执⾏的操作

第⼆个参数：函数

* */

$("#btntest").bind('click', function () {

// $(this).attr('disabled',true);

$(this).prop("disabled", true);

})

});

</script>

<body>

<h3>bind()⽅简单的绑定事件</h3>

<div id="test" style="cursor:pointer">点击查看名⾔</div>

</body>

绑定多个事件

$(function () {

// 绑定click 和 mouseout事件

/*$("h3").bind('click mouseout',function(){

console.log("绑多个事件");

});*/

// 链式编程

$("h3").bind('click', function () {

alert("链式编程1");

}).bind('mouseout', function () {

$("#slowDiv").show("slow");//让slowDiv显示

});

/*$("#test").click(function(){

console.log("点击⿏标了....");

}).mouseout(function () {

console.log("移出⿏标了...");

});*/

$("#test").bind({

click: function () {

alert("链式编程1");

mouseout: function () {

$("#slowDiv").show("slow");

}

});

</script>

<body>

<h3>bind()⽅法绑多个事件</h3>

<div id="test" style="cursor:pointer">点击查看名⾔</div>

⼈之所以能，是相信能

</div>

</body>

Jquery Ajax

jquery 调⽤ 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("<ul></ul>");

for (var i = 0; i < msg.prices.length; i++) {

$('ul').append("<li></li>");

$('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("<ul></ul>");

for (var i = 0; i < msg.prices.length; i++) {

$('ul').append("<li></li>");

$('li').eq(i).text(msg.prices[i]);

}

error: function (errMsg) {

console.log(errMsg);

$('div').html(errMsg.responseText)

}

});

$.get

这是⼀个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。

// 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);
});

$.post

这是⼀个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。

// 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);
});

$.getJSON

表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
　　console.log(data); // 要求返回的数据格式是JSON格式
});

jQuery

JQuery

Jquery对象

下载

安装

Dom对象 与 Jquery包装集对象

Dom对象

Jquery包装集对象

Dom对象 转 Jquery对象

Jquery对象 转 Dom对象

Jquery选择器

基础选择器

层次选择器

表单选择器

Jquery Dom操作

操作元素的属性

获取属性

设置属性

移除属性

操作元素的样式

操作元素的内容

创建元素

添加元素

删除元素

遍历元素

Jquery事件

ready加载事件

bind()绑定事件

Jquery Ajax

　　Jquery对象

　　下载

Dom对象与 Jquery包装集对象

　　Dom对象

　　Jquery包装集对象

　　Dom对象转 Jquery对象

　　Jquery对象转 Dom对象

　　Jquery选择器

　　　　基础选择器

　　操作元素的属性

　　获取属性

　　ready加载事件