jQuery

最新推荐文章于 2024-05-06 10:37:06 发布

小肥宅@

最新推荐文章于 2024-05-06 10:37:06 发布

阅读量363

点赞数

分类专栏：后端文章标签： java html jquery

本文链接：https://blog.csdn.net/manxianglin/article/details/123269065

版权

后端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1. jQuery是js库，

库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方，放的用js代码写的function

2. dom对象和jquery对象

dom对象，使用javascript的语法创建的对象叫做dom对象，也就是js对象。

var obj=  document.getElementById("txt1");  
obj是dom对象，也叫做js对象
可以使用对象的属性：obj.value;

jquery对象：使用jquery语法表示对象叫做jquery对象，注意：jquery表示的对象都是数组。
例如： var jobj = $("#txt1") , jobj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。
现在数组中就一个值。
dom对象可以和jquery对象相互的转换。

dom对象可以转为jquery
语法： $(dom对象)
jquery对象也可以转为dom对象
语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get{0).

为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。

当你的dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。

快速入门：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<script>
    var div1 = $("#div1");
    var div2 = $("#div2");
    alert(div1.html());
</script>
</body>
</html>

转换例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS与JQ对象的相互转换</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <script>
        //js对象
        var divs = document.getElementsByTagName("div");
        //jq对象
        var $div = $("div");

        //js--->jq
        for (var i = 0; i < divs.length; i++) {
            $(divs[i]).html("aaa");
        }
        //jq--->js
        //1.jq对象[索引]
        var newdiv1 = $div[0];
        newdiv1.innerHTML="new1";
        //2.jq对象.get(索引)
        var newdiv2 = $div.get(1);
        newdiv2.innerHTML="new2";
    </script>
</body>
</html>

3.选择器：就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom

常用的选择器：

1） id选择器， 语法： $("#dom对象的id值")
    通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。

2） class选择器， 语法： $(".class样式名)
        class表示css中的样式， 使用样式的名称定位dom对象的。

3） 标签选择器， 语法： $("标签名称")
    使用标签名称定位dom对象的
    
4）表单选择器：
	在<input type=”text”>中，type属性有：
	text，password，radio，checkbox，button，file，submit，reset
	语法：$(“:type属性值”)
	例子：$(“:text”)选中所有type为text的input

4、过滤器

用来筛选dom对象，不能单独使用，必须和选择器一起用
5种过滤器：

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

5、表单属性过滤器：根据表单中dom对象的状态，选择dom对象。

3种状态：
启用状态， enabled
不可用状态 disabled
选择状态， checked 例如radio，checkbox

例子：

$(“:text:enable”)可选中的文本框
$(“:text:disable”)不可选中的文本框
$(“:checkbox:checked”)勾中的复选框
$(“:select>option:selected”)下拉列表当前的选中元素

6、函数

（1）val()，text()，attr()：分别设置value，文本值，某一个属（有参（用来设置值），			 无参（用来获取值））
（2）remove()：删除自己还有自己的所有子对象
（3）empty():删除所有子对象
（4）append()：在该选择器后面追加代码
（5）html()：获取标签内部的内容（包含里面的代码，不止文本）
（6）html(参数):设置标签内部内容
（7）each()：
	语法1：$.each(要循环的数组，数组每个元素要执行的函数)
	例子：$.each(arr,function(index,element){
				alert(index+element);
			})
	语法2：jquery对象.each(数组每个元素要执行的函数)
	例子：$(“:text”).each(function(i,n){
				alert(i+”,”+n);
			})

7、on事件绑定

$(选择器).on(事件，函数)

例子：

$(“:text”).on(“click”,function{alert(“我被单击了”)})

8、用jquery的函数处理ajax的请求

jquery简化了ajax请求的处理，用3个函数实现ajax请求的处理。

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

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

介绍 $.ajax函数的使用，函数的参数表示请求的url，请求的方式，参数值等信息。

 $.ajax()参数是一个json的结构：$.ajax({名称:值,名称1:值1..... })

json结构的参数说明：

1)async:布尔值（true（默认），false），表示异步请求，可以不写
2)contentType:从浏览器发送服务器的参数的类型，可以不写，想表示发送的是json格式的，可以写application/json
3)data：表示请求的参数，常用格式：json
4)dataType：期望从服务器端返回的数据格式
5)error：请求错误时执行
6)success：请求成功，返回数据后执行
7)url：请求地址
8)type：请求方式（get，post），默认是get

小肥宅@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

1. jQuery是js库，库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方，放的用js代码写的function2. dom对象和jquery对象dom对象，使用javascript的语法创建的对象叫做dom对象，也就是js对象。var obj= document.getElementById("txt1"); obj是dom对象，也叫做js对象可以使用对象的属性：obj.value;jquery对象：使用jquery语法表示对象叫做jquer
复制链接

扫一扫