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

Web阶段：第五章：JQuery库（上）

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

点击：API文档下载

Jquery介绍

1.什么是JQuery ?

jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。

2.JQuery核心思想:

它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

3.JQuery流行程度

jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

4.JQuery好处:

jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

Jquery 的初体验

需求：使用Jquery和javascript给一个按钮绑定单击事件

注意：使用Jquery之前要将第三方jar包导入

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      //使用javaScript给一个按钮绑定单击事件
      window.onload = function() {
        //1 获取标签对象
        var btnObj = document.getElementById("btnId");
        //2 通过标签对象.事件名 = function(){}
        btnObj.onclick = function() {
          alert("js原生绑定的单击事件");
        }
      }
      //使用Jquery给一个按钮绑定单击事件，Jquery中的$()代替window.onload
      // alert($); // 测试jquery引入是否成功！$是jquery的核心函数
      $(function(){ // 页面加载完成之后====>>>>window.onload = function()功能一样
        var $btnObj = $("#btnId");// 根据id属性值查询标签对象
        $btnObj.click( function(){  // 绑定事件
          alert("这是jquery绑定的单击事件");
        } );
      });
    </script>
  </head>
  <body>
    <button id="btnId">SayHello</button>
  </body>
</html>

常见问题？

1、使用jquery一定要引入jquery库吗？ 答案： 是

2、jquery中的$到底是什么？ 答案： 核心函数

3、怎么为按钮添加点击响应函数的？ 答案： 操作如下：

①获取标签对象 var $btnObj = $("#btnId");// 根据id属性值查询标签对象

②通过标签对象.click( function(){} ) 绑定了函数

Jquery 核心函数 $()

$ 是jquery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数

1、传入参数为 [ 函数 ] 时：

$( function(){} ); 功能跟 window.onload一样。都是页面加载完成之后。

2、传入参数为 [ HTML 字符串 ] 时：

$(“我是span标签”); 创建一个标签对象

相当于如下代码：

var spanObj = document.createElement(“span”);

spanObj.innerHTML = “我是span标签”;

document.body.appendChild( spanObj );

