jQuery---学习记录

最新推荐文章于 2023-09-13 18:25:12 发布

Coding_小平

最新推荐文章于 2023-09-13 18:25:12 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/xiaoping__/article/details/117330079

版权

文章目录

过滤器
jQuery中给dom对象绑定事件
- $(function() {})
表单过滤器
jquery中的函数
- val
- text
- attr
- remove
- empty
- append
- html
- each
使用jquery的函数，实现ajax请求的处理
- $.ajax() 的使用
- json结构的参数说明

过滤器

在定位了dom对象后，根据一些条件筛选dom对象

过滤器就是一个字符串，用来筛选dom对象的

过滤器不能单独使用，必须和选择器一起使用

1）$(“选择器:first”) ：第一个dom对象
2） $(“选择器:last”) ：最后一个dom对象
3） $(“选择器:eq(数组的下标)”) ：获取指定下标的dom对象
4） $(“选择器:lt(数组的下标)”) ：获取小于指定下标的dom对象
5） $(“选择器:gt(数组的下标)”) ：获取大于指定下标的dom对象

jQuery中给dom对象绑定事件

1）$选择器.事件名称( 事件的处理函数 )

	事件名称：就是js中事件去掉on的部分
	例如：js中的单击事件 onclick()，jquery中的事件名称就是click，都是小写的

on事件绑定

$(选择器).on( 事件名称 , 事件的处理函数 )

事件名称：就是js就是js中事件去掉on的部分

例：

<input type="button" id="btn">

$("#btn").on("click",function(){  处理事件 })

$(function() {})

$(function() {}) 是$(document).ready(function()的简写

DOM 加载完毕之后执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					var obj=$("div:first");
					obj.css("background","red");
				})
			})
			
		</script>
	</head>
	<body>
		<div>
			我是第一个div
		</div>
		<div>
			我是第二个div
		</div>
		<input type="button" value="第一个div" id="btn1">	
	</body>
</html>

表单过滤器

1.选择可用的文本框

$(":text:enabled")

2.选择不可用的文本框

$(":text:disabled")

3.复选框选中的元素

$(":checkbox:checked")

4.选择指定下拉列表的被选中元素

选择器>option:selected

jquery中的函数

val

操作数组中dom对象的value属性

$(选择器).val() ：无参调用形式，读取数组中第一个DOM对象的value属性值

$(选择器).val() : 有参形式调用，对数组中所有DOM对象的value属性值进行统一赋值

text

操作数组中所有DOM对象的文资显示内容属性

$(选择器).text() : 无参数调用，读取数组中所有DOM对象的文字显示内容，将得到的内容拼接为一个字符串返回

$(选择器).text(值) ：有参数方式，对数组中所有DOM对象的文字显示内容进行统一赋值

attr

对val , text 之外的其他属性操作

$(选择器).attr(“属性名”) ：获取DOM数组第一个对象的属性值

$(选择器).attr(“属性名”，“值”) ：对数组中所有DOM对象的属性设为新值

remove

$(选择器).remove() : 将数组中所有DOM对象及其子对象一并删除

empty

$(选择器).empty() ：将数组中所有DOM对象的子对象删除

append

为数组中所有DOM对象添加子对象

例：

$(选择器).append("<div>添加的</div>")

html

设置或返回被选元素的内容（innerHTML）

$(选择器).html() : 无参调用方法，获取DOM数组第一个元素的内容

$(选择器).html(值) : 有参调用，用于设置DOM数组中所有元素的内容

each

可以对数组，json，dom数组进行循环处理。数组，json中的每个成员都会调用一次处理函数

语法：$.each{循环的内容，处理函数} ：表示使用jquery的each，循环数组，每个数组成员，都会执行一次后面的处理函数

$ 相当于java中的一个类名
each : 就是类中的静态方法

处理函数： function(index,element){}
index ，element都是自己定义的形参，名称自定义
index : 循环的索引
element : 数组中的成员

