JQuery与Ajax

JSON的选择器

语法 jQuery (选择器表达式)
语法 $(选择器表达式)

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>//导入
//jquery的选择器方法
//选择器
//选中当前页面的说有a标签 添加一个class类	
	$("a").addClass("heigthlight");
//文本输入标签，其它同上
	var selsctor=document.getElementById("txtSelector").valueOf();
        $(selsctor).addClass("heigthlight");
//删除所有的class类
$("*").removeClass("heigthlight");

1. 基本选择器

语法	说明
$(“标签”)	元素选择器，选择指定标签名的选择器
$(" #id")	ID选择器，指定id元素的对象
$(".class ")	类选择器，选中由指定的css类的元素
$(" S1，S2，S3")	组合选择器，对元素进行组合

2. 成叠选择器

语法	说明
$(“ancestor descendant”)	后代选择器
$(“ancestor>descendant”)	子选择器
$(“prevr~siblings”)	兄弟选择器

3. 属性选择器

语法	描述
$(“selector[attribute=value]”)	选中属性值等于具体值的组件
$(“selector[attribute^=value]”)	选中属性值以某值开头的组件
$(“selector[attribute$=value]”)	选中属性值以某值结尾的组件
$(“selector[attribute*=value]”)	选中属性值包含值的组件

注意细节：属性选择器只会匹配明确了书写了某个属性的 属性名和属性值
eg：注意细节

 <input style="height:24px " id="txtSelector">
 <input type="txt" style="height:24px " id="txtSelector">//匹配

4. 位置选择器

语法	描述
$(“selector:first”)	获取第一个元素
$(“selector:last”)	获取最或一个元素
$(“selector:even”)	获取偶数位置的元素（从0开始）
$(“selector:odd”)	获取奇数位置的元素（从0开始）
$(“selector:eq(n)”) 获取指定位置的元素（从0开始）

5. 表单选择器

表单选择器是获取表单元素的简化形式，例如：获取说有文本框

语法	描述
$(“selector:input”)	所有输入元素
$(“selector:text”)	获取文本框
$(“selector:password”)	获取密码框
$(“selector:submit”)	获取提交按钮
$(“selector:reset”)	获取重置按钮

eg:

:text 获取所有的文本框

6. 操作元素属性

函数	描述
attr(name /properties /kry)	设置或获取元素属性
removeAtte(name)	移除元素属性

var href_1 = $("a[href*='163']").attr("href")
$("a[href*=163]").attr("href","htpp://www.163.com")
$("a").remove("href");

7. 操作元素的css属性

函数	描述
css()	获取或设置匹配元素的样式属性
addClass()	为每一个匹配的元素添加指定的类名
removeClass()	从所有匹配的元素中删除全部或者指定的类

		var color1 =$("a").css("color","red");
       $("a").css({"color":"red","size":"20px"});
		$("li").addClass("myclass twoclass");//一个也可以 多个用空格隔开
		$("a").removeClass("myclass");

8. 设置元素内容

函数	描述
val()	获取或设置出入项的值
text()	获取或设置元素的纯文本
html()	获取或设置元素内部的HTML
append()	追加内容

	$("input[name='usernmae']").val("modify");
	var v=$("input[name='usernmae']").val();//后面为空的情况下是获取内容

	$("input[name='usernmae']").text("modify");
    var v=$("input[name='usernmae']").text();//获取时会去掉标签

	$("input[name='usernmae']").html("<b>modify</b>");//可以加HTML标签

	$("#container").append("<h1>.....</h1>")

9. jQuery事件处理方法

函数	描述
on(“click”,funtion)	为选中的页面元素绑定单机事件
click(function)	绑定事件的简写形式

鼠标事件		键盘事件		表单事件		文档/窗口事件
click	单击事件	keypress	按下弹起的过程	submit	表单提交	load	文档加载时
dblclick	双击事件	keydown	某一个键按下	change	表单输入项发送变化的时候(当选择下拉列表某一项时)	resize	文档/窗口大小发生变化时
mouseenter	鼠标移入	某一个键弹起	focus	表单某一个输入项获得焦点时	scroll	窗口滚动时
mouseleave	鼠标移出			blur	表单某一个输入项失去焦点时	unload	窗口关闭或卸载时
mouseover	鼠标再组件移动过程

注：onsubmit:在表单提交之前调用 ||submit()方法把表单数据提交到Web服务器

	$("p.myclass").on("click",function () {
            //$(this)是指当前事件产生的对象
            $(this).css("background-color","yellow");
        });
	$("p.myclass").click(function () {
            $(this).css("background-color","yellow");
        });

$("input[name='username']").keypress(function (even) {//事件对象
            if (even.keyCode ==32){
                $(this).css("color","yellow");
            }
        });

Ajax

Ajax可以再不刷新的前提下，进行页面局部更新

函数	描述
xmlhttp.onreadystatechange()	事件用于监听Ajax的执行过程
xmlhttp.readyState	说明XMLHttpRequest当前状态
xmlhttp.status	服务器响应状态码
xmlhttp.responseText	获取响应体文本

readyState值	说明
readyState=0	请求未初始化
readyState=1	服务器链接已建立
readyState=2	请求已被接收
readyState=3	请求正在处理
readyState=4	响应文本已被接收

Ajax过程 //创建 请求 响应

        //创建xmlHttpRequest对象
        var xmlhttp;
        if(window.XMLHttpRequest){ //判断浏览器的类型
            xmlhttp =new XMLHttpRequest();  //符合绝大多数的浏览器
        }else{
            xmlhttp =new ActiveXObject("Microsoft.XMLHTTP"); //使用IE浏览器复古版本
        }
        //请求
        //创建请求
        xmlhttp.open("GET","http://localhost:8080/fanyi.sogou.com/text",true);//http://locathost:8080可以去掉
        xmlhttp.send();//发送请求
        //响应
        xmlhttp.onreadystatechange=function () {
            //响应已被接收  且  服务器处理成功时
            if (xmlhttp.readyState ==4 && xmlhttp.status == 200){
                //获取响应体的文本
                var t=xmlhttp.responseText;
                document.getElementById("diccontent").innerHTML=t;
                ............
            }
        }

1. jQuery 对Ajax的支持

jQuery对Ajax进行分装，语法： $.ajax(options);

常用设置项	说明
url	发送请求地址
type	请求类型 （get/post）
data	向服务器传递的参数
dataType	服务器响应数据类型（text/ json /xml /html /jsonp / script）
success	接收响应时的处理函数
errot	请求失败时的处理函数

eg:

 $.ajax({
            "url":"/ajax/test",
            "type" : "get",
            "data" : "t=tiobe",   //多个可以用json拼写{"t":"yyy","q":"eeee"}
            "dataType" : "json",
            "success": function () {
                .............
            },
            "errot" :function () {
                .............
            }
        });