JavaScript交互式网页设计 • 【第6章初识jQuery】

程序员文章站 2022-03-11 10:51:22

全部章节 >>>>本章目录6.1 jQuery概述6.1.1 初识 jQuery6.1.2 jQuery 基本功能6.1.3 搭建 jQuery 开发环境6.1.4 编写一个简单的 jQuery 应用6.1.5 jQuery代码的特点6.1.6 实践练习6.2 jQuery 基本选择器6.2.1 jQuery 选择器概述6.2.2 基本选择器6.2.3 实践练习6.3 过滤选择器6.3.1 基本过滤选择器6.3.2 内......

全部章节 >>>>

本章目录

6.1.4 编写一个简单的 jQuery 应用

6.1 jQuery概述

6.1.1 初识 jQuery

为了解决开发过程中的兼容性问题，产生了许多JavaScript库，目前被频繁使用的JavaScript库包括 jQuery、Prototype、Spry 和 Ext JS

其中使用最广泛的JavaScrip库是jQuery, 是于2006年创建的一个JavaScript库

集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系
它的主旨是以更少的代码实现更多的功能（Write less,do more）

6.1.2 jQuery 基本功能

jQuery 基本功能

访问和操作 DOM 元素
对页面事件的处理
大量插件在页面中的运用
与 Ajax 技术的完美结合
大幅提高开发效率

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.1.3 搭建 jQuery 开发环境

下载 jQuery 文件库（http://jquery.com）
引入 jQuery 文件库

在页面<head></head> 标签对中加入如下代码：

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

JavaScript交互式网页设计 • 【第6章初识jQuery】

示例：单击按钮时，隐藏的 <div> 逐渐放大并显示出来

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $("#btn").click(function() {
        $("#info").show(2000);//show(2000) 表示用 2 秒显示标签
      });
   });
</script>
<input type="button" value=" 显示 " id="btn"/>
<div id="info"  style= "display:none">
    <img src="../img/mobile.jpg" width="350"/>
</div>

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.1.4 编写一个简单的 jQuery 应用

$(document).ready(function(){ }); 类似JavaScript代码:window.οnlοad=function(){ }
$(document).ready 在页面框架下载完毕后就执行；而 window.onload 必须在页面全部加载完毕（包括下载图片）后才能执行
$(document).ready(function(){ }) 可以简写成 $(function(){ })
$("#btn").click(function(){ }); 使用 click() 方法，将函数绑定到指定元素的 click 事件中，单击按钮时，绑定的函数就会执行

6.1.5 jQuery代码的特点

示例：单击 <h3> 标签时，切换属性值，同时后面的兄弟元素会切换其显示或隐藏状态

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $("h3").click(function() {
        $(this).toggleClass("highLight").next("ul").toggle();
      });
    });
</script>

JavaScript交互式网页设计 • 【第6章初识jQuery】

$符号标志：是JQuery对象的简写形式，$()等效于jQuery()，是jQuery程序的标志
隐式循环：当使用jQuery查找符合要求的元素后，无须一一遍历每一个元素，直接通过jQuery命令操作符合要求的元素
链式书写：可以将针对于同一个对象多个操作命令写在一个语句中，还可以插入换行和空格

6.1.6 实践练习

6.2 jQuery 基本选择器

6.2.1 jQuery 选择器概述

使用jQuery选择器可以选择页面元素，并生成jQuery对象，能够使用jQuery中的方法。jQuery 对页面元素的选择完全继承了 CSS 选择器的语法规则

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.2.2 基本选择器

基本选择器是由标签 id、class、标签名和多个选择符组成

选择器	功能	返回值
#id	根据 id 属性值选取元素	单个元素
.class	根据 class 属性值选取元素	元素集合
element	根据给定的标签名选取元素	元素集合
*	选取所有元素，包括 html 和 body	元素集合
selector1,selector2,…,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

示例：使用jQuery 显示元素并设置其样式

<script type="text/javascript">
   $(function() {
      // 选取 <div> 和 <span> 元素，合并选取
      $("div,span").css("display","block");
      // 根据 id 属性值选取元素
      $("#one").css("color","#f30");
      // 根据给定的标签名选取元素
      $("span").css("font-size","20px");
      // 根据 class 属性值选取元素
      $("div.two").css("background-color","#ccc");
      $("#one,span").css("border-style","dashed");
   });
