备案控制台
开发者社区 开发与运维 文章 正文

jQuery

2023-01-06 104
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： jQuery

一、概述

 1、jQuery是js库，库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方， 里面有很多function函数


 2、作用：使用jQuery简化对dom的操作，执行事件处理，动画，ajax请求


二、dom对象和jQuery对象

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

   var obj = document.getElementById(“txt1”); obj是dom对象，也叫做js对象

   obj.value;


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

 例如 var jobj = $(“#txt1”), jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。

   现在数组中就一个值。


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


 dom对象可以转为jquery ， 语法： $(dom对象)

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


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


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


示例代码1：


<body>
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
    function btnClick(){
    //获取dom对象
    var obj = document.getElementById("btnClick");
    //使用dom对象的value属性,获取值
    alert(obj.value);
    //把dom对象转成jquery对象,使用jquery库中的函数
    var jobj = $(obj);
    //调用jquery中的函数,获取value的值
    alert(jobj.val());
    }
  </script>
  <input type="button" value="==我是按钮==" id="btnClick" onclick="btnClick()"/>
  </body>


示例代码2：


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


三、基本使用

1、获取jquery的js文件


2、在你的程序中加入js文件的地址


<script type="text/javascript" src="js/jquery-3.4.1.js
"></script>


3、获取jquery对象，调用它的函数


4、jquery3.4.1的压缩和非压缩版本的地址


链接：https://pan.baidu.com/s/1OoYRjPkM7DE_YAN8hDLMIA

提取码：acbk

四、选择器

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


1、基本选择器


（1）id选择器


语法： $(“#dom对象的id值”)

 通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。


（2）class选择器


语法： $(".class样式名)

 class表示css中的样式， 使用样式的名称定位dom对象的。


（3）标签选择器


语法： $(“标签名称”)

 使用标签名称定位dom对象的


（4）所有选择器


语法：$(“*”)


 选择页面中所有的dom对象


（5）组合选择器


语法：$(“#id,class,标签名”)


 使用id，class，标签的选择器，多个dom对象的定位


2、表单选择器


语法： $(“:type属性值”)


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


 例如，所有的单行文本，$(“:text”)


根据type属性值定位dom对象的，页面中的组件一定有type属性才可以使用

表单选择器和form标签无关


示例代码：


<body>
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <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
    for(var i=0;i<obj.length;i++){
      //循环数组,数组中的成员是dom对象,可以使用dom的属性或者函数
      //从数组中获取成员,使用下标的方式
      var dom = obj[i];
      //使用dom对象的属性,获取value值
      alert(dom.value);
      /* var jobj = $(obj);
      alert(jobj.val()); */
    }
    }
    function fun3(){
    //定位checkbox
    var obj = $(":checkbox");//数组,有三个对象
    for(var i=0;i<obj.length;i++){
      var dom = obj[i];
      // alert(dom.value);
      //使用jquery的val函数,获取value的值
      //1.需要jquery对象
      var jobj = $(dom);
      //2.调用jquery函数
      alert(jobj.val());
      }
    }
  </script>
  <input type="text" value="我是type=text" /><br>
  <input type="radio" value="man"  />男<br>
  <input type="radio" value="women" />女<br>
  <input type="checkbox" value="bike" />骑行<br>
  <input type="checkbox" value="football" />足球<br>
  <input type="checkbox" value="music" />音乐<br>
  <input type="button" value="我是type=text" onclick="fun1()" /><br>  
  <input type="button" value="获取radio属性值" onclick="fun2()" /><br>  
  <input type="button" value="获取checkbox属性值" onclick="fun3()" /><br>  
  </body>


五、过滤器

1、概念


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

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

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


2、基本过滤器


（1）$(“选择器:first”)

语法：$(“选择器:first”)


 定位数组中的第一个dom对象


（2）$(“选择器:last”)

语法：$(“选择器:last”)


 定位数组中的最后一个dom对象


（3）$(“选择器:eq(下标)”)

语法：$(“选择器:eq(数组的下标)”)


 定位到制定下标的dom对象


（4）$(“选择器:lt(下标)”)

语法：$(“选择器:lt(下标)”)


 定位小于指定下标的dom对象


（5）$(“选择器:gt(下标)”)

语法：$(“选择器:gt(下标)”)


  定位大于指定下标的dom对象


示例代码：


<style type="text/css">
    div{
    background: gray; 
    }
  </style>
  </head>
  <body>
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
    //$(document).ready(函数):当页面中的dom对象加载成功后,会执行ready()
    //相当于是onload()
    $(function(){
    //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了,才能使用
    $("#btn1").click(function(){
      //过滤器
      var obj = $("div:first");
      obj.css("background","red");
    })
    })
    //绑定btn2的事件
    $(function(){
    $("#btn2").click(function(){
      var obj = $("div:last");
      obj.css("background","green");
    })
    })
    //绑定btn3的事件
    $(function(){
    $("#btn3").click(function(){
      var obj = $("div:eq(3)");
      obj.css("background","blue");
    })
    })
    //绑定btn4的事件
    $(function(){
    $("#btn4").click(function(){
      var obj = $("div:lt(3)");
      obj.css("background","orange");
    })
    })
    //绑定btn5的事件
    $(function(){
    $("#btn5").click(function(){
      var obj = $("div:gt(3)");
      obj.css("background","yellow");
    })
    })
  </script>
  <div id="one">我是div-0</div>
  <div id="two">我是div-1</div>
  <div>我是div-2
       <div>我是div-3</div>
       <div>我是div-4</div>
  </div>
  <div>我是div-5</div>
  <br/>
  <span>我是sapn</span>
  <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"  /><br>  
  </body>


3、表单属性过滤器


使用dom对象的状态作为筛选条件，定位dom对象


（1）$(“选择器:enabled”)

语法：$(“选择器:enabled”)


  定位可用的dom对象


（2）$(“选择器:disabled”)

语法：$(“选择器:disabled”)


  定位不可用的dom对象


（3）$(“选择器:checked”)

语法：$(“选择器:checked”)


  定位选中的dom对象


（4）$(“选择器>option:selected“)

语法：$(“选择器:>option:selected”)


  定位下拉列表框选中选中的值


示例代码：


<body>
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
    $(function(){
    $("#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);//第一种方式
       var jobj = $(obj[i]);//第二种方式
       alert(jobj.val());
      }
    })
    $("#btn3").click(function(){
      //获取select选中的值
      var obj = $("select>option:selected");
      for(var i=0;i<obj.length;i++){
      var dom = obj[i];
      var jobj = $(dom);
      alert(jobj.val());
      }
    })
    })
  </script>
  <input type="text" value="text1" id="txt1" /><br>
  <input type="text" value="text2" id="txt2" disabled="true"/><br>
  <input type="text" value="text3" id="txt3" /><br>
  <input type="text" value="text4" id="txt4" disabled="true"/><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" select >go语言</option>
    <option value="python">python语言</option>
  </select>
  <br>
  <br>
  <input type="button" value="设置可以的text的value是hello" id="btn1"  /><br> 
  <button id="btn2">显示选中的复选框的值</button><br>
  <button id="btn3">获取select选中的值</button>
  </body>


六、函数

1、val()


操作对象的value属性值


2、text()


操作标签的文本内容


3、attr()


操作对象的value，文本以外的属性，例如：转换图片


4、remove()


删除dom对象和它的子对象，例如：删除多选框全部内容


5、empty()


删除dom的子对象


6、apppend()


添加dom对象


7、html()


操作文本标签，和JS中的innerHTML的作用一样


8、each()


循环函数，还可以循环数组，JSON对象，jquery对象


静态函数调用：$.each(要遍历的对象，function(index,element){处理程序})

使用jquery对象调用：jquery对象.each(function(index,element){处理程序})


示例代码1：


<body>
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
    $(function(){
    $("#btn1").click(function(){
      //读取第一个文本框的值
      //val()获取dom数组中第一个对象的value属性值
      var obj = $(":text").val();
      alert(obj);
    })
    $("#btn2").click(function(){
      //设置所有的text的value为新值
      var obj = $(":text").val("三国演义");
    })
    $("#btn3").click(function(){
      //获取div,text()参数,获取文本值,连接成字符串
      alert($("div").text());
    })
    $("#btn4").click(function(){
      //设置div的文本
      var obj = $("div").text("给div文本赋值");
    })
    $("#btn5").click(function(){
      //读取相片属性的值
      alert($("img").attr("src"));
    })
    $("#btn6").click(function(){
      //设置照片属性的值
      $("img").attr("src","img/a.jpg.jpeg");
    })
    })  
  </script>
  <input type="text" value="刘备" id="txt1" />
  <input type="text" value="关羽" id="txt2" /><br>
  <input type="text" value="张飞" id="txt3" /><br>
  <br>
  <div>我是第一个div</div>
  <div>我是第二个div</div>
  <div>我是第三个div</div>
  <br>
  <img src="img/aa972d47dec755eea813c22d2d42870d.jpeg" id="img" />
  <br>
  <input type="button" value="获取第一文本框的值" id="btn1" /><br>
  <input type="button" value="设置所有的text的value为新值" id="btn2" /><br>
  <input type="button" value="获取div,text()参数,获取文本值,连接成字符串" id="btn3" /><br>
  <input type="button" value="设置div的文本" id="btn4" /><br>
  <input type="button" value="读取相片属性的值" id="btn5" /><br>
  <input type="button" value="设置相片属性的值" id="btn6" /><br>
  </body>


示例代码2：


<body>
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <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对象
      $("div").append("<input type='button' value='新增加的按钮'>");
    })
    $("#btn4").click(function(){
      //使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
      alert($("span:first").text());//我是mysql数据库
      alert($("span:first").html());//我是mysql数据库
    })
    $("#btn5").click(function(){
      $("span:first").text("我是张三！")
      $("span:first").html("我是张三！")
    })
    $("#btn6").click(function(){
      //循环普通数组,非dom数组
      var arr = [12,58,35];
      $.each(arr,function(index,element){
      alert("循环变量" + index + "=========数组成员" + element);
       })
    })
    $("#btn7").click(function(){
      //循环json
      var json = {"name":"张三","age":"20"};
      $.each(json,function(i,n){
      alert("i的key值=" + i + ",n的值value=" + n);
      });
    })
    $("#btn8").click(function(){
      //循环dom数组
            var domArray = $(":text");
      $.each(domArray,function(i,n){
          alert("i= " + i + " ,n=" + n.value);
      })
    })
    $("#btn9").click(function(){
      //循环jquery数组
      $(":text").each(function(i,n){
      alert("i= " + i + " ,n=" + n.value);
      })
    })
    })
  </script>
  <input type="text" value="刘备" id="txt1" /><br>
  <input type="text" value="关羽" id="txt2" /><br>
  <input type="text" value="张飞" id="txt3" /><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>
  <span>我是mysql <b>数据库</b></span>
  <br>
  <span>我是jdbc</span>
  <br>
  <br>
  <div id="father">我是第一个div</div>
  <br>
  <input type="button" value="使用remove删除父和子对象" id="btn1" /><br>
  <input type="button" value="使用empty删除子对象" id="btn2" /><br>
  <input type="button" value="使用appand,增加dom" id="btn3" /><br>
  <input type="button" value="使用获取第一个dom的文本值" id="btn4" /><br>
  <input type="button" value="设置span的dom文本值" id="btn5" /><br>
  <input type="button" value="循环普通数组" id="btn6" /><br>
  <input type="button" value="循环json" id="btn7" /><br>
  <input type="button" value="循环dom数组" id="btn8" /><br>
  <input type="button" value="循环jquery对象" id="btn9" /><br>
  </body>