例:

$("#btn1").click(function(){
	//循环dom数组
	var domArray=$(":text");
	$.each(domArray,function(i,n){
		//n是数组中的dom对象
		alert("i="+i+"n="+n.value);
	})
})

$("#btn2").click(function(){
	//循环jquery对象，jQuery对象就是dom数组
	$(":text").each(function(i,n){
		//n是数组中的dom对象
		alert("i="+i+"n="+n.value);
	})
})

使用jquery的函数，实现ajax请求的处理

jQuery简化了ajax请求的处理
使用三个函数可以实现ajax请求的处理

1）$.ajax() ：jquery中实现ajax的核心函数
2） $.post() ：使用post方式做ajax请求
3） $.get() ：使用get方式做ajax请求

$.post()和 $.get() 他们在内部调用的是 $.ajax()

$.ajax() 的使用

$.ajax() 参数是一个json结构

例如： $.ajax( { 名称：值，名称：值，… } )

$.ajax({
                    url:"queryjson",
                    data:{
                        "proid":proid
                    },
                    dataType:"json",
                    success:function (resp) {
                        //resp是json对象
                        alert(”123“)

                    }
                })

json结构的参数说明

1）async ：是一个boolean类型的值，默认是true，表示异步请求的。可以不写

2）contentType：一个字符串，表示从浏览器发送到服务器的参数的类型。可以不写

3）data ：可以是字符串，数组，json，表示请求的参数和参数值。常用的是json格式的数据

4）dataType ：表示期望从服务器端返回的数据格式，可选的有：xml , html , text , json
当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的时json或者xml的数据，那么服务器就可以返回你需要的数据格式。

5）error ：一个function，表示当请求发生错误时，执行的函数
error:function(){ 发生错误时执行的函数 }

6）sucess ：一个function，请求成功了，从服务器端返回了数据，会执行success指定函数
之前使用XMLHttpRequest对象，当readyState4 && staus200的时候

7）url ：请求的地址

8）type : 请求方式，get或者post，不用区分大小写，默认时get方式

主要使用的时 url , data , dataType , success

示例（对照ajax学习记录中的最后一个实例）：


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn1").click(function () {
                //获取dom的value值
                var proid=$("#proid").val();
                //发起ajax请求
                $.ajax({
                    url:"queryjson",
                    data:{
                        "proid":proid
                    },
                    dataType:"json",
                    success:function (resp) {
                        //resp是json对象
                        alert(resp.name+"==="+resp.jiancheng)
                        $("#proname").val(resp.name);
                        $("#projiancheng").val(resp.jiancheng);
                        $("proshenghui").val(resp.shenghui);
                    }
                })

            })
        })
    </script>
</head>
<body>
    <p>ajax请求使用json格式的数据</p>
    <table>
        <tr>
            <td>省份编号：</td>
            <td>
                <input type="text" id="proid">
                <input type="button" value="搜索" id="btn1"">
            </td>
        </tr>
        <tr>
            <td>省份名称：</td>
            <td><input type="text" id="proname"></td>
        </tr>
        <tr>
            <td>省份简称：</td>
            <td><input type="text" id="projiancheng"></td>
        </tr>
        <tr>
            <td>省会名称：</td>
            <td><input type="text" id="proshenghui"></td>
        </tr>
    </table>
</body>
</html>

Coding_小平

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery---学习记录

文章目录过滤器jQuery中给dom对象绑定事件$(function() {})表单过滤器jquery中的函数valtextattrremoveemptyappendhtmleach使用jquery的函数，实现ajax请求的处理$.ajax() 的使用json结构的参数说明过滤器在定位了dom对象后，根据一些条件筛选dom对象过滤器就是一个字符串，用来筛选dom对象的过滤器不能单独使用，必须和选择器一起使用1）$(“选择器:first”) ：第一个dom对象2） $(“选择器:last”)
复制链接

扫一扫