10 JQuery

最新推荐文章于 2022-07-14 10:58:16 发布

爱学习的小奶狗

最新推荐文章于 2022-07-14 10:58:16 发布

阅读量131

点赞数

分类专栏： JavaWeb 文章标签： jquery

本文链接：https://blog.csdn.net/qq_28384023/article/details/116990889

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 什么是JQuery

jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作。

为什么要使用jQuery？？
它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象。

（1）写少代码,做多事情【write less do more】 
（2）免费，开源且轻量级的 js 库，容量很小
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）
（7）出错后，有一定的提示信息
（8）不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了

2. DOM对象和JQuery对象

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

如：
	var obj=  document.getElementById("txt1");  obj是dom对象，也叫做js对象

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对象才可以。

2.1 DOM转换为JQuery实例

DOM 对象是用 JavaScript 语法创建的对象，也看做是 js 对象。

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以使
用 jQuery 中的提供的方法，操作 DOM 对象。
	一般情况下，在命名 jQuery 对象时，为了与DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

1.页面加入按钮 button
在这里插入图片描述
2.转换 DOM 对象

2.2 jQuery 对象转为 DOM 对象实例

jQuery 对象本身为数组对象，该数组中每个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(数组下标) 方式与下标[数组下标]

1.页面添加 text ，button
在这里插入图片描述

jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM 对象

3. 选择器

选择器: 与javaScripe想用，就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象。
常见的选择器有：

基本选择器
表单选择器

3.1 基本选择器

id选择器：语法： $("#dom对象的id值")
通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。
class选择器：语法： $(".class样式名)
class表示css中的样式，使用样式的名称定位dom对象的。
标签选择器 ：语法： $(“标签名称”)
使用标签名称定位dom对象的
所有选择器：语法：$(“*”) 选取页面中所有 DOM 对象。
组合选择器：语法：$(“id,class,标签名”)
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。

3.2 表单选择器

  使用<input>标签的type属性值，定位dom对象的方式。
	语法： $(":type属性值")
	
	例如： $(":text") ,选择的是所有的单行文本框，
	       $(":button") ,选择的是所有的按钮。

4. 过滤器

过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。

使用JQuery选择器选取的DOM对象是一个数组形式的，但我们可能只需要数组中符合条件的部分DOM对象，因此可以使用过滤器对已有的DOM对象进行过滤。

过滤器分为两种：

基本过滤器
表单对象属性过滤器

4.1 基本过滤器

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

4.2 表单对象属性过滤器

根据表单中dom对象的状态情况，定位dom对象的。
启用状态， enabled ,
不可用状态 disabled
选择状态， checked ，例如radio， checkbox

如：

1. 选择可用的文本框
		$(“:text:enabled”)
2.选择不可用的文本框
		$(“:text:disabled”)
3.复选框选中的元素
		$(“:checkbox:checked”)
4.选择指定下拉列表的被选中元素
	   选择器>option:selected

例子：
在这里插入图片描述

5. 函数

5.1 第一组函数

val ：操作数组中 DOM 对象的 value 属性.

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

text ：操作数组中所有 DOM 对象的【文字显示内容属性】

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

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

 $(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
 $(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

5.2 第二组函数

hide： $(选择器).hide() :将数组中所有 DOM 对象隐藏起来
show： $(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
remove ：$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
empty ： $(选择器).empty()：将数组中所有 DOM 对象的子对象删除

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

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

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

$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。

each ：对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。

语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
		index: 数组的下标
		element: 数组的对象

6. 事件

为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作

6.1 元素绑定

 $(选择器).事件名称( 事件的处理函数)
 
       $(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
	   
	   事件名称：就是js中事件去掉on的部分， 例如 js中的单击事件 onclick(),
	             jquery中的事件名称，就是click，都是小写的。
       事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。

		例如给id是btn的按钮绑定单击事件
			$("#btn").click(funtion(){
	          alert("btn按钮单击了")
			})

6.2 on() 绑定事件

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

	 事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
	 事件的处理函数： function 定义。

	  例如， 
		  <input type="button" id="btn">			  
		   $("#btn").on("click", function() { 处理按钮单击 } )

7. Ajax

没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。 jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。

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

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

如：使用JS的请求方式为：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用json格式的数据</title>
    <script>
        function doSearch() {
            // 1. 创建异步对象
            var xmlHttp = new XMLHttpRequest();
            // 2. 绑定事件
            xmlHttp.onreadystatechange = function () {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                    var data = xmlHttp.responseText;
                    //eval是执行括号中的代码，把json转换为json对象
                    var jsonbj = eval("(" +data +")")
                    //更新dom对象
                    document.getElementById("proname").value = jsonbj.name;
                    document.getElementById("projiancheng").value = jsonbj.jiancheng;
                    document.getElementById("proshenghui").value = jsonbj.shenghui
                }
            }
            // 3. 初始化异步对象请求参数
            var proid = document.getElementById("proid");
            xmlHttp.open("get","two",true)

            // 4. 发送请求
            xmlHttp.send()

        }
    </script>
</head>
<body>
<p>ajax请求使用json格式的数据</p>
<table>
    <tr>
        <td>省份编号：</td>
        <td><input type="text" id="proid">
            <input type="button" value="搜索" onclick="doSearch()">
        </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>

使用JQuery可以如下所示：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用json格式的数据</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn").click(function(){
                // 获取请求参数
                var proid = $("#proid").val();
                // 发起ajax请求
                $.ajax({
                    url:"two",
                    data:{
                        "proid":proid
                    },
                    dataType:"json",
                    success:function (resp) {
                        $("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="btn">
        </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>

 例如： $.ajax(  {  async:true , 
			        contentType:"application/json" , 
			        data: {name:"lisi",age:20 },
					dataType:"json",
					error:function(){
                              请求出现错误时，执行的函数
					 },
				    success:function( data ) {
                      // data 就是responseText, 是jquery处理后的数据。

				    },
					url:"bmiAjax",
					type:"get"
	}  
									 
)

 json结构的参数说明：

 1)async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
        xmlHttp.open(get,url,true),第三个参数一样的意思。
 2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
                例如你想表示请求的参数是json格式的， 可以写application/json
 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对象， 当readyState==4 && status==200的时候。

 7)url:请求的地址
 8)type:请求方式，get或者post， 不用区分大小写。 默认是get方式。

主要使用的是 url , data ,dataType, success .

爱学习的小奶狗

关注

0
点赞
踩
0

收藏

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

1. 什么是JQueryjQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作。为什么要使用jQuery？？它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象。（1）写少代码,做多事情【write less do more】（2）免费，开源且轻量级的 js 库
复制链接

扫一扫