七、事件

1、绑定事件


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


$(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了

  事件名称：就是js中事件去掉on的部分， 例如 js中的单击事件 onclick(),

      jquery中的事件名称，就是click，都是小写的。

  事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。


例如给id是btn的按钮绑定单击事件


$("#btn").click(funtion(){
      alert("btn按钮单击了")
  })


2、on绑定事件


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


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

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


例如，


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


文章标签：
Java
JavaScript
前端开发
数据格式
JSON
游客ndtrvef2bkfgi
目录
相关文章
小华qvq
|
6天前
|
JSON JavaScript 前端开发
关于jQuery
关于jQuery
小华qvq
10 2
算精通
|
3月前
|
JavaScript 前端开发 开发工具
jQuery
jQuery是一个流行的JavaScript库,它简化了HTML文档的遍历、操作、事件处理和动画等任务,使得Web开发更加高效和直观。使用jQuery,可以轻松地添加、删除或修改HTML元素的内容,也可以方便地处理用户输入和表单验证等问题。jQuery还提供了丰富的插件和扩展,可以实现更多的功能,例如动画效果、滚动效果、表格排序等。
算精通
23 7
许潜行
|
5月前
|
存储 JavaScript 前端开发
jQuery01
jQuery01
许潜行
46 0
匿瘾
|
7月前
|
Web App开发 设计模式 JavaScript
jquery
jquery
匿瘾
35 0
阿选不出来
|
8月前
|
存储 JavaScript 前端开发
JQuery
JQuery
阿选不出来
53 0
游客o2spemb4lkrv6
|
12月前
|
机器学习/深度学习 存储 JSON
Jquery
介绍Jquery
游客o2spemb4lkrv6
82 0
游客d7sf7jc5pjjba
|
XML 缓存 JavaScript
jQuery（下）
jQuery（下）
游客d7sf7jc5pjjba
37 0
会洗碗的CV工程师
|
JSON 前端开发 JavaScript
Jquery 的使用
Jquery 的使用
会洗碗的CV工程师
60 0
半晴Miko
|
前端开发 JavaScript
Day16 jQuery
jQuery
半晴Miko
64 0
蓝帽子小智
|
设计模式 JavaScript 前端开发
html+js+Jquery（四）
html+js+Jquery（四）
蓝帽子小智
131 0
html+js+Jquery（四）