jQuery与Ajax

jQuery JavaScript库 为了简化JavaScript开发,第三方厂商开发了JavaScript库主流JavaScript库jQueryVue.jsAngularJSReact jQuery介绍 jQuery是一个轻量级JS库, 使用十分简单jQuery的核心是选择器，用于获取页面元素jQuery提供了大量高效方法,开发速度大幅提升 下载与安装 jQuery官网: jquery.comjQuery采用独立JS文件发布: jquery-3…3.1.jsIDE: Eclipse、 IDEA、 Hbuilder、 sublime 、webstorm代码示例

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样式 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");

设置元素内容 val() -获取或设置输入项的值

//设置
$("input[name='uname']").val("adminittrator");
//获取
var v = $("input[name='uname']").val();

text() -获取或设置元素的纯文本

//设置
$("span.myclass").text("锄禾日当午，汗滴禾下土。");
//获取
$("span.myclass").text();

html() -获取或设置元素内部的HTML

//设置
$("span.myclass").html("锄禾日当午，汗滴禾下土。");
//获取
$("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(""+json[i].title+"")
                    }
                }
            })
        })