简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...）的，想要区别什么是实时非实时的返回结果，请看下例： //首先选取页面中id为container...原因就在于反斜杠在字符串中本身就表示转义的意思，它于冒号结合转不出东西来，于是抛错。
minified 压缩后的生产版、 uncompressed 未压缩的开发版 打开链接 -> 右键，网页另存为（或者 Ctrl + S）-> 选择保存目录 1.3 使用jQuery 的的原型（即jQuery本身）所具有的属性和方法。 2.2 jQuery选择器 jQuery选择器类似CSS选择器的机制的一种操作HTML元素的方式。...选择器("input")与 2.3 元素遍历 在操作HTML文档中的DOM元素时，经常需要进行元素遍历。...从1.7版本开始新增的方法。...设置焦点图的外边框的宽度以及超出隐藏，限定其只能显示一张图片。 切换到下一张时，只需要修改焦点图外层样式中的left值，就可以将焦点图整体向左移动，从而显示第2张图片。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定...jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用...如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。...html内容 html(val)// 设置所有匹配元素的html内容 文本值： text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 值： val()// 取得第一个匹配元素的当前值...，在3.x版本的jQuery中则没有这个问题。
组件设置了几种不同的图标 9.1.1 Datepicker Datepicker即日期选择器，类似于JavaScript中的日历控件。...jQuery UI中的日期选择器灵活易用，可自由定制多种风格的界面。我们先认识一下这个组件的最简单用法，参考代码如下所示。 示例9.6 中的某个文本框提供了日期选择器，见斜体部分。...上述代码给我们展示的是jQuery中日期选择器组件的默认效果，我们还可以通过该组件的相关参数来定制多种多样的日期选择器。...Ø showOtherMonths : 用来设置是否在日期面板中显示其他月份的日期，默认值是false。
百分⽐是⽹⻚、移动端等⽤来布局以及定义⼤⼩的⼀个⾮常重要的单位 背景属性 background 在⼀个声明中设置所有的背景属性。 background-color 设置元素的背景颜⾊。...CSS3新增选择器 兄弟选择器、属性选择器、伪类选择器、伪元素选择器 颜色、字体、盒阴影、背景、圆角、动画、渐变、过渡、多 列、弹性盒模型、2D、3D的功能 JavaScript语法基础 变量、关键字...、鼠标事件、键盘事件、事件冒泡与捕获 JavaScript面向对象使用 JQuery框架概述 JQuery选择器 id选择器 、类别选择器、标记选择器、属性选择器、位置选择 器、后代选择器、子代选择器...，认识选择器对象、选择器对象 遍历应用及页面初始化 JQuery中的DOM操作 插入、删除、复制、克隆、替换HTML元素 JQuery事件 常用事件方法：鼠标、键盘、事件冒泡、事件解除 JQurey...效果 JQuery动画：隐藏和显示、淡入淡出、滑动、animate动画 JQuery Ajax AJAX工作原理 AJAX原生写法、JQuery中AJAX语法 JSON对象 AJAX跨域 web
方式1:jQuery对象[index] 方式2:jQuery对象.get(index) 3.在3.0版本后jQuery的页面加载成功事件无顺序,是随机的 jQuery2.0前(不含2.0)如1.11版本用的多...的DOM操作 1.操作HTML代码/文本/值： val() :对value属性的操作。...jq对象.val() 获取 | jq对象.val("值") 设置 html(): 对标签体的操作。...jq对象.html() 获取 | jq对象.html("值") 设置 text(): 对标签体的操作（文本）。...]长度范围equalTo通过jQuery选择器选中指定元素对象和谁相等(重复密码)email"email"校验邮箱datetrue校验日期dateISOtrue校验日期格式xxxx-xx-xx xxxx
) minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐) slim: 精简瘦⾝版, 没有Ajax和⼀些特效 slim minified : slim 的压缩版 开发时, 建议把...JQuery库下载到本地, 放在当前项⽬中....Selector 选择器, ⽤来"查询"和"查找" HTML 元素 action 操作, 执⾏对元素的操作 JQuery 的代码通常都写在 document ready 函数中 document...简洁写法: $(function(){ // jQuery functions go here }); jQuery选择器 我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进⾏操作....JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器. jQuery中所有选择器都以 开头：().
这部分是一个进展中的工作。 本节旨在为XWiki应用程序开发者和XWiki产品开发者记录所有前端资源。...前端资源主要有两种类型： 外部库 内部组件 前端资源主要由JavaScript库，CSS样式表和相应的可重复使用的HTML代码片段(或velocity宏来输出代码片段) 和velocity宏。...它可以在众多的浏览器中通过一个易于使用的API使得HTML文档遍历和操作，事件处理，动画，和Ajax的事情变得非常简单。...无论你是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。"...用于开发响应式布局、移动设备优先的WEB项目" XWiki绑定Bootstrap，因为XWiki皮肤是基于Bootstrap。 ? 查看在XWiki页面使用jQuery和jQuery UI的例子。
DOM对象； $只是jQuery的别名形式； 每一个jQuery对象都是一个DOM对象的集合 三、常用选择器 通过jQuery中的选择器实际上取得的是HTML中的DOM元素。...在其核心，jQuery重点放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS，就会很清楚选择器的威力，通过元素的特性或元素在文档中的位置去描述元素组。...有了jQuery，就能够利用现有知识去发挥选择器的威力，在很大程度上简化JavaScript代码。CSS中可以使用的选择器基本都可以用到jQuery中，反之不然。 3.1. ...选择器和包装集 为了使设计和内容分离而把CSS引入Web技术的时候，需要以某种方式从外部样式表中引用页面元素组。...开发出来的方法就是通过使用选择器—基于元素的属性或元素在HTML文档中的位置，简明地表现元素。 例如，选择器：p a 引用所有嵌套于元素之内的超链接(元素)组。
学习后的最大感受就是：bootstrap让前端布局和渲染的工作，由填空题变成了选择题。即便没有很强的审美能力，也可以让网页简洁大方，颜值爆表。 ?...其具有以下特性：完整的基础CSS插件；丰富的预定义样式表；基于jQuery的js插件集；非常灵活的响应式栅格系统，而且崇尚移动先行的思想。...该值为0；b是该css选择器上id数量的总和，一般为1个；c是用在该css选择器上的其他属性css选择器和伪类的总和，包括class（.btn）和属性css选择器li[id=red];d计算元素div和伪元素...first-child；通用css选择器*的0优先级，即最低；如果2个css具有相同优先级，在样式表中后面的起作用。...DateTime Picker：非常强大的日期插件，功能和jQuery版的类似，但其风格和bootstrap更统一。
/js/jquery-1.11.0.js" type="text/javascript" > 基本语法：jQuery(选择器) 或 $(选择器) 及在 jQuery中 "jQuery...后续的学习中，“基本选择器”使用的频率最大，我们先预先学习一下。...").fadeOut(3000); // 清空定时： clearInterval(time); } 1.4 选择器总结 1.4.1 基本选择器 jQuery后续的学习中，“基本选择器...7.2.1 属性操作：val、text、html ? val() 获得value属性的值 val(...) 给value属性设置值 html() 获得html代码，如果有标签，一并获得。...通过“层级选择器”获得需要的操作对象，通过“表单属性过滤选择器”从已有的对象中筛选出需要的，最后通过“文档处理”将筛选后的内容追加到指定的位置。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定...jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用...如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。 $("#i1").html()的意思是：获取id值为 i1的元素的html代码。...jQuery版自定义模态框 属性选择器： [attribute] [attribute=value]// 属性等于 [attribute!...终止each循环 return false； 伏笔... .data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作...可以给一个标签内部添加标签以及获取标签 没有值代表获取,有值代表添加标签 html(); html(value); 获取标签当中的内容 text(); text(value); 4.1.8....jQuery选择器(***) 4.1.8.1.选择器简介 jQuery 最核心的组成部分就是:选择器引擎。...jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种 特殊状态的选择。...> 4.1.8.6.筛选(过滤)选择器 4.1.8.7.父子兄弟选择 案例:百度风云排行榜 4.1.8.8.表单选择器 4.1.9.jQuery中动画(***) 4.1.9.1.jq中动画简介
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX 功能 （5）文档手册很全，很详细 （6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期...（Ctrl+S 直接进行保存到本地即可） 官网名称： 本地下载完的名称 开发时使用的是 ：uncompressed 未压缩版 工作时使用的是 ：compressed （min）压缩版 压缩版与未压缩版的区别...注意：在代码中的写的等标签不会在页面中显示，而是会在页面中执行，但是获取的文本内容中含有这个 $(选择器).html()：无参数调用方法，获取 DOM 数组第一个dom对象的在网页上显示的文本内容。...$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的在网页上显示的文本内容。...我们主要用的是 json的值。 jQuery 从 xml, json, text,, html 这些中测试最可能的类型。
Write less, do more, I like jQuery. jQuery是最常用的js库，整体来说非常轻量并易于扩展，对于移动应用可以使用其更轻量的孪生兄弟Zepto代替。...通配选择器 *{} 其他选择器 伪类选择器、子选择器、临近选择器和属性选择器 那么相应的jQuery也会提供对应的选择器，并增加部分自定义的选择器用于方便操作，主要包括基本选择器、层次选择器、过滤选择器...对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。...)，.pageX/pageY获取页面坐标，.which获取鼠标左中右键(值为1,2,3),.metaKey获取Ctrl键，.originalEvent获取原始事件对象。...锋利的jQuery（第2版）[M]. 北京:人民邮电出版社, 2012.
（animate.js、common.js） 我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发， 其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习...） 关于压缩版和未压缩版： jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。...jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。...【案例：五角星评分案例.html】 each方法 jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。...(function(index,element){}); 【案例：不同的透明度.html】 多库共存 jQuery使用 作 为 标 示 符 ， 但 是 如 果 与 其 他 框 架 中 的 作为标示符，
2.2.CSS概述 CSS的全称是Cascading Style Sheets，层叠样式表 它用来控制HTML标签的样式，在美化网页中起到非常重要的作用 CSS的编写格式是键值对形式的，比如 color...2.5.5.CSS中的并列选择器[n6] 代码: 2.5.6.CSS中的复合选择器[n7] 2.5.7.CSS中的后代[n8]选择器 2.5.8.CSS中的直接后代[n9]选择器 2.5.9.CSS中的相邻兄弟选择器...中事件介绍 鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作...配模适配(响应式) 4.2.2.2.1.移动设备设置 在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。...而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
（animate.js、common.js） 我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发， 其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习...） 关于压缩版和未压缩版： jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。...选择器 jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。...最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。 on注册简单事件 // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。...【案例：五角星评分案例.html】 each方法 jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
jQRangeSlider - 支持日期的JavaScript滑块选择器。 noUiSlider - 轻量级，高度可定制的范围滑块，无膨胀。...- 日历 pickadate.js - 移动友好，响应迅速，轻量级的jQuery日期和时间输入选择器。...rome - 可定制的日期（和时间）选择器。免费依赖，选择加入UI。 datedropper - datedropper是一个jQuery插件，提供了一种快速简便的方法来管理输入字段的日期。...DataTables - （jQuery插件）它是一个高度灵活的工具，基于渐进增强的基础，并将为任何HTML表添加高级交互控件。...Tabulator - （jQuery插件）一个非常灵活的库，可以从任何JSON数据源或现有HTML表创建具有一系列交互功能的表。
jQRangeSlider - 支持日期的JavaScript滑块选择器。 noUiSlider - 轻量级，高度可定制的范围滑块，无膨胀。...- 日历 pickadate.js - 移动友好，响应迅速，轻量级的jQuery日期和时间输入选择器。...bootstrap-datepicker - 来自Stefan Petre（eyecon.ro）的@twitter bootstrap的日期选择器，由@eternicode改进。...rome - 可定制的日期（和时间）选择器。免费依赖，选择加入UI。 datedropper - datedropper是一个jQuery插件，提供了一种快速简便的方法来管理输入字段的日期。...Tabulator - （jQuery插件）一个非常灵活的库，可以从任何JSON数据源或现有HTML表创建具有一系列交互功能的表。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