3、传入参数为 [ 选择器字符串 ] 时：$(“#id”)

$("#div01");// 根据id查询标签对象，跟document.getElementById()一样

4、传入参数为 [ DOM对象 ] 时： $(this)

var divObj = document.getElementById(“div01”); // dom对象

alert( $( divObj ) ); // jquery对象

Jquery对象和dom对象区分

什么是jquery对象，什么是dom对象?

Dom对象

1.通过getElementById()查询出来的标签对象是Dom对象

2.通过getElementsByName()查询出来的标签对象是Dom对象

3.通过getElementsByTagName()查询出来的标签对象是Dom对象

4.通过createElement() 方法创建的对象，是Dom对象

JQuery对象

5.通过JQuery提供的API创建的对象，是JQuery对象。

例如：$("<span>我是span标签</span>");是jquery对象

6.通过JQuery包装的Dom对象，也是JQuery对象

7.通过JQuery提供的API查询到的对象，是JQuery对象

Jquery对象的本质是什么？

jquery对象是一个Dom对象的数组 + jquery 的一系列功能函数的总和。

Jquery对象和Dom对象使用区别？

jquery对象不能使用dom对象的属性和方法

var divObj = document.getElementById("testDiv");
// jquery对象也不能使用dom对象的属性和方法
var $divObj = $( divObj );
alert( $divObj.innerHTML );

dom对象也不能使用jquery对象的属性的方法

var divObj = document.getElementById("testDiv");
//dom对象不能使用jquery对象的方法
divObj.onclick = function(){
  alert(1);
}

Dom对象和Jquery对象互转

dom对象转化为jquery对象：var $jqueryObj = $(dom对象)

1、先有dom对象

var divObj = document.getElementById(“testDiv”); // dom对象

2、通过核心函数转成jquery对象

$( divObj ); //jquery对象

jquery对象转为dom对象：var dom = $jqueryObj[下标];

1、先有jquery对象

2、通过下标取出需要的dom对象

jquery选择器

基本选择器

1.#ID 选择器：根据id查找标签对象

2…class 选择器：根据class查找标签对象

3.element 选择器：根据标签名查找标签对象

4.* 选择器：表示任意的，所有的元素

5.selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回

案例：

$(document).ready(function(){
  //1.选择 id 为 one 的元素  #id
  $("#btn1").click(function(){
    $("#one").css("background-color","#bbffaa");
  });
  //2.选择 class 为 mini 的所有元素  .class
  $("#btn2").click(function(){
    $(".mini").css("background-color","#bbffaa");
  });
  //3.选择 元素名是 div 的所有元素 标签名选择器  直接传入标签名
  $("#btn3").click(function(){
    $("div").css("background-color","#bbffaa");
  });
  //4.选择所有的元素  所有元素选择器   *
  $("#btn4").click(function(){
    $("*").css("background-color","#bbffaa");
  });
  //5.选择所有的 span 元素和id为two的元素    [所有的 span 元素:标签选择器  标签名]
  //                [id为two的元素:id选择器  #id]
  //                组选择器  $(s1,s2...)
  $("#btn5").click(function(){
    $("span,#two").css("background-color","#bbffaa");
  });
});

p.myClass

p是标签名

.myClass是类型

要求的结果必须是：标签名必须是p标签，而且这个标签还要有myClass的类型

层级选择器

1.ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素

2.parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

3.prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素

4.prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

案例：

//$(document).ready(function(){});全写    跟 $(function(){}); 一样。简写
$(document).ready(function(){
  //1.选择 body 内的所有 div 元素 （后代选择器）
  $("#btn1").click(function(){
    $("body div").css("background", "#bbffaa");
  });
  //2.在 body 内, 选择div子元素  （子元素选择器）
  $("#btn2").click(function(){
    $("body > div").css("background", "#bbffaa");
  });
  //3.选择 id 为 one 的下一个 div 元素 （相邻元素选择器）
  $("#btn3").click(function(){
    $("#one+div").css("background", "#bbffaa");
  });
  //4.选择 id 为 two 的元素后面的所有 div 兄弟元素  （之后的兄弟元素选择器）
  $("#btn4").click(function(){ 
    $("#two~div").css("background", "#bbffaa");
  });
});

过滤选择器

基本过滤器

:first 获取第一个元素

:last 获取最后个元素

:not(selector) 去除所有与给定选择器匹配的元素

:even 匹配所有索引值为偶数的元素，从 0 开始计数

:odd 匹配所有索引值为奇数的元素，从 0 开始计数

:eq(index) 匹配一个给定索引值的元素

:gt(index) 匹配所有大于给定索引值的元素

:lt(index) 匹配所有小于给定索引值的元素

:header 匹配如 h1, h2, h3之类的标题元素

:animated 匹配所有正在执行动画效果的元素

案例：

$(document).ready(function(){
  //1.选择第一个 div 元素  
  $("#btn1").click(function(){
    $("div:first").css("background", "#bbffaa");
  });
  //2.选择最后一个 div 元素
  $("#btn2").click(function(){
    $("div:last").css("background", "#bbffaa");
  });
  //3.选择class不为 one 的所有 div 元素
  $("#btn3").click(function(){
    $("div:not(.one)").css("background", "#bbffaa");
  });
  //4.选择索引值为偶数的 div 元素
  $("#btn4").click(function(){
    $("div:even").css("background", "#bbffaa");
  });
  //5.选择索引值为奇数的 div 元素
  $("#btn5").click(function(){
    $("div:odd").css("background", "#bbffaa");
  });
  //6.选择索引值为大于 3 的 div 元素
  $("#btn6").click(function(){
    $("div:gt(3)").css("background", "#bbffaa");
  });
  //7.选择索引值为等于 3 的 div 元素
  $("#btn7").click(function(){
    $("div:eq(3)").css("background", "#bbffaa");
  });
  //8.选择索引值为小于 3 的 div 元素
  $("#btn8").click(function(){
    $("div:lt(3)").css("background", "#bbffaa");
  });
  //9.选择所有的标题元素
  $("#btn9").click(function(){
    $(":header").css("background", "#bbffaa");
  });
  //10.选择当前正在执行动画的所有元素
  $("#btn10").click(function(){
    $(":animated").css("background", "#bbffaa");
  });
  //11.选择没有执行动画的最后一个div
  $("#btn11").click(function(){
    $("div:not(:animated):last").css("background", "#bbffaa");
  });
});

内容过滤器

:contains(text) 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

:parent 匹配含有子元素或者文本的元素

:has(selector) 匹配含有选择器所匹配的元素的元素

案例：

$(document).ready(function(){
  //1.选择 含有文本 'di' 的 div 元素
  $("#btn1").click(function(){
    $("div:contains('di')").css("background", "#bbffaa");
  });
  //2.选择不包含子元素(或者文本元素) 的 div 空元素
  $("#btn2").click(function(){
    $("div:empty").css("background", "#bbffaa");
  });
  //3.选择含有 class 为 mini 元素的 div 元素
  $("#btn3").click(function(){
    $("div:has(.mini)").css("background", "#bbffaa");
  });
  //4.选择含有子元素(或者文本元素)的div元素
  $("#btn4").click(function(){
    $("div:parent").css("background", "#bbffaa");
  });
});

属性过滤器

[attribute] 匹配包含给定属性的元素。

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

案例：

$(function() {
  //1.选取含有 属性title 的div元素
  $("#btn1").click(function() {
    $("div[title]").css("background", "#bbffaa");
  });
  //2.选取 属性title值等于'test'的div元素
  $("#btn2").click(function() {
    $("div[title='test']").css("background", "#bbffaa");
  });
  //3.选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)
  $("#btn3").click(function() {
    $("div[title!='test']").css("background", "#bbffaa");
  });
  //4.选取 属性title值 以'te'开始 的div元素
  $("#btn4").click(function() {
    $("div[title^='te']").css("background", "#bbffaa");
  });
  //5.选取 属性title值 以'est'结束 的div元素
  $("#btn5").click(function() {
    $("div[title$='est']").css("background", "#bbffaa");
  });
  //6.选取 属性title值 含有'es'的div元素
  $("#btn6").click(function() {
    $("div[title*='es']").css("background", "#bbffaa");
  });   
  //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
  $("#btn7").click(function() {
    $("div[id][title*='es']").css("background", "#bbffaa");
  });
  //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
  $("#btn8").click(function() {
    $("div[title][title!='test']").css("background", "#bbffaa");
  });
});

[attribute!=value]补充：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){
      alert( $("div[id!='div01']").length );//2,没有属性id的也将被选中
    });
  </script>
