目录 jQuery简述 jQuery 基本功能 核心符号 网络引入 本地引入 显示与隐藏示例： 示例二： 示例3： 一、基础选择器 id选择器示例： id选择器唯一性示例： class选择器： class...它的主旨是以更少的代码实现更多的功能（Write less,do more） jQuery 基本功能 访问和操作 DOM 元素 对页面事件的处理 大量插件在页面中的运用 与 Ajax 技术的完美结合...jQuery的操作按钮，当点击jQuery按钮后会显示图片。 ...再次点击jQuery按钮即可将加载的图片收回。 示例二： (1). Onmouseover事件是指将光标移至元素上产生的事件。 (2)....选择器 功能 返回值 #id 根据 id 属性值选取元素 单个元素 .class 根据 class 属性值选取元素 元素集合 element 根据给定的标签名选取元素 元素集合 #id 选择器选取带有指定
匹配并获得所有图片 :reset 匹配并获得所有重置按钮 :button 匹配并获得所有按钮 :file 匹配并获得所有文件域 :hidden 匹配并获得所有隐藏域 下面通过一个示例来演示表单选择器的具体用法...4.1.7 可见性选择器 可见性选择器比较简单，主要是通过显示/隐藏状态来获取和匹配元素的，详见表4-1-7。...2：实现表单验证 训练技能点 jQuery表单选择器 需求说明 按照图4.2.2所示的界面实现一个简单的表单，并使用jQuery表单选择器进行表单验证，要求:所有项都不能为空，密码长度必须大于等于...以下关于jQuery表单和表单属性选择器说法正确的是（）。 A. 表单选择器只能用于表单 B. 表单属性选择器是表单选择器的附属，没有表单选择器就没有表单属性选择器 C....表单选择器和表单属性选择器不能和其他选择器合用 D. :button选择器获得的按钮包括提交按钮和重置按钮 4. 下列关于jQuery选择器中特殊字符的说法错误的是（）。
匹配并获得所有按钮 :file 匹配并获得所有文件域 :hidden 匹配并获得所有隐藏域 下面通过一个示例来演示表单选择器的具体用法 示例4.4 document.write("...4.1.7 可见性选择器 可见性选择器比较简单，主要是通过显示/隐藏状态来获取和匹配元素的，详见表4-1-7。...2：实现表单验证 训练技能点 jQuery表单选择器 需求说明 按照图4.2.2所示的界面实现一个简单的表单，并使用jQuery表单选择器进行表单验证，要求:所有项都不能为空，密码长度必须大于等于8...以下关于jQuery表单和表单属性选择器说法正确的是（）。 A. 表单选择器只能用于表单 B. 表单属性选择器是表单选择器的附属，没有表单选择器就没有表单属性选择器 C....表单选择器和表单属性选择器不能和其他选择器合用 D. :button选择器获得的按钮包括提交按钮和重置按钮 4. 下列关于jQuery选择器中特殊字符的说法错误的是（）。
它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并提供了一个跨多种浏览器的易于使用的API。...$("#id,.class,标签名") jQuery基础知识总结 10.表单选择器 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。...表单选择器是为了能更加容易地操作表单， 表单选择器是根据元素类型来定义的 注意：无论是否存在表单，表单选择器都会根据相应的type属性值做出选择。...表单选择器主要是根据 type值进行定位的 只有type属性的标签才具有 表单选择器 <input type="radio...") 11.2 表单对象属性过滤器 :txet 和 :checkbox 代表的是表单选择器 代表的是表单中的type属性 选择可用的文本框 $(":text:enabled") var obj=(":text
JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为....这是最常用的方法之一，特别是在动态更新页面内容时。...; }); // 用户提交表单时，弹出提示 change(): 当表单元素的值发生变化时触发，适用于下拉菜单或单选按钮等。...，并在成功时将其显示在 #elementId 元素中 fadeIn() / fadeOut(): 处理淡入淡出效果，常用于显示或隐藏内容。...fadeIn(1000); // 元素将在1秒内淡入 $("#elementId").fadeOut(1000); // 元素将在1秒内淡出 slideUp() / slideDown(): 实现滑动隐藏和显示效果
在使用jQuery时，需要注意jQuery对象和DOM对象的区别，通常对于jQuery对象，会在变量前加$，如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。...、表单选择器等4类选择器。...:radio, :checkbox 获取所有单选框/多选框 :submit,:reset,:button 选取单选按钮、多选按钮、任意按钮 :image, :file 选取所有图像按钮，所有上传域 Tip...()方法来阻止元素的默认行为，常用与a链接元素和submit表单提交行为。...方法 诠释 .show(),.hide(),.toggle() 显示和隐藏元素，$('element').show(1000); .fadeIn(),fadeOut() .fadeTo() 改变元素的不透明度
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果 div> 练习：CSS_动画 品牌展示 需求： 1.点击按钮的时候，隐藏和显示卡西欧之后的品牌...2.当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。 3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。...jquery页面加载完成之后的触发时间点： // jquery的页面加载完成之后。只是等浏览器内核解析完html标签，创建好dom对象之后。...就马上执行了 原生js页面加载完成之后的触发时间是： // 原生js除了要等浏览器内核解析完标签，创建好dom对象之外， // 还需要等页面中所有元素去准备好自己显示时需要的数据。完成之后才会执行。...他们触发的顺序？ jquery的页面加载完成之后先执行， js原生的页面加载完成之后后执行。 他们执行的次数？
它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作事件处理动画和 Ajax 操作更加简单。...type="checkbox" checked>复选框 console.log($(':checkbox').prop('checked')); # 3. val() 方法描述：该方法主要用于获取表单元素的值和设置表单元素的值...注意：如果存在（不存在）就删除（添加）一个样式类 需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...需求描述：创建一个按钮，控制 div 显示和隐藏 .box { width: 200px; height: 200px; background: coral; display...需求描述：创建一个按钮，控制 div 滑动显示和滑动隐藏 .box { width: 200px; height: 200px; background: coral; display
方式2则通过公共的CDN的优势加快了jQuery文件的加载速度。 在HTML页面中创建含有文本“测试”和属性（align=“center”）的元素。...2.2.8 表单选择器 选择器 功能描述 :input 获取页面中的所有表单元素，包含以及元素 :text 选取页面中的所有文本框 :password 选取所有的密码框...块的移动 // 事件对象.which：获取当前按下键盘的对应码值keyCode // 通过offset()获取当前按下键盘时div元素的位置（left和top值） // 根据码值修改div元素位置（ left...// jQuery中的页面加载事件方法有3种语法形式，具体如下。...设置焦点图的外边框的宽度以及超出隐藏，限定其只能显示一张图片。 切换到下一张时，只需要修改焦点图外层样式中的left值，就可以将焦点图整体向左移动，从而显示第2张图片。
-- 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。....form-control-static #在一个水平表单内的表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...添加四个像素的内边距（padding）和一个灰色的边框, 当鼠标悬停在图像上时，会动画显示出图像的轮廓。...#元素显示和隐藏 .clearfix #清除浮动 .show #强制元素显示 .hidden #强制元素隐藏 .sr-only #除了屏幕阅读器外，其他设备上隐藏元素 ....响应式实用工具 描述:可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。 注意:响应式实用工具目前只适用于块和表切换。 WeiyiGeek.
jquery对象, 使用js的方式获取的对象称为dom(js)对象, 两者的方法和属性不能混用, 使用jquery的方法和属性时,必须保证对象是jquery对象...,jquery的页面加载成功事件可以出现多次,从上到下依次执行,js的页面加载成功事件只能出现一次,即使出现多次,也只有最后一个生效 - 重点事件 - click - change...- submit - focus - blur - jquery事件和事件源的绑定 "要保证页面加载成功后,才能使用jq的事件" - jquery对象.事件名称...需求分析: 当点击不同的按钮时,根据按钮的需求将左边或右边的option插入到对面的下拉选中...."想要使用别人的插件就必须的导入人家已经写好的js文件(插件)" - 3.在页面加载成功后,要确定对页面上的哪个表单进行校验 " $(function(){
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。...： ² 为表单中所有隐藏域 添加 class属性，值为itcast ² 设置table所有 可见 tr 背景色 黄色 ² 设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值 <...","yellow"); // 设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值 $("tr:hidden").each(function(){ alert($(this)....选取所有的密码框元素 :radio 选取所有的单选框元素 :checkbox 选取所有的多选框元素 :submit 选取所有的提交按钮元素 :image 选取所有的图像按钮元素 :reset 选取所有重置按钮元素...⑨：表单对象属性过滤选择器 选取表单元素属性的过滤选择器 :enabled 选取所有可用元素 :disabled 选取所有不可用元素 :checked 选取所有被选中的元素，如单选框、复选框 :selected
同样，在jQuery里面，我们要操作页面对象还是需要找对象，找页面对象，就是通过各类的选择器来找，简化我们的业务代码量。...“家乡”中的“北京”选项；#userform是表单名，不是下拉框 2.6 属性操作 jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作 html属性操作：是对...链式操作 2.6 作业 使用jQuery+正则表达式，对表单注册进行简单的验证。...如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。.../*针对刚才的index.html做的js代码操作*/ //页面加载事件 $(function(){ //找元素，找导航下面的dt标签元素即可.
表单选择器 $(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本框，$(":text...选取单选按钮 点击元素 在事件中经常使用术语”触发”（或”激发”）例如： “当您按下按键时触发 keypress 事件”。...特效效果 ：jQuery 效果 – 隐藏和显示 | 菜鸟教程 – 隐藏和显示 – 淡入淡出 – 滑动 – 动画 – 停止动画 – Callback 方法 – 链(Chaining) jQuery 效果方法...jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。...：jQuery Validate | 菜鸟教程 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。
，获取表单组件 name属性，表单设计 name属性值和id属性值是一样的，所以也就获取表单组件id var dataArray = $(resourceFormSelector...用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮 请务必与 addHoverDom 同时使用；属于高级应用，使用时请确保对 zTree 比较了解。...设置 zTree 的节点上是否显示 checkbox / radio 默认值: false 参数值：true / false 分别表示 显示 / 不显示 复选框或单选框 setting 举例：需要显示...、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array) 不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式 默认值...3、需要加载 jquery-ztree.core-3.0.js，如果需要用到 编辑功能 或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck
选取单选按钮 点击元素 在事件中经常使用术语"触发"（或"激发"）例如："当您按下按键时触发 keypress 事件"。 ?...选取单选按钮 点击元素 jQuery 事件方法语法 在 jQuery 中，大多数 DOM 事件都有一个等效的jQuery 方法。...jQuery - AJAX load() 方法 jQueryload() 方法是简单但强大的 AJAX 方法。 load()方法从服务器加载数据，并把返回的数据放入被选元素中。... 下面的例子会把文件 "demo_test.txt" 的内容加载到指定的div> 元素中： 实例 $("#div1").load("demo_test.txt"); 也可以把 jQuery 选择器添加到...如果load() 方法已成功，则显示"外部内容加载成功！"
tb = $(".gray ~ img") console.log(tb);//俩个img 表单选择器 Forms 举例 说明 表单选择器 $(":input...内容") 设置元素的文本内容，不包含html标签 val() 获取元素的value值（表单元素） val("值") 设定元素的value值（表单元素） 表单元素：文本框text、密码框password...、单选框radio、隐藏域hidden等 非表单元素：div、span、h1~h6、table、tr、td、li、p等等 <!...事件 ready加载事件 预加载事件，当页面的DOM结构加载完毕后再执行。...-3.6.4.js"> // 点击按钮，发送ajax请求，显示数据到页面 $("#btn").click(function () { $.ajax(
$(“div:nth-child(n)”) 匹配是div并且是第n个而且要求元素是子元素 n从1 开始 ###表单选择器 $(":input") 匹配所有表单中的控件 $(":password") 匹配所有密码框...$(":radio") 匹配所有单选 $(":checkbox") 匹配所有多选 $(":checked") 匹配所有选中的单选/多选/下拉选 $(“input:checked”) 匹配所有选中的单选和多选...$(":selected") 匹配所有选中的下拉选 ###修改页面元素相关 创建及添加元素 创建: var d = $("div id='xxx'>abcdiv>"); 后面添加: 父元素.append....css(“样式名”,“值”); 批量修改元素样式 元素对象.css({“样式名1”:“值”,“样式名2”:“值”}); 获取和修改元素的属性 获取元素属性 元素对象.attr(“属性名”); 修改元素属性...deltd.children().click(function(){ tr.remove();//删除按钮所在行 }) //前4个td里面显示的文本是用户输入文本框里面的文本,
time 标识日期或时间 canvas 表示图形 output 表示输出 source 为媒介元素定义媒介资源 menu 表示菜单列表，当需要列出表单控件时使用该标签 ruby...表示ruby注释 rt 表示字符的解释或发音 rp 在ruby解释中使用，定义不支持ruby的浏览器所显示的内容 wbr 表示软换行 command...页面加载后元素会自动获得焦点 paceholder 用户输入时提示信息 form 声明属于表单 required 提交表单时，检测输入值不能为空...离线应用和Web Workers Geolocation地理位置 CSS3 CSS3概述 CSS结合DIV可以方便地控制页面布局 整个网站可以统一风格，只要整个网站使用统一的CSS文件 网站的风格维护起来简单...表单： :enabled 控制表单控件的可用状态 :disabled 控制表单空间的禁用状态 :checked 单选框或复选框被选中 CSS伪元素选择符 使用定义的伪元素设置一些特殊的字体格式 :
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
