• jQuery内容概述

    文章目录

    jQuery

    jQuery是js库

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

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

    • 官网地址： https://jquery.com/

      • 官网的解释（了解就行）：
        • jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。 它通过易于使用的 API 在大 量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通 过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

    jQuery的优点

    （1）写少代码,做多事情【write less do more】

    （2）免费，开源且轻量级的 js 库，容量很小

    （3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome

    （4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX 功能

    （5）文档手册很全，很详细

    （6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）

    （7）出错后，有一定的提示信息

    （8）不用再在 html 里面通过

    • 例如：使用 JavaScript 定位 DOM 对象常用的三种方式：

    （1）通过 ID 属性：document.getElementById()

    （2）通过 class 属性：getElementsByClassName()

    （3）通过标签名：document.getElementsByTagName()

    • 上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出 错。jQuery 分别使用**$(“#id”) , $(“.class 名”) , $(“标签名)** 封装了上面的 js 方法。

    • 引入jQuery:

    • /* 
1.  $(document) ,  $是jQuery中的函数名称， document是函数的参数，作用是 document对象变成  jQuery函数库可以使用的对象。 
2.  ready：是jQuery中的函数， 是准备的意思， 当页面的dom对象加载成功后会执行ready函数的内容。  ready 相当于js中的onLoad事件
3.  function()自定义的表示onLoad后要执行的功能。
4.  下面两种方法效果一致，第一种更标准，第二种更简化
			*/
$(document).ready(function(){
    //自定义的功能代码
    alert("Hello jQuery")
}) 

$( function(){
    //代码内容
    alert("Hello JQuery 快捷方式")
    }    
)

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16

    dom对象和jquery对象

    • dom对象，使用javascript的语法创建的对象叫做dom对象，也就是js对象。
    var obj = document.getElementById("txt1");  
// obj是dom对象，也叫做js对象
obj.value;

    • 1
    • 2
    • 3

    • jquery对象： 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。

      • 例如: var jobj = $(“#txt1”)
      • jobj就是使用jquery语法表示的对象。也就是jquery对象。jobj它是一个数组。而现在数组中就一个值。

    • dom对象可以和jquery对象相互的转换。

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

    • 为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。
      当你的dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。

    dom和jquery对象之间的转换

    • 使用用 ( D O M 对象 ) 方式，可以 D O M 对象转换为 j Q u e r y 对象，转换为 j Q u e r y 对象才可以使用 j Q u e r y 中的提供的方法，操作 D O M 对象。一般情况下，在命名 j Q u e r y 对象时，为了与 D O M 对象进行区分， ∗ ∗ 习惯性的以 (DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以 使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了 与 DOM 对象进行区分，**习惯性的以 (DOM对象)方式，可以DOM对象转换为jQuery对象，转换为jQuery对象才可以使用jQuery中的提供的方法，操作DOM对象。一般情况下，在命名jQuery对象时，为了与DOM对象进行区分，∗∗习惯性的以 开头**。

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

      • dom -> jquery

      • <script type="text/javascript">
	function btnClick(){
		//获取dom对象
		var obj = document.getElementById("btn");
		//使用dom的value属性,获取值
		alert("使用dom对象的属性="+obj.value)
				
		//把dom对象转jquery,使用jquery库中的函数
		var jobj = $(obj);
		//调用jquery中的函数,获取value的值
		alert( jobj.val() )
	}
			
script>

<body>
	<input type="button" id="btn" value="==我是按钮==" onclick="btnClick()" />
body>

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18

      • jquery -> dom

      • <script type="text/javascript">
 		function btnClick(){
 			//使用jquery的语法,获取页面中的dom对象
 			//var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
 			var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
 			//alert( obj.value)
 				var num  = obj.value;
 				obj.value = num * num;
 		}
 			
 	script>
 	<body>
 		 <div>
 			 <input type="button" value="计算平方" onclick="btnClick()" /><br/>
 			 <input type="text" id="txt" value="整数" />
 		div>
 	body>

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17

    选择器

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

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

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

    ? 3） 标签选择器， 语法： $(“标签名称”)
    ? 使用标签名称定位dom对象的

    代码示例：

    <style type="text/css">
    /* 对所有div标签全局应用 */
    div{
        background: gray;
        width: 200px;
        height: 100px;
    }
    
	/* 自定义样式，仅对class="two"的标签生效 */
    .two{
        background: gold;
        font-size: 20pt;
    }
style>
<script type="text/javascript" src="js/jquery-3.4.1.js">script>
<script type="text/javascript">
    function fun1(){
        //id选择器
        var obj = $("#one");
        //使用jquery中改变样式的函数
        obj.css("background","red");
    }

    function fun2(){
        //使用样式选择器
        var obj = $(".two");
        obj.css("background","yellow");
    }

    function fun3(){
        //标签选择器
        var obj = $("div"); //数组有3个对象
        //jquery的操作都是操作数组中的全部成员.
        //所以是给所有的div都设置的背景色
        obj.css("background","blue");
    }
	
    function fun4(){
        // 所有选择器,所有dom
        var obj = $("*");
        obj.css("background","green");
    }

    function fun5(){
        var obj = $("#one,span");
        //obj.css("background","red");

        //obj是一个数组, 有两个成员, 1 是span dom对象
        //$(  obj[1] ) : jquery对象
        // $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
        $(  obj[1]  ).css("background","green");//就是span

    }

    document.getElementById("one"); //js的语法规则 ,value
    $("#one"); //jquery语法

script>
head>
<body>
    <div id="one">我是one的divdiv><br/>
    <div class="two">我是样式是two的divdiv>
    <br/>
    <div>我是没有id，class的divdiv>
    <br/>
    <span class="two">我是span标签span>
    <br/>
    <input type="button" value="获取id是one的dom对象" onclick="fun1()" />
    <br/>
    <input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
    <br/>
    <input type="button" value="使用标签选择器" onclick="fun3()" /> 
    <br/>
    <input type="button" value="所有选择器" onclick="fun4()"/>
    <br/>
    <input type="button" value="组合选择器" onclick="fun5()"/>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77

    1. 所有选择器 语法：$(“*”) 选取页面中所有 DOM 对象。

    2. 组合选择器 组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。 语法：$(“id,class,标签名”)

    表单选择器

    使用标签的type属性值，定位dom对象的方式。

    • 语法： $(“:type属性的值”)
      • $(“:tr”): 不能用，tr 不是 input 标签
    • 例如：
      • $(“:text”)选取所有的单行文本框
      • $(“:password”)选取所有的密码框
      • $(“:radio”)选取所有的单选框
      • $(“:checkbox”)选取所有的多选框
      • $(“:file”)选取所有的上传按钮
    <script type="text/javascript">
    function fun1(){
        //使用表单选择器 $(":type的值")
        var obj = $(":text");
        //获取value属性的值 val()是jquery中的函数, 读取value属性值
        alert( obj.val());
    }

    function fun2() {
        //定位radio
        var obj = $(":radio");//数组,目前是两个对象 man ,woman
        //循环数组,数组中的成员是 dom对象,可以dom的属性或者函数
        for(var i=0;i<obj.length;i++){
            //从数组值获取成员,使用下标的方式
            var  dom = obj[i];
            //使用dom对象的属性,获取value值
            alert(dom.value)
        }
    }

    function fun3(){
        //定位checkbox
        var obj = $(":checkbox"); //数组,有三个对象
        for(var i=0;i<obj.length;i++){
            var dom = obj[i];
            //alert(dom.value);
            //使用jqueyr的val函数, 获取value的值
            //1. 需要jquery对象
            var jObj = $(dom); // jObj 是jquery对象
            //2. 调用jquery函数
            alert("jquery的函数调用=" + jObj.val());

        }

    }		
script>
<body>
    <input type="text" value="我是type=text" /><br/>
    <br/>
    <input type="radio" value="man" /> 男 <br/>
    <input type="radio" value="woman" /> 女 <br/>
    <br/>
    <input type="checkbox" value="bike" /> 骑行 <br/>
    <input type="checkbox" value="football" /> 足球 <br/>
    <input type="checkbox" value="music" /> 音乐 <br/>
    <br/>
    <input type="button" value="读取text的值" onclick="fun1()"/>
    <br/>
    <input type="button" value="读取radio的值" onclick="fun2()"/>
    <br/>
    <input type="button" value="读取checkbox的值" onclick="fun3()"/>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    过滤器

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

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

      • 过滤器有是一个字符串，用来筛选dom对象的。
      • 过滤器不能单独使用， 必须和选择器一起使用。

      1） ( " 选择器 : f i r s t " ) ∗ ∗ : 第一个 d o m 对象 2 ） ∗ ∗ ("选择器:first")** : 第一个dom对象 2）** ("选择器:first")∗∗:第一个dom对象2）∗∗(“选择器:last”): 数组中的最后一个dom对象
      3） ( " 选择器 : e q ( 数组的下标 ) " ) ∗ ∗ ：获取指定下标的 d o m 对象 4 ） ∗ ∗ ("选择器:eq(数组的下标)")** ：获取指定下标的dom对象 4）** ("选择器:eq(数组的下标)")∗∗：获取指定下标的dom对象4）∗∗(“选择器:lt(下标)”) ： 获取小于下标的所有dom对象
      5）$(“选择器:gt(下标)”) ： 获取大于下标的所有dom对象

    <script type="text/javascript">

    // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
    // 相当于是onLoad().
    $(function() {
        //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
        $("#btn1").click(function(){
            //过滤器
            var obj = $("div:first");
            obj.css("background","red");
        }) 

        //绑定事件
        $("#btn2").click(function(){
            var obj = $("div:last");
            obj.css("background","green");
        })

        //绑定btn3的事件
        $("#btn3").click(function(){
            var obj = $("div:eq(3)");
            obj.css("background","blue");
        })

        $("#btn4").click(function(){
            var obj = $("div:lt(3)");
            obj.css("background","orange");
        })

        $("#btn5").click(function(){
            var obj = $("div:gt(3)");
            obj.css("background","yellow");
        })

        $("#txt").keydown(function(){
            alert("keydown")
        })
    })
script>

<body>
    <input type="text" id="txt" />
    <div id="one">我是div-0div>
    <div id="two">我是div-1div>
    <div>我是div-2
        <div>我是div-3div>
        <div>我是div-4div>
    div>
    <div>我是div-5div>
    <br />
    <span>我是spanspan>

    <br/>
    <input type="button" value="获取第一个div" id="btn1"/>
    <br/>
    <input type="button" value="获取最后一个div" id="btn2"/>
    <br/>
    <input type="button" value="获取下标等于3的div" id="btn3"/>
    <br/>
    <input type="button" value="获取下标小于3的div" id="btn4"/>
    <br/>
    <input type="button" value="获取下标大于3的div" id="btn5"/>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    表单属性过滤器

    • 根据表单中dom对象的状态情况，定位dom对象的。
      • 启用状态 enabled
      • 不可用状态 disabled
      • 选择状态 checked ， 例如radio， checkbox
    <script type="text/javascript">

    // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
    // 相当于是onLoad().
    $(function() {
        //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
        $("#btn1").click(function(){
            //获取所有可以使用的text
            var obj  = $(":text:enabled");
            //设置 jquery数组值所有dom对象的value值
            obj.val("hello");
        }) 

        $("#btn2").click(function(){
            //获取选中的checkbox
            var obj  = $(":checkbox:checked");
            for(var i=0;i<obj.length;i++){
                //alert( obj[i].value);
                alert(    $(obj[i]).val()  ) 
            }
        })
    })
script>
<body>
    <input type="text"  id="txt1" value="text1" /><br/>
    <input type="text"  id="txt2" value="text2" disabled="true"/><br/>
    <input type="text"  id="txt3" value="text3" /><br/>
    <input type="text"  id="txt4" value="text4" disabled/><br/>
    <br/>
    <input type="checkbox" value="游泳" />游泳 <br/>
    <input type="checkbox" value="健身" checked />健身 <br/>
    <input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
    <br/>
    <select id="yuyan">
        <option value="java">java语言option>
        <option value="go" selected>go语言option>
        <option value="python">python语言option>
    select>

    <br/>
    <input type="button" value="设置可以的text的value是hello" id="btn1"/>
    <br/>
    <button id="btn2">显示选中的复选框的值button>
    <br/>
    <button id="btn3">显示选中下拉列表框的值button>
body>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 选择指定下拉列表的被选中元素
      • 选择器>option:selected
    <script type="text/javascript">

    // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
    // 相当于是onLoad().
    $(function() {
        //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
        $("#btn3").click(function(){
            //获取select选中的值
            //var obj= $("select>option:selected");
            var obj = $("#yuyan>option:selected");
            alert(obj.val());
        })
    })
script>
<body>
    <button id="btn3">显示选中下拉列表框的值button>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    函数

    第一组

    1. val 操作数组中 DOM 对象的 value 属性
      • $(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
      • $(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
    2. text 操作数组中所有 DOM 对象的【文字显示内容属性】
      • $(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
      • $(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
    3. attr 对 val, text 之外的其他属性操作
      • $(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
      • $(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
    <script type="text/javascript">
    //在dom对象创建好后,绑定事件
    $(function(){
        $("#btn1").click(function(){
            //val() 获取dom数组中第一个对象的value属性值
            var text = $(":text").val();
            alert(text)
        })

        $("#btn2").click(function(){
            //设置所有的text的value为新值
            $(":text").val("三国演义");
        })

        $("#btn3").click(function(){
            //获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
            alert($("div").text());
        })

        $("#btn4").click(function(){
            //设置div的文本值
            $("div").text("新的div文本内容");
        })

        $("#btn5").click(function(){
            //读取指定属性的值
            alert($("img").attr("src"));
        })

        $("#btn6").click(function(){
            //设置指定属性的,指定值
            $("img").attr("src","img/ex2.jpg");
            //val(), text();
        })
    })



script>
head>
<body>
    <input type="text" value="刘备" /><br/>
    <input type="text" value="关羽" /><br/>
    <input type="text" value="张飞" /><br/>
    <br/>
    <div>1.我第一个divdiv>
    <div>2.我第二个divdiv>
    <div>3.我第三个divdiv>
    <br/>
    <img src="img/ex1.jpg" id="image1" />
    <br/>

    <input type="button" value="获取第一文本框的值" id="btn1"/>
    <br/>
    <br/>
    <input type="button" value="设置所有文本框的value值" id="btn2"/>
    <br/>
    <br/>
    <input type="button" value="获取所有div的文本值" id="btn3"/>
    <br/>
    <br/>
    <input type="button" value="设置div的文本值" id="btn4"/>
    <br/>
    <br/>
    <input type="button" value="读取src属性的值" id="btn5"/>
    <br/>
    <br/>
    <input type="button" value="设置指定的属性值" id="btn6"/>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    第二组

    1. hide $(选择器).hide():将数组中所有 DOM 对象隐藏起来

    2. show $(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来

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

    4. empty $(选择器).empty()：将数组中所有 DOM 对象的子对象删除 （断子绝孙）

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

      • $(选择器).append(“我动态添加的 div”)

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

      • $(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
      • $(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
    <script type="text/javascript">
    //在dom对象创建好后,绑定事件
    $(function(){
        $("#btn1").click(function(){
            //使用remove:删除父和子所有的dom对象
            $("select").remove();

        })

        $("#btn2").click(function(){
            //使用empty 删除子dom对象
            $("select").empty();
        })

        $("#btn3").click(function(){
            //使用append,增加dom对象
            //$("#fatcher").append("")

            //增加一个table
            $("#fatcher").append("
    第一列第二列
    "    );
        })

        $("#btn4").click(function(){
            //使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
            //alert($("span").text()); // 我是mysql数据库
            alert( $("span").html() ); //我是mysql 数据库

        })

        $("#btn5").click(function(){
            //使用 html(有参数):设置dom对象的文本值
            $("span").html("我是新的数据");

        })

    })
    script>
<body>
    <input type="text" value="刘备" />
    <input type="text" value="关羽" />
    <input type="text" value="张飞" />

    <br/>
    <select>
        <option value="老虎">老虎option>
        <option value="狮子">狮子option>
        <option value="豹子">豹子option>
    select>
    <br/>
    <br/>
    <select>
        <option value="亚洲">亚洲option>
        <option value="欧洲">欧洲option>
        <option value="美洲">美洲option>
    select>
    <br/>
    <br/>
    <div id="fatcher">我是第一个divdiv>
    
    <br/>    
    <span>我是mysql <b>数据库b>span>
    <br/>
    <span>我是jdbcspan>
    <br/>
    <br/>

    <input type="button" value="使用remove删除父和子对象" id="btn1"/>
    <br/>
    <br/>
    <input type="button" value="使用empty删子对象" id="btn2"/>
    <br/>
    <br/>
    <input type="button" value="使用append,增加dom对象" id="btn3"/>
    <br/>
    <br/>
    <input type="button" value="获取第一个dom的文本值" id="btn4"/>
    <br/>
    <br/>
    <input type="button" value="设置span的所以dom的文本值" id="btn5"/>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    each语法

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

    ? var arr = [ 1, 2, 3 ] //数组
    ? var json = {“name”:“lisi”,“age”:20 }
    ? var obj = $(“:text”);

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

    • $: 相当于是java的一个类名

    • each:就是类中的静态方法。

      • 静态方法调用，可以使用 类名.方法名称

    • 处理函数:function(index, element) :

      • index, element都是自定义的形参， 名称自定义(你可以定义成(i, n)实际上就是下标对于的值)。
        index：循环的索引
        element：数组中的成员
     js循环数组：
  for(var i=0;i<arr.length;i++){
     var item = arr[i]; //数组成员
		//操作数组成员
		output( i , item);
  }

 function output(index, element){
    输出index ，element
  }

------------------------------------------------------------------------

$("#btn6").click(function(){
    //循环普通数组,非dom数组
    var  arr = [ 11, 12, 13];
    $.each(arr, function(i,n){
        alert("循环变量："+i + "=====数组成员:"+ n);
    })
})

$("#btn7").click(function(){
    //循环json
    var json={"name":"张三","age":20};

    //var  obj = eval("{'name':'张三','age':20}");

    $.each(json,function(k,v){
        alert("k是key="+ k +",v是值value="+ v);
    })
})

$("#btn8").click(function(){
    //循环dom数组
    var domArray = $(":text");//dom数组

    $.each( domArray, function(i,n){
        // n 是数组中的dom对象
        alert("i="+i+"  , n="+n.value);
    })
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    2).循环jquery对象， jquery对象就是dom数组
    jquery对象.each( function(index,element){} )

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

})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    jquery中给dom对象绑定事件

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

    • 事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
    // 例如给id是btn的按钮绑定单击事件
$("#btn").click(funtion(){
 	alert("btn按钮单击了")
})

    • 1
    • 2
    • 3
    • 4
    1. on 事件绑定
      $(选择器).on( 事件名称 , 事件的处理函数)

    • 事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click

    • 事件的处理函数： function 定义

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

    • 1
    • 2
    • 3
    <script type="text/javascript">
    //在dom对象创建好后,绑定事件
    $(function(){
        $("#btn1").click(function(){
            //使用append增加dom对象
            $("#mydiv").append("");
            //使用on给按钮绑定事件
            $("#newBtn").on("click",function(){
                alert("新建的按钮被单击了");
            })
        })
    })
script>
<body>
    <div id="mydiv">
        我是一个div ，需要增加一个button
    div>

    <input type="button" value="创建一个button,绑定一个click" id="btn1"/>
    <br/>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    AJAX

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

    • 没有jquery之前，使用XMLHttpRequest做ajax ， 有4个步骤。

      • 创建XMLHTTPRequest对象
        • var xhr = new XMLHttpRequest();
      • 注册回调函数
        • xhr.onreadystatechange = function(){ }
      • 开启通道
        • xhr.open(“GET”, “/ajax/ajaxrequest2”, true)
      • 发送请求
        • xhr.send()

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

      1） . a j a x ( ) ∗ ∗ : j q u e r y 中实现 a j a x 的核心函数。 2 ） ∗ ∗ .ajax()** : jquery中实现ajax的核心函数。 2） ** .ajax()∗∗:jquery中实现ajax的核心函数。2）∗∗.post() : 使用post方式做ajax请求。 语法： . p o s t ( U R L , d a t a , f u n c t i o n ( d a t a , s t a t u s , x h r ) , d a t a T y p e ) 3 ） ∗ ∗ .post(URL,data,function(data,status,xhr),dataType) 3） ** .post(URL,data,function(data,status,xhr),dataType)3）∗∗.get()** : 使用get方式发送ajax请求。 语法：$.get(url,data,function(data,status,xhr),dataType)

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

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

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

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

    • json结构的参数说明：

      1)async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
      xmlHttp.open(get,url,true),第三个参数一样的意思。

      2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
      例如你想表示请求的参数是json格式的， 可以写application/json

      ? 默认是： “application/x-www-form-urlencoded”。

      3)data: 规定要发送到服务器的数据，可以是字符串，数组，json，表示请求的参数和参数值。 常用的是json格式的数据

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

      5)error**(xhr,status,error)**: 一个function ，表示当请求发生错误时，执行的函数。
      error:function() { 发生错误时执行 }

      6)success(result,status,xhr):一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
      之前使用XMLHttpRequest对象， 当readyState4 && status200的时候。

      7)url:请求的地址

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

    $.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"
         }  

     )

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

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

    • 代码示例：
    $(function(){
    $("#btn").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);
            }
        })
    });
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
  • 相关阅读:
    Appium+python+unittest搭建UI自动化框架！
    流批一体随想
    集合框架面试题
    vscode连接服务器一直retry
    我的创作纪念日
    解决问题:-1: error: LNK1104: 无法打开文件“D3dx9.lib”
    图像处理软件Photoshop 2023 mac新增功能 ps 2023中文版
    云计算 2月28号 （linux的磁盘分区）
    深入理解Java消息中间件-RabbitMQ
    剩余参数和展开运算符的区别
  • 原文地址：https://blog.csdn.net/weixin_62838185/article/details/134096602