目录
JQuery
JQuery选择器
jquery对象常用函数
JQuery的样式函数
JQuery基本筛选选择器（熟悉）
JQuery内容筛选器（了解）
JQuery可见性筛选选择器（了解）
JQuery表单筛选选择器（了解）
JQuery属性筛选选择器（了解）
JQuery对象常用函数
样式函数 css
修改与获取 元素的属性值
获取设置class属性值
输入框的value属性值获取 (了解)
设置与获取文本内容
JQuery获取盒模型的宽度高度
JQuery显示与隐藏函数
JQuery动画
JQuery事件
事件 绑定与解除
事件函数（熟悉）
组合事件函数（熟悉）
JQuery动态绑定事件函数
JQuery文档函数
文档查找函数
文档筛选查找函数（了解）
JQuery工具函数
遍历Jquery对象
遍历数组
数组去重
数组合并
去除字符串前后的空格
H5中的JS常用操作
地理位置
本地存储
WebSocket
插件
放大镜插件
表单验证
消息提示插件
Echarts(JS的)
自定义插件
BootStrap
在线CDN
简介
使用步骤
默认页面的排版变化
标题标签样式
内联文本样式
文本对齐方式
大小写文本
列表样式
代码块样式
前景后景色（掌握）
表格样式
文字图标样式
按钮样式
按钮尺寸样式
激活&禁用 (可用于按钮等组件)
表单样式 (input输入框的样式)
block 块样式
响应式 内联输入框
组合输入框
输入框校验状态
输入框尺寸
响应式
栅格系统
栅格容器
栅格中的行与列
固定栅格容器
栅格偏移
栅格移动
栅格嵌套
下拉菜单
下拉菜单的样式调整
分裂式下拉菜单
巨幕
导航
基本导航
横向充满容器的导航
横向胶囊导航
垂直胶囊导航
在导航中加入下菜单
内容切换导航
附加导航
导航条
基本导航条
向导航条中加入内容
向导航条中加入其它内容
固定导航条
静态导航
分页标签
多页分页标签
上下翻页标签
警告框
栅格系统缩略图问题
特殊按钮
开关按钮
单选与多选按钮
折叠面板
图片轮播组件
ID选择器 var $obj = $("#id值"); 类选择器 var $obj = $(".class值"); 元素名称选择器 var $obj = $("元素名称");
<code>例子</code>
淡入淡出效果: 元素淡入: $obj.fadeIn(毫秒数值); 元素淡出: $obj.fadeOut(毫秒数值);
<code>格式</code>
$obj.css(JSON对象)
格式：
$(选择器1:first) : 选择选择器1中的第一个元素 $(选择器1:last) : 选择选择器1中的最后一个元素 $(选择器1:eq(下标)) : 选择选择器1中的指定下标的元素 $(选择器1:gt(下标)) : 选择选择器1中的大于指定下标的元素 $(选择器1:lt(下标)) : 选择选择器1中的小于指定下标的元素 $(选择器1:even) : 选择选择器1中的偶数下标的元素 $(选择器1:odd) : 选择选择器1中的奇数下标的元素 $(选择器1:not(选择器2)) : 从选择器1中 排除符合选择器2 条件的元素 !
筛选内容是否包含 格式: $("选择器:contains('包含的文本')"); 从选择器所选择的元素中, 筛选出包含指定文本的元素 ! 筛选内容为空 格式: $("选择器:empty"); 从选择器所选择的元素中, 筛选出不存在文本内容的元素 !
$("选择器:visible"); 从选择器中筛选出可见的元素 $("选择器:hidden"); 从选择器中筛选出不可见的元素 不可见的元素: 宽度/高度为0 display:none input的type属性为hidden
筛选的是 input 标签的 type属性值 $("选择器1:type属性值"); //从选择器1的结果中, 筛选匹配type属性的input
筛选属性存在 格式: $("选择器1[属性名]"); 案例: 将所有带有title属性的img标签, 样式修改为宽度 200px; $("img[title]").css({"width":"200px"}); 筛选属性匹配某值 $("选择器1[属性名='值']"); 将所有带有title属性的img标签,且title值为hahah, 样式修改为宽度 200px; $("img[title='hahaha']").css({"width":"200px"}); 筛选属性不匹配某值 $("选择器1[属性名!='值']"); 将所有带有title属性的img标签,且title值不为hahah, 样式修改为宽度 200px; $("img[title!='hahah']").css({"width":"200px"});
格式
格式1. 一次指定单个样式 $obj.css("样式键","样式值"); 格式2. 一次指定一组样式: $obj.css(JSON对象);
在JS中，通过dom对象 修改元素的属性值的方式为：
对象.属性名 = 值；
在JQuery中，通过attr函数 设置与获取属性值：
格式1： 设置属性值： $obj.attr("属性名":"属性值"); 获取属性值： var 属性值 = $obj.attr("属性名"); 格式2: 设置一组属性值： $obj.attr(JSON对象); 注意: 在Jquery中, 通过attr函数 无法正确的操作: class属性 / value属性 / 文本内容
添加class $obj.addClass("值"); 删除class $obj.removeClass("值"); 替换class $obj.toggleClass("值"); //如果值存在, 则删除 ! 不存在则添加
通过attr函数 可以获取value属性值, 但是得到的永远都是初始值 ! Jquery提供了一个用于获取与设置value属性值的函数 获取: var value = $obj.val(); 设置: $obj.val(值);
在JS中, 通过dom对象的innerHTML属性 来获取与修改 元素的文本内容 ! 在Jquery 中 , 获取内容: var text = $obj.html();//获取元素文档内容 格式2. var text = $obj.text();//获取元素文本内容 html() 与 text() 的区别: text函数 获取内容时,会忽略标签部分 html函数 获取内容时, 会携带标签部分 在Jquery中 指定文本内容: $obj.html(内容);
<code>例如</code>
<code>result</code>
获取宽度: var width = $obj.width(); 获取宽度+左右内边距的宽度 var width = $obj.innerWidth(); 获取宽度+左右内边距的宽度+左右边框宽度 var width = $obj.outerWidth(); 获取宽度+左右内边距的宽度+左右边框宽度+左右外边距宽度 var width = $obj.outerWidth(true); 获取高度: var height = $obj.height(); 获取高度+上下内边距的高度 var height = $obj.innerHeight(); 获取高度+上下内边距的高度+上下边框高度 var height = $obj.outerHeight(); 获取高度+上下内边距的高度+上下边框高度+上下外边距高度 var height = $obj.outerHeight(true);
基本显示隐藏效果
显示：$obj.show();
隐藏：$obj.hide();
切换：$obj.toggle();
左上折叠 淡入淡出显示隐藏效果
显示：$obj.show(毫秒数);
隐藏：$obj.hide(毫秒数);
切换：$obj.toggle(毫秒数);
上下折叠显示隐藏效果(图片需要有固定的宽度)
显示 : $obj.slideDown(持续时间 毫秒);
隐藏 : $obj.slideUp(持续时间 毫秒);
切换 : $obj.slideToggle(持续时间 毫秒);
淡入淡出显示隐藏效果
显示 : $obj.fadeIn(持续时间 毫秒);
隐藏 : $obj.fadeOut(持续时间 毫秒);
这后面的例子有网就能正常跑出来，特殊情况除外
<code>显示隐藏 淡入淡出 的效果</code>
<code>上下折叠</code>
<code>淡入淡出</code>
$obj.animate(style,time,[function]); 参数1. style : 是一个JSON格式的参数, 用于描述动画最终的样式 ! 参数2. time : 表示从当前样式, 过渡到参数1样式 所需的毫秒时间值 参数3. 可选参数 , function类型, 在动画执行完毕时 自动调用 !
注意: 通过绑定添加的事件, 是可以叠加的 ! 添加的事件无论是否产生了叠加 , 一次解绑 全部解除 ! 绑定事件 $obj.bind("事件类型",函数); 解绑事件 $obj.unbind("事件类型"); 模拟触发事件 $obj.trigger("事件类型");
通过jquery, 调用事件函数 传递function 完成事件逻辑的处理 ! $obj.事件类型(function); 常用事件函数: click(fn)/click() 点击 dblclick(fn)/dblclick() 双击 blur(fn)/blur() 失去焦点 focus(fn)/focus() 获取焦点 change(fn)/change() 元素状态改变 keydown(fn)/keydown() 键盘按下 keyup(fn)/keyup() 键盘弹起 mouseover(fn)/mouseover() 鼠标移入 mouseout(fn)/mouseout() 鼠标移出 submit(fn)/submit() 表单提交
hover(in,out) 移入，移出 in : 当光标移出时 触发的函数 out : 当光标移入时 触发的函数
给未来元素 绑定事件 (给未来添加的元素, 提前指定事件函数) $祖先元素.on("事件类型","选择器",处理函数); 给指定的祖先元素内 , 符合选择器条件的未来元素 指定处理事件的函数 !
创建元素 var $obj = $("html元素字符串");
添加元素 向指定的父元素内部 追加 新的子元素 格式: $父元素.append(新元素); 向指定的父元素内部 前置 新的子元素 格式; $父元素.prepend(新元素); 向指定的元素后, 添加新的兄弟元素 格式: $obj.after(新元素); 向指定的元素前, 添加新的兄弟元素 格式: $obj.before(新元素); 删除元素 格式: $obj.remove() // 删除调用remove函数的元素 清空元素 格式: $obj.empty() // 清空调用empty函数的元素 克隆元素 忽略事件 克隆 var $新的对象 = $原对象.clone(); 携带事件 克隆 var $新的对象 = $原对象.clone(true);
根据一个已经得到的JQuery对象，查找与其相关的元素的JQuery对象。
查找匹配选择器的子元素 $obj.children("选择器"); 查找匹配选择器的后代元素 $obj.find("选择器"); 获取下一个兄弟元素 $obj.next(); 获取上一个兄弟元素 $obj.prev(); 获取父元素 $obj.parent(); 查找匹配选择器的祖先元素 $obj.parents("选择器");
从一个Jquery对象中, 筛选出需要的部分: var $x = $obj.eq(下标) : 获取指定下标处的Jquery对象 var dom = $obj.get(下标) : 获取指定下标处的dom对象 var $x = \(obj.first() : 返回\)obj中第一个元素的jquery 对象 var $x = \(obj.last() : 返回\)obj中最后一个元素的jquery对象 $obj.is(选择器) : 是否满足选择器条件 var $x = $obj.not(选择器): 筛选出不满足选择器条件的jquery对象
格式: $obj.each(function(){ //this 指的是 每一次遍历的元素的dom对象 });
$.each(数组,function(i,value){ //i : 表示循环遍历的下标 //value: 表示循环遍历时数组每个下标的数据 });
$.unique(数组名);
$.merge(数组1,数组2); 作用: 将数组2的内容, 追加到数组1中! 此操作不影响数组2中的数据 !
var 新字符串 = $.trim(原字符串); 此操作 没有对原字符串进行改变 . 返回值为新的去除空格的字符串 !
<code>eg</code>
共有两种存储数据的方式：
通过 localStorage 对象，存储数据！
存储数据时，理论上数据是永久存储的！ 除非人为操作，如清理垃圾
通过 sessionStorage 对象，存储数据！
当会话结束时，数据自动清除！（浏览器关闭时）
注意: 上述两个对象, 操作的方式完全一致. 存储键值对, 键与值都是字符串 !
常用函数: 存储数据: 格式1. 对象.setItem(key,value); 格式2. 对象.key=值; 取出数据: 格式1. var value = 对象.getItem(key); 格式2. var value = 对象.key; 删除单个数据: 对象.removeItem(key); 清空所有数据: 对象.clear(); 根据存储的顺序, 取出数据的key //函数名称为key ,得到的是键值对的键 var k = 对象.key(下标);
我们学习的不是如何使用某一个插件 , 重点是: 如何使用所有的插件 !
步骤: 引入Jquery.js文件 引入插件的js文件 在网页中 编写一个img标签 , img的src属性指向小图片 在script块中, 通过JSON 描述放大镜规格: var json = { imgSrc:"大图片路径", lensShape:"放大镜形状",//圆形circle 方形square lensSize:数值,//放大镜大小, 值为数字表示px borderColor:"十六进制颜色值",//表示放大镜边框颜色 borderRadius:数值//值为数字,表示边框的圆角,是px ,不能使用百分比 //如果形状为方形 圆角等于放大镜大小的一半,则效果也是圆形的! } 在网页加载完毕后, 通过上述img标签的jquery对象 , 绑定放大镜插件 并指定放大镜的规格JSON对象 $(function(){ $("#x").mlens(json);
校验规则:
使用步骤(格式1):
使用步骤(格式2):
普通消息提示 $.growl({"title":"提示的标题","message":"提示的内容"}); 提醒消息提示 $.growl.notice({"title":"提示的标题","message":"提示的内容"}); 警告消息提示 $.growl.warning({"title":"提示的标题","message":"提示的内容"}); 错误消息提示 $.growl.error({"title":"提示的标题","message":"提示的内容"});
使用步骤: 引入插件的JS文件 在网页中 加入一个div标签, 用于绘制图形 ! 此div必须拥有id属性值 ,以及宽度和高度样式 !
在网页加载完毕时, 通过echarts的init函数传入上述的div的dom对象, 完成图表对象的创建
编写步骤: 将设计好的视觉样式, 先通过html文件 编写出来 将上述设计好的元素的样式,全部修改为内联样式 (元素的style属性中) 将上述设计好的插件效果, 转换为JS中的字符串形式 通过编写函数, 向网页中 动态的添加上述的字符串代码 !
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的是一个基于HTML、CSS、JavaScript 的开源框架。 该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。
下载用于生产环境的 框架文件包 - css文件夹 - fonts文件夹 - js文件夹
将上述的三个文件夹, 解压并复制到项目的webContent目录下 将jquery.js文件, 复制到js文件夹下 在使用框架的位置 , 引入如下三个文件: bootstrap的核心样式文件 - jquery框架 - bootstrap的核心脚本文件
所有文字默认为 14px line-height 行高设置为了20px p标签取消了上外边距 , 指定了下外边距为10px(二分之一行高) 文本颜色 为 #333
可以通过标题标签编写标题 , 也可以通过class=h1 -- h6 来完成标题的编写 !
class: text-left : 文本居左 text-center : 文本居中 text-right : 文本居右
text-lowercase : 小写 text-uppercase : 大写 text-capitalize : 首字母大写
list-unstyled : 取消前置文字或图标 以及 将列表左侧内边距设置为0 list-inline : 横向排列 , 取消了前置的文字和图标
前景色(文本颜色) class text-muted : 柔和灰 text-success : 成功绿 text-info : 信息蓝 text-primary : 主要蓝 text-warning : 警告黄 text-danger : 危险红 后景色(背景颜色) class (部分后景色会修改前景色) : bg-success : 成功绿 bg-info : 信息蓝 bg-primary : 主要蓝 bg-warning : 警告黄 bg-danger : 危险红
基本表格样式： class : table 条纹表格样式： class : table table-striped 带有边框的表格样式： class : table table-bordered 鼠标悬停显示激活样式： class : table table-hover 给tr单独指定颜色值： class: active : 激活样式 success : 成功绿 info : 信息蓝 warning : 警告黄 danger : 危险红 sr-only : 隐藏不显示
给如下的html标签, 添加按钮样式class, 可以完成按钮样式的编写 : span标签 (推荐) button标签 input标签 type属性为 button/submit/reset ... a标签 class 效果 btn 基本按钮效果 (需配合其他背景颜色 使用) btn btn-default 默认按钮效果 btn btn-primary 主要蓝按钮样式 btn btn-success 成功绿按钮样式 btn btn-info 信息蓝按钮样式 btn btn-warning 警告黄按钮样式 btn btn-danger 危险红按钮样式 btn btn-link 超链接按钮样式
class: 效果 btn-lg 大按钮 btn-sm 小按钮 btn-xs 小小按钮 btn-block 块按钮 (常用于手机网页的编写 , 独占一行)
class 效果 active 激活样式 disabled 禁用样式
给表单的input标签 通过bootstrap修改样式时, input标签必须是指定了type属性的 ! 如果使用文本输入框, 必须指定type=text
独占一行的输入框 (可以应用到submit按钮上) class : form-control
当屏幕的宽度小于768px时, 自动切换为 适用手机的输入框效果 ! 组合class: form标签 : form-inline input标签 : form-control
用于将一组元素 组合为一个输入框 (可以给输入框添加前置与后置的内容) 1 给form表单标签 添加class="form-group" 2 给表单中的每一个输入框 ,添加父元素div,div的class=input-group , 此div是组合输入框的容器 ! 3 给输入框添加前一个兄弟元素 或 后一个兄弟元素div , 并指定class=input-group-addon
实现步骤: 给输入框 添加父元素div 当输入框满足特定条件时 , 给输入框的父div 添加class: has-error : 输入错误 红 has-success : 输入成功 绿 has-warning : 输入警告 黄
input标签class: input-lg : 大输入框 input-sm : 小输入框 也可以给组合输入框 修改尺寸 , 给输入框的父div添加class: form-group-lg : 大组合输入框 form-group-sm : 小组合输入框
栅格系统: 指的是bootstrap所提供的一套用于响应式 以及 移动设备优先的 流式栅格布局!
共分为 两种栅格容器:
在栅格中, 需要将内容编写到 栅格行中 通过创建div , 指定class=row来实现 栅格行的创建 . 一个栅格行中 等分为12分, 超出部分自动换行 !
超小屏幕<768px 992px>小屏幕≥768 1200px>中等屏幕≥992px 大屏幕≥1200px 固定宽度: auto 750px 970px 1170px 类前缀 : col-xs- col-sm- col-md- col-lg- 每一列的宽度: auto 大约62px 大约81px 大约97px
类前缀-offset-数字: 偏移值
向左移动 类前缀-pull-数字 向右移动 类前缀-push-数字 移动后的元素是覆盖显示的
栅格中每一个占有固定份数的元素内部, 也可以当作栅格容器行来使用
设置菜单向上触发 将外层div设置为 class="dropup" 设置菜单项在屏幕的右侧 ul标签添加class="dropdown-menu-right" 设置弹出菜单的标题 给ul内部前置一个新的li ,li的内容是文本 , 指定li的class="dropdown-header" 在多个菜单选项之间, 添加分割线 每一个分割线都是一个li , class="divider" 设置某选项为 禁用 设置禁用选项li的class="disabled" 设置菜单 默认显示 在最外层的div中指定class="dropdown open"
按钮组合 - 分裂式下拉菜单
1 编写一个下拉菜单(按钮仅包含一个箭头) 2 修改下拉菜单的 外层div的class="btn-group" 3 在菜单最外层的div中, 前置一个按钮即可
1. 编写一个ul , 指定class="nav" 2. ul中添加一个个的li , li中包含一个个的超链接
1. 编写一个ul , 指定class="nav nav-tabs nav-justified"
1. 编写一个ul , 指定class="nav nav-pills"
1. 编写一个ul , 指定class="nav nav-pills nav-stacked"
将导航的某一个选项, 更改为下拉菜单的样式 ! 我们在编写导航时, 是ul包含li 在编写下拉菜单时, 最外层的父元素 是 div li与div都是块元素 ! 总结: 在导航中加入下拉菜单的方式, 就是将导航中的一个li 当作下拉菜单的div来编写! 注意: 下拉菜单中的按钮 , 不再使用span标签 , 而是使用超链接标签, 并取消按钮样式 !
创建一个普通的导航 在导航ul的下面 ,添加一个兄弟元素div , 指定div的class="tab-content" 在上述创建的div中 , 加入一个个的子div , 每一个子div 作为一个被切换的内容 这个div必须有id , class值必须设置为tab-pane fade , 默认选中项的class值为: tab-pane fade in active 导航中每一个超链接 , 添加属性: data-toggle="tab" 导航中每一个超链接 ,都需要添加链接地址 , 链接地址为#第二步子div的id 给导航中默认选中的li选项 ,设置class=active
通过栅格系统, 实现左右两个div的分割, 2:10 左侧div 用于编写附加导航 , 需指定id属性值 右侧div 用于编写内容 在左侧的div中, 加入普通的垂直导航 给导航的ul标签 添加属性: data-spy="affix" 在右侧div中, 与导航选项关联的位置, 添加元素, 并指定id ! 修改左侧div中的每一个导航项的超链接, 连接到指定的内容的#id 修改body , 绑定导航到网页上 给body添加属性: data-spy="scroll" data-target="#左侧div的id" 给导航中默认的选项li , 设置class="active"
一般用于网页顶部 与 底部的导航菜单 ! 编写一个nav标签 指定class="navbar navbar-default" 向nav标签中, 加入ul标签 ,class="nav navbar-nav" 向ul标签中 加入一个个的li , li的内容是超链接
取消了导航条的圆角 ! 根据设置的不同, 固定在网页顶部 或 底部 顶部: 添加nav标签的class="navbar-fixed-top" 底部: 添加nav标签的class="navbar-fixed-bottom"
仅仅是取消了导航条的圆角 添加nav标签的class="navbar-static-top"
编写一个ul标签 , 指定class="pagination" 给ul添加一个个的li标签, li中的内容是一个个的超链接, 每一个li 表示一个翻页的按钮 !
1 编写一个ul标签 , 指定class="pager" 2 个ul添加两个子标签li (li中是超链接) 第一个li 是上一页 第二个li 是下一页 3 可选 : 上一页居左 : 给li添加class="previous" 下一页居右 : 给li添加class="next"
在网页中, 添加警告框 ,显示时占用网页空间的, 可以被用户关闭 ,关闭后不占用网页空间 !
给普通的按钮样式, 添加属性: data-toggle="button"
单选使用步骤: 正常编写一组单选框 (input标签 type="radio") 给一组单选框中的 每一个input标签添加父元素span , 并给span指定任意按钮样式 ! 通过给一组按钮样式的span 添加父元素div , 来实现按钮组! div的class="btn-group" 属性: data-toggle="buttons"
<code>多选和单选一样，只有radio变成了checkbox</code>
创建一个div ,用作被折叠的内容div ! 指定class="collapse" ,需指定id属性值 在div前, 创建一个按钮, 用于点击展开面板 属性: data-toggle="collapse" data-target="#内容div的id"
本文来自博客园，作者：chn-tiancx，转载请注明原文链接：https://www.cnblogs.com/tiancx/p/15359169.html