jQuery
JavaScript库
- 为了简化JavaScript开发,第三方厂商开发了JavaScript库
- 主流JavaScript库
- jQuery
- Vue.js
- AngularJS
- React
jQuery介绍
- jQuery是一个轻量级JS库, 使用十分简单
- jQuery的核心是选择器,用于获取页面元素
- jQuery提供了大量高效方法,开发速度大幅提升
下载与安装
- jQuery官网: jquery.com
- jQuery采用独立JS文件发布: jquery-3…3.1.js
- IDE: Eclipse、 IDEA、 Hbuilder、 sublime 、webstorm
- 代码示例
<script type="text/javascript">
/*
id选择器使用"#id值"进行选择
css选择器使用".css类名"进行选择
$(".myclass").addClass("highlight");
*/
document.getElementById("btnSelect").onclick = function(){
var selector = document.getElementById("txtSelector").value;
//jquery的选择器方法
//选择器
alert(selector);
//$("*").removeClass("highlight");
$(selector).addClass("highlight");
}
</script>
jQuery选择器
- jQuery选择器用于选中需要操作的页面元素
- 语法1: jQuery(选择器表达式)
- 语法2: $(选择器表达式)
- jQuery=$
基本选择器
语法 | 说明 |
---|
$(“#id”) | ID选择器指定ld元素的对象 |
$(“标签”) | 元素选择器选择指定标签名的选择器 |
$(" .class") | 类选择器,选中拥有指定css类的元素 |
$(“S1, S2, SN”) | 组合选择器,对元素进行组合 |
id选择器使用"#id值"进行选择
$(“#marital_status”).addClass(“highlight”);
css选择器使用".css类名"进行选择
$(“.myclass”).addClass(“highlight”);
层叠选择器
- 层叠选择器是根据元素的位置关系来获取元素的选择器表达式
语法 | 说明 |
---|
$(“ancestor descendant”) | 后代选择器 |
$(“ancestor>descendant”) | 子选择器 |
$(“prev~siblings”) | 兄弟选择器,选择这个节点之后的通缉节点 |
属性选择器
- 属性选择器是根据元素的属性值来选择元素的选择器表达式
语法 | 说明 |
---|
$(“selectorlattribute =value]”) | 选中属性值等于具体值的组件 |
$(“selectorlattribute^ =value]”) | 选中属性值以某值开头的组件 |
(
"
s
e
l
e
c
t
o
r
[
a
t
t
r
i
b
u
t
e
("selector[attribute
("selector[attribute =value]") | 选中属性值以某值结尾的组件 |
$(" selector[attribute* =value]") | 选中属性值包含某值的组件 |
位置选择器
- 位置选择器是指通过位置获取指定的元素,例如“获取第3个元素"
语法 | 说明 |
---|
$(“selector:first”) | 获取第一一个元素 |
$(“selector:last”) | 获取最后一个元素 |
$(“selector.even”) | 获取偶位置的元素(从0开始) |
$(“selector:odd”) | 获取奇数位置的元素(从0开始) |
$(“selector.eq(n)”) | 获取指定位置的元素(从0开始) |
表单选择器
- 表单选择器是获取表单元素的简化形式,例如:获取所有文本框
语法 | 说明 |
---|
$(" selectorinput") | 所有输入元素 |
$(" selector:text") | 获取文本框 |
$(“selector:password”) | 获取密码框 |
$(" selector:submit") | 获取提交按钮 |
$(“selector.reset”) | 获取重置按钮 |
… | |
$(:text)
操作元素属性
- attr(name|properties|key) -获取或设置元素属性
//一个属性为获取元素
var href_sttr = $("a[href*='163']").attr("href");
//两个属性为修改元素
$("a[href*='163']").attr("href", "https://afterglow.fun");
//选择多个属性是只会获取第一个选中的值,修改值的时候会将所有选中的值进行修改
- removeAttr(name) -移除元素属性
$("a").removeAttr("href");
操作元素的CSS样式
//设置属性
$("a").css("color","red");
//设置多个属性
$("a").css({"clolr":"blue","font-weight":"1000"});
//获取指定的css属性值
var color = $("a").css("color");
- addClass() -为每个匹配的元素添加指定的类名
//为每个匹配的元素添加指定的类名
$("li").addClass("highlight");
//添加多个
$("li").addClass("highlight myclass");
- removeClass() -从所有匹配的元素中删除全部或者指定的类
//移除
$("p").removeClass("myclass");
设置元素内容
//设置
$("input[name='uname']").val("adminittrator");
//获取
var v = $("input[name='uname']").val();
//设置
$("span.myclass").text("锄禾日当午,汗滴禾下土。");
//获取
$("span.myclass").text();
//设置
$("span.myclass").html("<b>锄禾日当午,汗滴禾下土。</b>");
//获取
$("span.myclass").html();
text与html方法最大的区别在于对于文本中的html标签是否进行转译
jQuery事件处理方法
- on(" click" , function) -为选中的页面元素绑定单击事件
- click(function) -是绑定事件的简写形式
- 处理方法中提供了event参数包含了事件的相关信息
jQuery常用事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | | blur | unload |
mouseover | | | |
$("p.myclass").on("click",function () {
//$(this)是指当前事件产生的对象
$(this).css("background-color","yellow");
})
$("span.myclass").click(function () {
$(this).css("background-color","red");
})
$("input[name='uname']").keypress(function (event) {
console.log(event)
if (event.keyCode==32){
$(this).css("color","red");
}
})
Ajax
- Asynchronous JavaScript And XML(异步的JavaScript和XML)
- Ajax可以在不刷新页面的前提下,进行页面局部更新
- Ajax不是新的技术,Ajax并不是W3C的标准
Ajax的使用流程
- 创建XmlHttpRequest对象
- XMLHttpRequest用于在后台与服务器交换数据,是AJAX的核心
- XMLHttpRequest并不是W3C的标准,不同浏览器的创建方式不同
var xmlhttp;
if (window.XMLHttpRequest)
// IE7+, Firefox* Chrome, Opera, Safari浏览器执行代码
xmlhttp=new XMLHttpRequest);
}
else
{
// IE6, IE5浏览器执行代码
xmlhttp=new ActiveXObject(" Microsof.XMLHTTP");
- 发送Ajax请求
- xmlhttp.open()用于创建请求
- xmIhttp.send()用于发送请求
//创建请求
xmIhttp.open(" GET","http://localhost/test?name= admin' ,true);
//发送到服务器
xmlhttp.send();
- 处理服务器响应
- xmIhttp.onreadystatechange()事件用于监听AJAX的执行过程
- xmIhttp.readyState属性说明XMLHttpRequest当前状态
- xmIhttp.status属性服务器响应状态码,200:成功404:未找到…
readyState值 | 说明 |
---|
readyState = 0 | 请求未初始化 |
readyState = 1 | 服务器连接已建立 |
readyState = 2 | 请求已被接收 |
readyState = 3 | 请求正在处理 |
readyState = 4 | 响应文本已被接收 |
xmIhttp.onreadystatechange= function()
{
//响应已被接收且服务器处理成功时才执行
if (xmIhttp.readyState= =4 && xmlhttp.status= =200)
//获取响应体的文本
var response Text = xmlhttp.response Text;
//对服务器结果进行处理
}
Ajax同步与异步
- 同步状态:代码进入等待状态,响应不返回,程序不会继续向下执行,就是前面代码没执行完后面的代码就会一直等待
- 异步状态:程序不会处于阻塞状态,程序依旧向下执行,数据返回时,是通过触发onreadystatechange事件进行数据的获取和处理通常Ajax设置为异步状态
- 使用了同步,xmlhttp.onereadystatechange=function(){…},该事件失效…(将function()代码取出来放在send()后面就行了)
- 同步状态:代码进入等待状态,数据不返回,程序不会继续向下执行
- 异步状态:Ajax不会处于程序的阻塞状态,程序依旧向下执行,数据返回时,是通过触发onreadystatechang事件进行数据的获取和处理
通常Ajax设置为异步状态
jQuery对Ajax的支持
- jQuery对AJAX进行封装,提供了$.ajax()方法
- 语法: $.ajax(options)
常用设置项 | 说明 |
---|
url | 发送请求地址 |
type | 请求类型get & post |
data | 向服务器传递的参数 |
dataType | 服务器响应的数据类型 text & json & xml & html & jsonp & script |
success | 接收响应时的处理函数 |
error | 请求失败时的处理函数 |
$(function () {
$.ajax({
"url": "/ajax/news_list",
"type": "get",
"data": "t=pypl",
"dataType": "json",
"success": function (json) {
console.log(json);
for (var i = 0; i < json.length; i++) {
$("#container").append("<h1>"+json[i].title+"</h1>")
}
}
})
})