jQuery与Ajax

ClayBin
234 阅读4分钟

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]")选中属性值以某值开头的组件
("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("<b>锄禾日当午，汗滴禾下土。</b>");
//获取
$("span.myclass").html();

text与html方法最大的区别在于对于文本中的html标签是否进行转译

jQuery事件处理方法

  • on(" click" , function) -为选中的页面元素绑定单击事件
  • click(function) -是绑定事件的简写形式
  • 处理方法中提供了event参数包含了事件的相关信息

jQuery常用事件

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
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>")
                    }
                }
            })
        })
avatar
文章
阅读
粉丝