版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目六充案案例6- 基本选择一、案例描述1考核知识点基本选择2练习目标掌握基本选择器的使3需求分析4设计思路创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<title>基本选择器<script.box{width:100px;height:50px;background-function$(".box").css("background-}<div<inputtype="buttonvalue="触发onclick="func() 2、在浏览器中，运行效果如下图所示三、案例总结了蓝色。从案例中可以看出，当通过class获取指定元素时，CSSjQuery的语法同样都是“.box”。案例6- 层次选择一、案例描述1考核知识层次选择2练习目掌握层次选择器的使3需求分4、设计思路（实现原理创建网页文件，引入jQuery在浏览器中测二、案例实现<!doctype<metacharset="utf-8"<title>层次选择器<script<!doctype<metacharset="utf-8"<title>层次选择器<scriptdiv>div{font-function$("body>div").css("border","1pxsolid}<inputtype="buttonvalue="触发onclick="func()2、在浏览器中，运行效果如下图所示三、案例总结在案例中，CSS代码通过子元素选择器将<div>的子元素<div>D受到影响。当单击“触发”按钮后，jQuery将<body>下的子元素<div>A、B、C受到是jQuery的选择器支持所有的浏览器。案例6- 基本过滤选择一、案例描述1考核知识基本过滤选择2练习目掌握基本过滤选择器的使3需求分过滤选择器通过特定的过滤规则筛选出所需的DOM元素。过滤规则的语法与SS伪类选择器的语法类似，以冒号开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<title>基本过滤选择器<scripttable{border-function$("tabletr:odd").css("background-}<table<inputtype="buttonvalue="触发onclick="func()2、在浏览器中，运行效果如下图所示三、案例总结从案例中可以看出，当单击“触发”按钮后，表格中的奇数行改变了背景色。在案例中，选择器$("aber:odd")的作用是选取<abe>中奇数行的<r>。需要注意的是，过滤选择器从0开始计数，所以表格的标题行没有被选取，如果选取的是偶数行，则标题行会被选取。案例6- 内容过滤选择一、案例描述1考核知识内容过滤选择2练习目掌握内容过滤选择器的使3需求分内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。为了更好地学习内容过滤选择器的使用，下面通过案例进行演示。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<meta<metacharset="utf-8"<title>基本过滤选择器<scriptfunctionfunc(){$("div:contains('结义')").css("font-$("div:empty").css("background-}<div>东山再起<div>桃园结义 <div><img<inputtype="buttonvalue="触发onclick="func()2、在浏览器中，运行效果如下图所示三、案例总结从案例中可以看出，当单击“触发”按钮后，页面中的<div>改变了样式。在案例中，过滤$("div:contains('结义')")选取了含有“结义”文本的 个<div>；$("div:empty")选取空元素的<div>，有子元素和文本元素的第1、2、3、4、6个<div>。案例6- 可见性过滤选择一、案例描述1考核知识可见性过滤选择2练习目掌握可见性过滤选择器的使3需求分可见性过滤选择器根据元素的可见与不可见状态选取元素。为了更好地学习可见性过滤选择器的使用，下面通过案例进行演示。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype <metacharset="utf-8"<title>可见性过滤选择器<script<div>测试<inputtype="hidden"<divstyle="display:none">测试<divstyle="visibility:hidden">测试2、在浏览器 ，运行效果如下图所示三、案例总结在案例中，为了区分网页中可见与不可见元素，通过jQuery为不可见元素添加了margin样式，为可 样式为visibility:hidden的也是可见元素。案例6- 属性过滤选择一、案例描述1考核知识属性过滤选择2练习目掌握属性过滤选择器的使3需求分属性过滤选择器根据元素的属性选取元素，语法为“[过滤规则]”。为了更好地学习属性过滤选择器的使用，下面通过案例进行演示。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<title>属性过滤选择器<scriptfunction$("[value*=球]").css("background-$("input[value!=滑冰][value!=游泳}<inputtype="textvalue="篮球<inputtype="textvalue="足球<input<inputtype="textvalue="游泳<inputtype="textvalue="滑冰<inputtype="text"<inputtype="textvalue="乒乓球<inputtype="submitvalue="触发onclick="func()2、在浏览器中，运行效果如下图所示三、案例总结<input>$("[value*=球]")选取value属性中含有“球”的所有元素，所以篮球、足球、乒乓球被选中；$("input[vaue!=滑冰][value!=游泳]")选取value属性不为滑冰和游泳的<inpu>元素，所以只有游泳和滑冰没有被选中。案例6- 子元素过滤选择一、案例描述1考核知识子元素过滤选择2练习目掌握子元素过滤选择器的使3需求分通过子元素过滤选择器可以获取父元素中指定的元素。为了更好地学习属性过滤选择器的使用，下面通过案例进行演示。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<title>子元素过滤选择器<scriptli{width:35px;padding:05px;text-function $("li:nth-child(2)").css("background-$("li:nth-child(even)").css("font-} <inputtype="buttonvalue="触发onclick="func() 2、在浏览器中，运行效果如下图所示三、案例总结从案例中可以看出，当点击触发按钮后，页面中的<li>改变了样式。在案例的过滤选择器中；$("ulli:nth-child(2)")只选取到了；$("ulli:nth-child(even)")选取到了和。案例6- 表单对象属性过滤选择一、案例描述1考核知识表单对象属性过滤选2练习目掌握表单对象属性过滤选择器的使3需求分表单对象属性过滤选择器根据表单对象属性的特征获取元素。例如选择被选中的下拉框、多选框等。为了更好地学习表单对象属性过滤选择器的使用，下面通过案例进行演示。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现<!doctype<metacharset="utf-8"<title>表单对象属性过滤选择器<script<!doctype<metacharset="utf-8"<title>表单对象属性过滤选择器<scriptfunction}<inputtype="textvalue="启用<inputtype="textdisabled="disabledvalue="禁用"/><inputtype="buttonvalue="触发onclick="func()2、在浏览器中，运行效果如下图所示三、案例总结从案例中可以看出，当点击触发按钮后，页面中的<input>改变了样式。在案例中的过滤选择器中$("input:disabled")选取到了被禁用的<input>文本框；$("input:checked")选取到了被选中的<input>多选案例6-9 一、案例描述1考核知识表单选择2练习目掌握表单选择器的使3需求分表单的作用是提交数据。端程序开发中，对表单的处理占据了重要的地位。为了灵活地操作表单，jQuery专门加入了表单选择器，方便用户获取表单元素。为了更好地学习表单对象属性过滤选择器的使用，下面通过案例进行演示。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<title>表单选择器<scriptfunction$(":input").css("font-$(":input").css("font-}<inputtype="text"<button>测试<inputtype="buttonvalue="触发onclick="func()2、在浏览器 ，运行效果如下图所示三、案例总结从案例中可以看出，当点击触发按钮后，被选取的表单元素改变了样式。在案例的过滤选择器中$(":input")选取到了<body>中所有的元素，$(":button")选取到了<button>和 type="button">两种元素案例6- 元素属性操一、案例描述1考核知识元素属性操2练习目掌握jQuery元素属性操3需求分在jQuery的元素属性操作方法中，attr()方法用于获取或设置元素属性，removeAttr()方法用于删除元素属性。其中，attr()attr()removeAttr()方法的使用，下4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<title>元素属性操作<script//2.//3. varjson=//5.return//6.<inputtype="text"class="apple"id="user"name="user"value="tom"2、在浏览器中，打开F12开发者工具，运行效果如下图所示三、案例总结attr()attr()方法获取和设置元素属性时，传递一个案例6- 元素class属性操一、案例描述1考核知识2练习目3需求分供了针对class属性的操作方法，下面通过案例进行演示。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现<!doctype<metacharset="utf-8"<title>元素class属性操作<script<!doctype<metacharset="utf-8"<title>元素class属性操作<script.bold{font-.center{text-align:center;line-function}function}function}<inputtype="buttonvalue="添加样式onclick="f1()<inputtype="buttonvalue="移除样式onclick="f2()<inputtype="buttonvalue="样式切换onclick="f3()2、在浏览器中，打开F12开发者工具，运行效果如下图所示三、案例总结案例演示了默认样式和添加样式后的效果。当页面打开时，<div>元素原有的样式为“rect”，当点点击“移除样式”后，样式变为“rectboldcenter样式被移除了。当点击“样式切换”时，如果案例6- 元素value属性操一、案例描述1考核知识2练习目3需求分设置value <inputtype="checkbox">。当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组。当要为 4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<title>元素value属性操作<script//1.设置文 //2.设置单选按钮选中情况//3.设置多选按钮选中情况$(":checkbox").val(["篮球","足球//4.设置列表框选中情$("select").val(["高中","大学function//3.获取多}<p>文本框：<inputtype="textvalue="<p>单选<inputtype="radio"value="boy"<inputtype="radio"value="girl"<p>多选<inputtype="checkboxvalue="篮球<inputtype="checkboxvalue="足球<inputtype="checkboxvalue="网球网球<p>列表<select<inputtype="submitvalue="提交onclick="func()2、在浏览器中，运行效果如下图所示点击网页中的“提交”按钮，在控制台中显示的结果三、案例总结按钮，再由jQuery获取表单元素的value属性并输出到控制台中。案例6- 元素内容操一、案例描述1考核知识元素内容操2练习目掌握jQuery的元素内容操3需求分jQueryhtml()text()方法。html()方法用于获取或设置元素的4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<title>元素内容属性操作<scriptspan{font-//1.获得HTML//3.设置HTML$("#set_html").html("<span>乐不</span>思蜀//4.$("#set_txt").text("<span>过河</span>拆桥 id="get_html"><span>桃园</span>结义 id="get_txt"><span>无中</span>生有<div<div2、在浏览器中，运行效果如下图所示三、案例总结当获取元素内容时，html()方法获取到的是含有标记的HTML内容，ext()方法获取到的是不含标记的文本内容。当设置元素内容时，htm()方法可以直接设置HTML内容，而ext()方法设置时会将HTML标记转义为字符实体。案例6- 元素样式操一、案例描述1考核知识元素样式操2练习目掌握jQuery的元素样式操3需求分元素的样式，例如css()方法。接下来通过案例进行演示。4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现<!doctype<metacharset="utf-8"<title>元素样式操作<script<!doctype<metacharset="utf-8"<title>元素样式操作<script//<div>元素样式操作2、在浏览器 ，运行效果如下图所示三、案例总结从案例中可以看出，使用cs()方法可以轻易地改变元素的样式。需要注意的是，width()和hegh()方法的返回结果是不带单位的数值，而css()方法的返回结果是带有单位的字符串。案例6- 文档节点追一、案例描述1、考核知识点2练习目掌握jQuery3需求分在jQuery的DOM文档操作中，除了修改元素的属性、内容和样式，常常还需要使HTML文档在浏览器中动态的发生变化，以达到更好的页面效果。为此，jQuery提供了文档处理方法，可以轻松的操作DOM文档节点。节点追加是指在现有的文档节点中进行父子或兄弟节点的追加，接下来通过案例进行演示4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<metacharset="utf-8"<script 父子节////前置追加（移动已有节点 后置追 前置追加（移动已有节点$($("#old 兄弟节//// 后置追 前置追<ul<ulclass="left"<ulclass="right"><li2、在浏览器中，运行效果如下图所示三、案例总结3，然后将<ulid="old">234追加到最后，将<ulid="old">DC后面，将BC前面，最终形成“ABCDE”。案例6- 文档节点替一、案例描述1、考核知识点2练习目掌握jQuery3需求分节点替换是指将选中的节点替换为指定的节点，接下来通过一个案例进行演4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype <metacharset="utf-8"<script 替 <li<li<li</li><li</li><li</li><li2、在浏览器中，运行效果如下图所示三、案例总结从案例中可以看出，ida01~a04的<li>元素被替换成功。需要注意的是，当使用现有元素进行替换案例6- 文档节点删一、案例描述1、考核知识点2练习目掌握jQuery3需求分4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现1、创建网页文件indexhtml，编写代码如下<!doctype<!doctype<metacharset="utf-8"<script$("#delete//$("#delete//删除class=title的div<div2、在浏览器中，打开F12开发者工具，运行效果如下图所示三、案例总结从案例中可以看出，empty()方法删除了<divid="delete">中所有<p>标记的子节点，但是没有删除<p>remove()方法删除了<divid="delete">中所有的<div>元素。因此，当需要清空元素的内容时，使用empty()方法，当需要直接删除元素时，使用remove()方法。案例6- 文档节点一、案例描述1、考核知识点节点2练习目掌握jQuery的文档节点操3需求分 提供了节点方法，用于匹配的元素，接下来通过案例进行演示4设计思创建网页文件，引入jQuery在浏览器中测二、案例实现<!doctype<metacharset="utf-8" <!doctype<metacharset="utf-8" <script//添加事件（当点击时字体加粗$(this).css("font- 节点， 事 节点 事2、在浏览器 ，运行效果如下图所示三、案例总结从案例中可以看出，为3和4的元素是为1的元素的副本，只有1号和4号在鼠标单击时会加粗。即使用clone()的3号副本没有事件，而使用clone(true)的4号副本
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 计税基础施工方案
- 二零二五版电商直播团队店面营业员合作协议范本3篇
- 2025年度个人旅游费用欠款合同样本3篇
- 皮带廊施工方案
- 墙裙油漆施工方案
- 白洋潮课程设计
- 庆春隧道施工方案
- 河道景观道路施工方案
- 2025年新能源储能技术投资入股分红合同4篇
- 锥齿传动轴课程设计
- 2025届北京巿通州区英语高三上期末综合测试试题含解析
- 公婆赠予儿媳妇的房产协议书（2篇）
- 煤炭行业智能化煤炭筛分与洗选方案
- 2024年机修钳工(初级)考试题库附答案
- Unit 5 同步练习人教版2024七年级英语上册
- 矽尘对神经系统的影响研究
- 分润模式合同模板
- 海南省汽车租赁合同
- 2024年长春医学高等专科学校单招职业适应性测试题库必考题
- （正式版）SHT 3046-2024 石油化工立式圆筒形钢制焊接储罐设计规范
- 2023年山东济南市初中学业水平考试地理试卷真题（答案详解）
评论
0/150
提交评论