</script>
<div id="one"> 设置了 div 的 id 属性 </div>
<div class="two"> 设置了 div 的 class 属性 </div>
<span>SPAN</span>

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.2.3 实践练习

6.3 过滤选择器

6.3.1 基本过滤选择器

过滤选择器附加在所有选择器的后面，通过特定的过滤规则来筛选出一部分元素，书写时以冒号（：）开头

过滤选择器可以分为

基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器

选择器	功能	返回值
first() 或 :first	获取第一个元素	单个元素
last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器之外的所有元素	元素集合，如$("li:not(.title)") 获取class 不是 title 的 <li> 元素
:even	获取索引值为偶数的元素，索引号从 0 开始	元素集合
:odd	将每一个选择器匹配到的元素合并后一起返回	元素集合
:eq(index)	获取索引值等于 index 的元素，索引号从 0 开始	单个元素，如 $(“li:eq(1)”) 获取索引等于 1 的 <li> 元素
:gt(index)	获取索引值大于 index 的元素，索引号从 0 开始	元素集合，如 $("li:gt(1)") 获取索引大于但不包括 1 的 <li> 元素
:lt(index)	获取索引值小于 index 的元素，索引号从 0 开始	元素集合，如 $("li:lt(1)") 获取索引小于但不包括 1 的 <li> 元素
:header	获取所有标题元素，如 h1~h6	元素集合
:animated	获取正在执行动画效果的元素	元素集合

示例：使用基本过滤器定位 DOM 元素，改变元素样式

<script type="text/javascript">
   $(function() {
      $("#btnTitle").click(function() {
        // 单独使用过滤选择器，等同于附加在基本选择器 * 的后面
        $(":header").css("color","#f00");});
      $("#btnEven").click(function() {
        // 获取索引值为偶数的 <li> 元素
        $("li:even").css("color","#00f");});
      $("#btnOdd").click(function() {
        // 获取索引值为奇数的 <li> 元素
        $("li:odd").css("color","#f93");});
     });</script>

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.3.2 内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征来获取元素

选择器	功能	返回值
:contains(text)	获取含有文本内容为 text 的元素	元素集合
:empty	获取不包含后代元素或者文本的空元素	元素集合
:has(selector)	获取含有后代元素为 selector 的元素	元素集合
:parent	获取含有后代元素或者文本的非空元素	元素集合

在 :contains(text) 内容过滤选择器中，如果参数 text 内容出现在匹配元素的任何后代元素中，也认为该元素含有文本内容 text。如果参数 text 使用英文字母，则有大小写的区别

<input>、<img>、<br> 和 <hr> 等标签属于不包含后代元素和文本的空元素

示例：使用内容过滤选择器查找 DOM 元素，改变元素样式

     $(function() {
      $("#btnContain").click(function() {
	    // 获取含有文本内容为 A 的 div
        $("div:contains('A')").css("background-color","#f00");
      });
      $("#btnEmpty").click(function() {       
        $("div:empty").css("background-color","#0f0"); //获取不包含后代元素或文本的div
      });
      $("#btnHas").click(function() {       
        $("div:has(span)").css("background-color","#00f"); //获取含有后代元素为span的元素
      });
      $("#btnParent").click(function() {
	    //获取含有后代元素或者文本的div元素
        $("div:parent").css("background-color","white"); }); });

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.3.3 可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征来获取元素

选择器	功能	返回值
:hidden	选取不可见元素	元素集合，如 $(":hidden") 选取所有隐藏的元素
:visible	选取可见元素	元素集合，如 $(":visible") 选取所有可见的元素

不可见元素包括：css 样式中 display 属性值为 none 的元素、type 属性值为 hidden 的 <input> 元素及宽高设置为 0 的元素