</head>
<body>
  <div id="div01"></div>
  <div></div>
  <div id="div03"></div>
</body>

可见性过滤选择器

:hidden 所有隐藏的元素

:visible 所有可见元素

案例：

$(document).ready(function(){
  //1.选取所有可见的  div 元素
  $("#btn1").click(function(){
    $("div:visible").css("background", "#bbffaa");
  });
  //2.选择所有不可见的 div 元素
  //不可见：display属性设置为none，或visible设置为hidden
  $("#btn2").click(function(){
    $("div:hidden").show("slow").css("background", "#bbffaa");
  });
  //3.选择所有不可见的 input 元素
  $("#btn3").click(function(){
    alert($("input:hidden").attr("value"));
  }); 
});

表单过滤器

:input 匹配所有 input, textarea, select 和 button 元素

:text 匹配所有 文本输入框

:password 匹配所有的密码输入框

:radio 匹配所有的单选框

:checkbox 匹配所有的复选框

:submit 匹配所有提交按钮

:image 匹配所有img标签

:reset 匹配所有重置按钮

:button 匹配所有input type=button 按钮

:file 匹配所有input type=file文件上传

:hidden 匹配所有不可见元素display:none 或 input type=hidden

表单对象的属性

:enabled 可用的

:disabled 不可用的

:checked 选择的，checkbox或者单选按钮的选择 复选框、单选框等

:selected 选择的，下拉列表的选择 匹配所有选中的option元素

案例：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Untitled Document</title>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){
      //1.对表单内 可用 文本输入框 赋值操作
      $("#btn1").click(function(){
        // .val() 方法 专门用来操作表单项的value属性
        $(":text:enabled").val("国哥太帅！");
      });
      //2.对表单内 不可用input 赋值操作
      $("#btn2").click(function(){
        $(":text:disabled").val("不可用，我也可以改");
      });
      //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
      $("#btn3").click(function(){
        alert( $(":checkbox:checked").length );
      });
      //4.获取多选框，每个选中的value值
      $("#btn4").click(function(){
        //1 获取全部选中的复选框
        var $checkedObjs = $(":checkbox:checked");
        //2 遍历所有复选框。转成dom对象。就可以使用.value
          //for (var i = 0; i < $checkedObjs.length; i++) {
            //alert( $checkedObjs[i].value );
          //}
        // each 方法   用来遍历jquery的每个元素
        $checkedObjs.each(function(){
            //在jquery对象的each遍历的function函数中，有一个this对象
          //这个this对象，是当前正在遍历到的dom对象
          alert( this.value );
        });
      });
      //5.获取下拉框选中的内容  
      $("#btn5").click(function(){
        //1 获取全部选中的option标签对象
        $(":selected").each(function(){
          //在jquery的each遍历的function函数中，有一个this对象，这个this对象是当前正在遍历到的dom对象
          alert(this.innerHTML)
        });
      });
    })  
  </script>
