学习JQuery
1. 重要基础
- 简写加载函数,事情必须在DOM加载之后,否则无法绑定对象
$(document).ready() $(function(){}); //推荐缩写
- 使用包括 JQuery 库外语法类似的 JavaScript 库时,注意命名冲突
Jquery.noConflict() var $$ = JQuery; //换成 $$ 调用Jquery函数
2. 基础选择器
(选择器使用css1,css2的全部选择器语法,以及部分css3语法。)
- 对 id 元素使用选择器: 默认对第一个元素外的其他元素"失明",返回第一个对象。
- 调用属性 .length 或函数 .size() 查看对象集合的数量
- 获取对象集合里的元素 .get(0) 或加下标 [0]
- 群组选择器: 逗号列举
$("label, #text, .blue")
- 后代选择器
$("#nav h4 span") $("#nav").find("h4").find("span")
- 子代选择器(只能是直接的父子关系)
$("#nav > span") $("#nav").children("span")
- 获取 span 的下一个同级兄弟元素 p
$("div span + p") $("div span").next()
- 获取 span 以下的所有同级兄弟元素 p
$("div span ~ p") $("div span").nextAll("p")
- 同级向上(向下)选取元素,直到找到 label 元素为止(不包括 label 元素)
.prevUntil("label") //向上 .nextUntil("label") //向下
- 寻找同级兄弟
.siblings("input") .prevAll() 加上 .nextAll()
3. 过滤选择器
- 第一个(最后一个)元素
:first :last
- 排除满足条件的元素
.not(.blue)
- 奇(偶)序元素
:odd :even
- 等于/大于/小于
:eq(2) :gt(3) :lt(5)
- 标题元素(h1 ~ h6)
:header
- 正在执行动画的元素
:animated
- 正被聚焦的元素
:focus
- 包含指定文本的元素
:contains(".com")
- 不包含文本或者无子元素的元素
:empty
- 包含文本或子元素的元素
:parent
- 具有指定类的元素
:has(".blue")
- 不可见(可见)的元素
:hidden :visible
- 每个父元素的第一个(最后一个)子元素
:first-child :last-child
- 只有一个子元素的元素
:only-child
- 每个指定子元素的元素
:nth-child(odd)
- 匹配的元素
.is(".bule") .hasClass("blue") .filter(".blue") .slice(1, 4) //第二个到第四个元素
4. 表单选择器
- 选择指定元素
:input :button
- 选择不同类型的input元素
:text :password :radio :checkbox :submit :reset :image :button :file :hidden
- 选择不同属性的元素
:enabled :disabled :checked :selected
5. 基本 DOM 操作
- 获取(设置)元素html内容
.html() //加参数则设置
- 获取(设置)元素文本内容
.text() //加参数则设置
- 获取(设置)表单元素内容
.val() //加参数则设置
- 获取(设置)元素属性值
.attr() //加参数则设置 .attr({A: a, B: b}) //设置多个参数
- 获取(设置)css样式
.css() //加参数则设置,多参数设置同上
- 添加css样式
.addClass("blue") .addClass("blue red green")
- 移除css样式
.removeClass("blue") //移除多个类同上
- 切换css样式
.toggleClass("blue") //切换多个类同上 .toggleClass(function(){}, [rate]) //自定义切换规则,第二个为可选参数频率
- 获取(设置)高度(宽度)
.height() //加参数则设置 .width() //加参数则设置 .height(function(object, value){}) //object指定元素、value指定元素的高度
- 获取内外边框高度宽度
.innerWidth() .innerHeight() .outerWidth() //包括边框和内边距 .outerHeight() //同上 .outerWidth(true) //同上并包括外边框 .outerHeight(true) //同上
- 相对偏移
.offset() //相对于视口 .position() //相对于父元素
- 滚动条相关(获取/设置)
.scrollTop() //垂直 .scrollLeft() //水平
6. DOM节点操作
- 元素内部前面插入节点
.prepend(html) //插入节点html .prepend(function(new, parent)) //向parent元素内部前面插入节点new .prependTo(target) //将元素移至指定元素target
- 元素内部后面插入节点
.append(html) .append(function(new, parent){}) .appendTo(target)
- 元素外部前面插入节点
.before() .before(function(new, parent){}) .insertBefore(target)
- 元素外部后面插入节点
.after() .after(function(new, parent){}) .insertAfter(target)
- 包裹节点
.wrap(target) //参数可为html内容或者对象节点 .wrap(function(target){}) .unwrap() //解除一层包裹
- 批量包裹
.wrapAll(parent) //被元素parent包裹 .wrapInner(parent) //包裹元素parent的子元素
- 复制节点
.clone(true) //加上true表示同时复制绑定事件、不加则只复制元素和内容
- 删除节点
.remove(‘p’) //可选参数
- 保留事件行为的删除
.detach()
- 删除节点内容
.empty()
- 替换节点
.replaceWith('span') .replaceAll('p')
7. 基本事件
(以下函数均含匿名函数)
- 点击、双击
.click() .dbclick()
- 点击弹起瞬间、弹起后
.mouseup() .mousedown()
- 鼠标穿出入触发(包括子元素)
.mouseenter() .mouseleave()
- 鼠标穿出入触发(不包括子元素)
.mouseover() .mouseout()
- 鼠标移动
.mousemove()
- 键盘按下弹起瞬间、弹起后
.keyup() .keydown() .keypress()
- 焦点激活与丢失
.focus() .blur() .focusin() .focusout()
- 其他事件
.select() //文本选定 .change() //值被改变 .submit //表单提交 .scroll() //滚动条拖动 .unload() //卸载本页面 .hover(fun1, [fun2]) //鼠标移入(移出)
8. 事件对象
(function(event){})
- 页面坐标(属性)
pageX //相对于页面 pageY screenX //相对于显示屏 screenY clientX //相对于视口 clientY
9. 高级事件
- 模拟用户行为
.trigger("click", [param1, param2]) .trigger("click", [{paramA1 : a, paramA2 : b}, {paramB1, paramB2}])
- 绑定(解绑)事件
.on("click dbclick", [function(){}]) .off("click")
- 仅触发一次事件
.one() //用法同.on
10. 动画
- 显示/隐藏
.show() //可选参数持续时间,如3000表示3秒,或者“slow” .hide() //添加第二参数闭包函数则动画完毕后执行
- 自定义动画
.animate({'top': '+=88px', 'height': '200px'}, 'slow')
- 队列动画
.queue([function([next]){ ......; [next()[]}]) .dequeue() //两个函数都是执行下一个函数
- 上下卷动
.slideUp() .slideDown() .slidToggle()
- 动画操作
.delay() .stop()
- 动画属性
.fx.interval //运行帧数 .fx.off = ture //关闭动画效果
11. AJAX
.load()
- 第一个参数:目的 url 或者带选择器的 url (可带get的参数)
- 第二个参数:不为空则为post方式
- 第三个参数:闭包函数(返回数据,状态,XMLHttpRequest对象)
.get()
.post()
.AJAX() //底层函数
(以下为传入参数的属性)
- url
- type
- timeout
- data
- dataType
- beforeSend
- complete
- success
- error
- global
- cache
- content
- contentType
- async
- processData
- dataFilter
- ifModified
- jsonp
- username
- password
- scriptCharset
- xhr
- traditional
$.ajaxStart()
$.ajaxStop()
$.ajaxError()
$.ajaxSuccess()
$.ajaxComplete()
$.ajaxSend()
$.ajaxSetup() //请求默认值来初始化参数
$('form').serialize() //获取表单所有值
$('form').serializeArray() //返回键值对的Json对象
12. 工具函數
- 除去字符串两边空格
$.trim(str)
- 遍历数组(对象)
$.each(arr, function(index, value){})
- 数据筛选
$.grep(arr, function(element, index){})
- 修改数据
$.map(arr, function(element, index){})
- 合并数组
$.merge(arr1, arr2)
6.测试类型函数
$.isArray(obj) $.isFunction(obj) $.isEmptyObject(obj) $.isPlainObject(obj) //纯粹对象 $.isNumeric(data) $.isWindow(data) //window对象 $.contains(obj) //包含其他节点
- 判断类型函数
$.type(data)
- 将对象键值对转换为URL字符串键值对
$.param(obj)
- 调用内部函数
$.proxy(obj, 'objFunc') //返回obj对象里的objFunc函数
13. 插件
1.Validate.js
(jquery.validata.js 、 jquery.validate.messages_zh.js)
- 相关代码
$('form').validate()
- 必填项
class = “required”
- 邮箱
class = "email"
- 不得少于两位
minlength = "2"
- 网址
class = "url"
2. 自动完成插件 (jquery.autocomplete.js 、 jquery-migrate-1.2.1.js)
var name = ['John', 'Jack', 'Tom', 'Kitty']; $('form input[name=name]').autocomplete(name, {minChars: 0}) //0表示不需要输入一个字符即可显示所有备选数据
3. 自定义插件
分类
- 封装对象方法的插件
- 封装全局函数的插件
- 选择器插件
插件规范
- 名字: jquery.[name].js
- 局部对象附加 jquery.fn 对象上,全局函数附加在 jquery 上
- 插件内部,this 指向的是当前的局部对象
- 可以通过 this.each 来遍历所有元素
- 所有的方法或插件,必须用分号结尾,避免出现问题
- 插件应该返回的是 JQuery 对象,以保证可链式连缀
- 避免插件内部使用 $ ,如果要使用,请传递 JQuery 进去
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
springboot + redis(单机版)
本次和大家分享的是在springboot集成使用redis,这里使用的是redis的jedis客户端,如下添加依赖 <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</artifactId> </dependency> 然后需要redis的相关配置(这里我的redis密码是空) spring: redis: single: 192.168.146.28:6378 jedis: pool: max-idle: 8 max-active: 8 max-wait: 3000 timeout: 3000 password: 这是redis的一般配置,具体调优可以设置这些参数,下面在JedisConfig类中读取这些设置 @Value("${spring.redis.single}") private String strSingleNode; @Value("${spring.redis.jedis.pool.max-idle}") privat...
- 下一篇
[kata](5kyu) 约瑟夫战死排序(排列)
之前一直不懂,今天百度了下,发下kyu是级别的意思,dan是段的意思,级别数值越小越强,段数数值越大越强. 原题 https://www.codewars.com/kata/josephus-permutation/train/java 第一道5kyu题,做得有点艰难 今天又点了一道5kyu的题,测试通过了,但是解题只是求出了多个数值(传入list)的最小公倍数,而不是传入的表示形式上的分子/分母的公共分母,没有考虑到即使分母/分子不是正整数,但乘以分子可能得到正整数的可能. 原题 http://www.codewars.com/kata/common-denominators/train/java 今天看了下慕课MOOC的java进阶分数73+可以拿实体证书,但是取证时间过了3天,算了吧,就当昨天100RMB买的健身次卡抵消这次100取证的钱花销了吧!~ 上题的要求是公共分母而不是多个数值的最小公倍数, 还是有区别的. 比如下列: lst = new long[][] { {1, 131}, {5, 130} };lst = new long[][] { {1,100},{2,50...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Hadoop3单机部署,实现最简伪集群
- CentOS8编译安装MySQL8.0.19
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Mario游戏-低调大师作品
- CentOS6,CentOS7官方镜像安装Oracle11G