示例：使用可见性过滤选择器锁定 DOM 元素，改变元素样式

     <script type="text/javascript">
    $(function() {
      $("#btnShow").click(function() {
        $(".pic:hidden").show().addClass("current");
      });
      $("#btnHidden").click(function() {
        $(".pic:visible").hide();
      });
    });
  </script>
    <img src="../img/mobile.jpg" class="pic"/>
  <p><input type="button" value=" 显示 " id="btnShow"/>
  <input type="button" value=" 隐藏 " id="btnHidden"/></p>

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.3.4 属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素，以“[”号开始、以“]”号结束

选择器	说明	返回值
[attribute]	获取拥有该属性的所有元素，如 $('li[title]') 表示获取所有包含title 属性的 <li> 元素	元素集合
[attribute=value]	获取某属性值为 value 的所有元素，如 $('li[title=test2]') 表示获取所有包含 title 属性且属性值等于 test2 的 <li> 元素	元素集合
[attribute!=value]	获取某属性值不等于 value 的所有元素，如 $('li[title!=test2]') 表示获取所有包含 title 属性且属性值不等于 test2 的 <li> 元素	元素集合
[attribute^=value]	选取属性值以 value 开头的所有元素，如 $('a[href^="mailto:"]') 表示获取所有包含 href 属性，且属性值以 mailto: 开头的 <a> 元素	元素集合
[attribute$=value]	选取属性值以 value 结束的所有元素，如 $('a[href$=".zip"]') 表示获取所有包含 href 属性，且属性值以 .zip 结尾的 <a> 元素	元素集合
[attribute*=value]	选取属性值中包含 value 的所有元素，如 $('a[href*="jquery.com"]') 表示获取所有包含 href 属性且属性值中包含 jquery.com的 <a> 元素	元素集合
[selector1][selector2]…[selectorN]	合并多个选择器，满足多个条件，每选择一次将缩小一次范围，如 $('li[id][title^=test]') 选取所有拥有属性 id 且属性 title 以 test开头的 <li> 元素	元素集合

示例：使用属性过滤选择器锁定 DOM 元素，全选筛选框

<script type="text/javascript">
    $(function() {// 页面加载事件
      $("input[type='button']").click(function() {
      	      $("input[name='songs']").attr("checked","checked");
      });
    });
</script>
<p>
    请选择喜欢的歌曲：<br/>
    <input type="checkbox" name="songs"/> 小幸运
    <input type="checkbox" name="songs"/> 非酋
    <input type="checkbox" name="songs"/> 佛系少女
    <input type="checkbox" name="songs"/> 醉赤壁
</p>
<input type="button" value=" 全选 "/>

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.3.5 实践练习

6.4 层次选择器和表单选择器

6.4.1 层次选择器

层次选择器通过 DOM 元素之间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻和兄弟关系。层次选择器由两个选择器组合而成