</head>
<body>
  <h3>表单对象属性过滤选择器</h3>
   <button id="btn1">对表单内 可用文本输入框 赋值操作.</button>
     <button id="btn2">对表单内 不可用文本输入框 赋值操作.</button><br /><br />
   <button id="btn3">获取多选框选中的个数.</button>
   <button id="btn4">获取多选框选中的内容.</button><br /><br />
        <button id="btn5">获取下拉框选中的内容.</button><br /><br />   
  <form id="form1" action="#">      
    可用元素: <input name="add" value="可用文本框1"/><br>
    不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
    可用元素: <input name="che" value="可用文本框2"/><br>
    不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
    <br>  
    多选框: <br>
    <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
    <input type="checkbox" name="newsletter" value="test2" />test2
    <input type="checkbox" name="newsletter" value="test3" />test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
    <input type="checkbox" name="newsletter" value="test5" />test5        
    <br><br>
    下拉列表1: <br>
    <select name="test" multiple="multiple" style="height: 100px" id="sele1">
      <option>浙江</option>
      <option selected="selected">辽宁</option>
      <option>北京</option>
      <option selected="selected">天津</option>
      <option>广州</option>
      <option>湖北</option>
    </select>
    <br><br>
    下拉列表2: <br>
    <select name="test2">
      <option>浙江</option>
      <option>辽宁</option>
      <option selected="selected">北京</option>
      <option>天津</option>
      <option>广州</option>
      <option>湖北</option>
    </select>
  </form>   
</body>

补充：下拉列表多项选择：multiple=“multiple”

<select name="test" multiple="multiple" style="height: 100px" id="sele1">
  <option>浙江</option>
  <option selected="selected">辽宁</option>
  <option>北京</option>
  <option selected="selected">天津</option>
  <option>广州</option>
  <option>湖北</option>
</select>

补充：checked选择的，checkbox或者单选按钮的选择 复选框、单选框等

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){
        //alert( $(":checked").length );//3
      var $checkedObjs = $(":selected");//建议使用:selected代替:checked
      for (var i = 0; i < $checkedObjs.length; i++) {
        alert($checkedObjs[i]);
      }
    });
  </script>
</head>
<body>
  <input type="radio" checked="checked" />
  <input type="checkbox" checked="checked" />
  <select>
    <option>xxxx</option>
    <option selected="selected">aaaa</option>
    <option>bbbb</option>
  </select>
</body>

文章标签：
Java
JavaScript
前端开发
索引
数据安全/隐私保护
API
关键词：
web库
jQuery Web
jQuery库
web jQuery
web jquery库
我是廖志伟
目录
相关文章
招风的黑耳
|
3月前
WEB端交互元件库：Axure设计师的高效利器
EQL UI是一款功能强大、组件丰富的Axure元件库，涵盖500+设计组件与完整后台模板，助力设计师高效搭建高保真原型，提升产品设计效率与质量。
招风的黑耳
657 128
神明木佑
|
12月前
|
JavaScript 前端开发 开发者
jQuery：JavaScript库的瑰宝
jQuery：JavaScript库的瑰宝
神明木佑
268 3
八百标兵奔北坡
|
移动开发 JavaScript 数据可视化
D3.js Web库
D3.js Web库
八百标兵奔北坡
428 4
GG2020gg
|
JSON 安全 JavaScript
Web安全-JQuery框架XSS漏洞浅析
Web安全-JQuery框架XSS漏洞浅析
GG2020gg
1968 3
跃@sir
|
12月前
|
JavaScript 前端开发 API
深入了解jQuery：简化Web开发的强大工具
【10月更文挑战第11天】深入了解jQuery：简化Web开发的强大工具
跃@sir
96 0
Star时光
|
12月前
|
JavaScript 前端开发 API
深入了解jQuery：快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery：快速、高效的JavaScript库
Star时光
137 0
土木林森
|
移动开发 JavaScript 前端开发
揭秘！如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站？你的设计梦想即将照进现实！
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py，并启动服务器。接着，在Web2py中创建新应用，例如命名为“ResponsiveSite”。随后，编写HTML5基本结构，包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码，实现响应式布局。最后，通过在`scripts.js`中加入jQuery脚本提升页面交互性，如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础，便于进一步扩展和优化。
土木林森
126 1
招风的黑耳
|
开发者 UED
Axure“Web高端交互元件库”：产品与设计的得力助手
这套“Web高端交互元件库”精心构建了四大板块内容，分别是登陆首页集合、Web框架集合、表单元件集合以及主流后台组件。每一板块都包含了大量实用且美观的交互元件，设计师与开发者可以根据具体项目需求，快速找到并应用这些元件，从而大大提升工作效率。
招风的黑耳
244 1
刘志辉~
|
JavaScript 前端开发 开发者
jQuery：JavaScript库的瑰宝
jQuery：JavaScript库的瑰宝
刘志辉~
215 4
小空门123-30335
|
机器人 Shell 开发者
`roslibpy`是一个Python库，它允许非ROS（Robot Operating System）环境（如Web浏览器、移动应用等）与ROS环境进行交互。通过使用`roslibpy`，开发者可以编写Python代码来远程控制ROS节点，发布和订阅话题，以及调用服务。
`roslibpy`是一个Python库，它允许非ROS（Robot Operating System）环境（如Web浏览器、移动应用等）与ROS环境进行交互。通过使用`roslibpy`，开发者可以编写Python代码来远程控制ROS节点，发布和订阅话题，以及调用服务。
小空门123-30335
1066 8