名称	语法	功能	返回值
后代选择器	selector1 selector2	从 selector1 的后代元素里选取 selector2	元素集合，如 $(“#nav span”) 表示选取 #nav下所有的<span>元素
子选择器	selector1>selector2	从 selector1 的子元素里选取 selector2	元素集合，如("#nav>span")表示选取 #nav 的子元素<span>
相邻元素选择器	selector1+selector2	从 selector1 后面的第一个兄弟元素里选取 selector2	元素集合，如 $("h2+dl") 表示选取紧邻<h2>元素之后的同辈元素 <dl>
同辈元素选择器	selector1~selector2	从 selector1 后面的所有兄弟元素里选取 selector2	元素集合，如 $("h2~dl") 表示选取<h2> 元素之后所有的同辈元素<dl>

selector1 selector2 与 selector1>selector2 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系

selector1+selector2 可以使用 jQuery 对象的 next() 方法代替

selector1~selector2 从 selector1 后面的所有兄弟元素里选取 selector2，不能获取前面部分，可以使用nextAll() 方法代替。而 siblings() 方法获取全部的相邻元素，不分前后

selector1 selector2 与 selector1:has(selector2) 虽然这两个选择器都要求 selector2 是 selector1 的后代元素，但是前者最终选取的是后代元素，后者最终选取的是拥有这些后代元素的元素

示例：使用层次选择器锁定 DOM 元素

<script type="text/javascript">
    $(function() {// 页面加载完毕事件
      // 设置标题的颜色
      $(":header").css("color","red");
      // 设置第一层无序列表的字体颜色
      $(":header+ul>li").css("color","green");
      // 设置第二层无序列表的字体颜色
      $(":header+ul>li>ul>li").css("color","blue");
    });
</script>
html代码略

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.4.2 表单选择器

选择器	功能	返回值
:input	获取 <input><textarea><select><button> 元素	元素集合
:text	获取符合 [type=text] 的 <input> 元素	元素集合
:password	获取符合 [type=password] 的 <input> 元素	元素集合
:radio	获取符合 [type=radio] 的 <input> 元素	元素集合
:checkbox	获取符合 [type=checkbox] 的 <input> 元素	元素集合
:image	获取符合 [type=image] 的 <input> 元素	元素集合
:file	获取符合 [type=file] 的 <input> 元素	元素集合
:hidden	参考“可见性过滤选择器”	元素集合
:button	获取 <button> 元素和符合 [type=button] 的 <input> 元素	元素集合
:submit	获取符合 [type=submit] 的 <input> 元素	元素集合
:reset	获取符合 [type=reset] 的 <input> 元素	元素集合

表单对象属性过滤选择器

表单对象属性过滤选择器也是专门针对表单元素的选择器，它属于过滤选择器的范畴，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行过滤

选择器	功能
:enabled	选取可用的表单元素
:disabled	选取不可用的表单元素
:checked	选取被选中的 <input> 元素
:selected	选取被选中的 <option> 元素

示例：使用表单选择器和表单对象属性过滤选择器锁定 DOM 元素

$(function() {// 页面加载完毕事件
    $("#pa :button").click(function() {
        // 选择器 #pa 后的空格表示获取后代元素
        $("#pa :text:enabled").css("border","1px solid red");
    });
    $("#pb :button").click(function() {
        $("#pb :radio:checked").parent().css("background-color","#63c");
    });
    $("#pc :button").click(function() {
        $("#pc :checkbox:checked").parent().css("background-color","#63c");
    });
    $("#pd :button").click(function() {
        var info = " 你最喜欢的球星是："
        info += $("#pd :input option:selected").val();
        alert(info);
    }); 
});

JavaScript交互式网页设计 • 【第6章初识jQuery】

6.4.3 实践练习

总结:

jQuery代码的特点：”$”标志、隐式循环、链式书写
jQuery中基本选择器有“#id”、“.class”、“element”和“*”
基本过滤选择器有“:first”、“:last”、“:not”、“:even”、“：odd”、“:eq”、“:gt”、“:lt”、“:header”和“：animated”
内容过滤选择器有“：contains”、“:empty”、“:has”和“:parent” 可见性过滤选择器有“：hidden”和“:visible”
属性过滤选择器有“[attribute]”、“[attribute=value]”和“ [attribute=!value]”等
层次选择器有“selector1 selector2”、“ selector1> selector2”、“ selector1 +selector2”和“ selector1 ~selector2”
表单选择器有“:input”、“:text”、“:password”、“:radio”和“:checkbox”等

本文地址：https://blog.csdn.net/weixin_44893902/article/details/109632587

相关标签： JavaScript交互式学习笔记 css js javascript html java

上一篇： premiere2020中Beat Edit插件点击没反应怎么办?

下一篇：微课通如何录制微课微课通录制电脑屏幕及网络课程教程

JavaScript交互式网页设计 • 【第6章初识jQuery】

全部章节 >>>>

6.1 jQuery概述

6.1.1 初识 jQuery

6.1.2 jQuery 基本功能

6.1.3 搭建 jQuery 开发环境

6.1.4 编写一个简单的 jQuery 应用

6.1.5 jQuery代码的特点

6.1.6 实践练习

6.2 jQuery 基本选择器

6.2.1 jQuery 选择器概述

6.2.2 基本选择器

6.2.3 实践练习

6.3 过滤选择器

6.3.1 基本过滤选择器

6.3.2 内容过滤选择器

6.3.3 可见性过滤选择器

6.3.4 属性过滤选择器

6.3.5 实践练习

6.4 层次选择器和表单选择器

6.4.1 层次选择器

6.4.2 表单选择器

6.4.3 实践练习

总结:

JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】