JQ的使用
1.hello,word
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn2').click(function () {
alert($('#username').val())
})
})
</script>
2.$
3.jQuery核心函数
$.each() : 隐式遍历数组
$.trim() : 去除两端的空格
$.appendTo('')
4.JQuery对象
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
5.基本选择器
- #id : id选择器
- element : 元素选择器
- .class : 属性选择器
- * : 任意标签
- selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
- selector1selector2selectorN : 取多个选择器的交集(相交选择器)
-->
$(function () {
// 1. 选择id为div1的元素
$('#div1').css('background', 'red')
// 2. 选择所有的div元素
$('div').css('background', 'red')
// 3. 选择所有class属性为box的元素
$('.box').css('background', 'red')
// 4. 选择所有的div和span元素
$('div,span').css('background', 'red')
// 5. 选择所有class属性为box的div元素
$('div.box').css('background', 'red') //不能写.boxdiv
})
6.过滤选择器
$(function () {
//1. 选择第一个div
$('div:first').css('background', 'red')
//2. 选择最后一个class为box的元素
$('.box:last').css('background', 'red')
//3. 选择所有class属性不为box的div
$('div:not(.box)').css('background', 'red')
//4. 选择第二个和第三个li元素
$('li:gt(0):lt(2)').css('background', 'red') //索引起始位置发生变化,重新开始计算
$('li:lt(3):gt(0)').css('background', 'red') //正确索引位置
//5. 选择内容为BBBBB的li
$('li:contains(BBBBB)').css('background', 'red')
//6. 选择隐藏的li
$('li:hidden ').show()
//7. 选择有title属性的li元素
$('li[title]').css('background', 'red')
//8. 选择所有属性title为hello的li元素
$('li[title=hello]').css('background', 'red')
})
7.表单选择器
$(function () {
//1. 选择不可用的文本输入框
$(':input:disabled').css('background', 'red')
//2. 显示选择爱好 的个数
console.log($(':checkbox:checked').length)
//3. 显示选择的城市名称
console.log($('select>option:selected').html())
console.log($('select').val()) //得到的是选择的option的value
})
8.$工具方法
1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
9.属性
1. 操作任意属性
attr()
removeAttr()
prop()
2. 操作class属性
addClass()
removeClass()
3. 操作HTML代码/文本/值
html()
val()
10.css
$(function () {
//1. 得到第一个p标签的颜色
console.log($('p:first').css('color'))
//2. 设置所有p标签的文本颜色为red
$('p').css('color', 'red')
//3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px) //对象
$('p:eq(1)').css({
color: '#ff0011',
background: 'blue',
width: 300,
height: 30
})
})
11.offset、position
获取/设置标签的位置数据
* offset(): 相对页面左上角的坐标
* position(): 相对于父元素左上角的坐标
12.元素滚动
1. scrollTop():
读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
滚动到指定位置(兼容chrome和IE)
13.元素尺度
1. 内容尺寸
height(): height
width(): width
2. 内部尺寸
innerHeight(): height+padding
innerWidth(): width+padding
3. 外部尺寸
outerHeight(false/true): height+padding+border 如果是true, 加上margin
outerWidth(false/true): width+padding+border 如果是true, 加上margin
14.筛选、过滤
在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)
15.筛选_查找孩子-父母-兄弟标签筛选_查找孩子-父母-兄弟标签
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签
16.文档_增删改
1. 添加/替换元素
* append(content)
向当前匹配的所有元素内部的最后插入指定内容
* prepend(content)
向当前匹配的所有元素内部的最前面插入指定内容
* before(content)
将指定内容插入到当前所有匹配元素的前面
* after(content)
将指定内容插入到当前所有匹配元素的后面替换节点
* replaceWith(content)
用指定内容替换所有匹配的标签删除节点
2. 删除元素
* empty()
删除所有匹配元素的子元素
* remove()
删除所有匹配的元素
17.事件绑定与解绑
1. 事件绑定(2种):
* eventName(function(){})
绑定对应事件名的监听, 例如:$('#div').click(function(){});
* on(eventName, funcion(){})
通用的绑定事件监听, 例如:$('#div').on('click', function(){})
* 优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑:
* off(eventName)
3. 事件的坐标
* event.clientX, event.clientY 相对于视口的左上角
* event.pageX, event.pageY 相对于页面的左上角
* event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
* 停止事件冒泡 : event.stopPropagation()
* 阻止事件默认行为 : event.preventDefault()
18.区别mouseover与mouseenter?
* mouseover: 在移入子元素时也会触发, 对应mouseout
* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()
19.事件委托
1. 事件委托:
* 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
* 监听回调是加在了父辈元素上
* 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
* 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
* 委托方: 业主 li
* 被委托方: 中介 ul
3. 使用事件委托的好处
* 添加新的子元素, 自动有事件响应处理
* 减少事件监听的数量: n==>1
4. jQuery的事件委托API
* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
* 移除事件委托: $(parentSelector).undelegate(eventName)
20.淡入淡出
淡入淡出: 不断改变元素的透明度来实现的
1. fadeIn(): 带动画的显示
2. fadeOut(): 带动画隐藏
3. fadeToggle(): 带动画切换显示/隐藏
21.滑动
1. slideDown(): 带动画的展开
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩
22.显示与隐藏
1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏
23.自定义动画
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画
24.扩展插件
1. 扩展jQuery的工具方法
$.extend(object)
2. 扩展jQuery对象的方法
$.fn.extend(object)
25.多库共存
问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()
26.window.onload与$(document).ready()
区别: window.onload与 $(document).ready()
* window.onload
* 包括页面的图片加载完后才会回调(晚)
* 只能有一个监听回调
* $(document).ready()
* 等同于: $(function(){})
* 页面加载完就回调(早)
* 可以有多个监听回调
JQ的使用的更多相关文章
- jq选择器基础
Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
- JQ实现判断iPhone、Android设备
最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...
- jq.validate隐藏元素忽略验证
jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...
- jq.validate 自定义验证两个日期
jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...
- jq方法中 $(window).load() 与 $(document).ready() 的区别
通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...
- jq 根据值的正负变色
效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同 ...
- jq 个性的隔行变色
效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...
- 关于JQ toggle 的注意事项
1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.
- js与jq对数组的操作
一.数组处理 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
随机推荐
- Photoshop学习笔记(一)
1.Alt+delete,用前景色填充选区 2.按住shift键可以新加选区 3.按住alt键可以减去选区 4.第一次选择选区时按住shift键制作出正方形或者圆形 5.第一次选择选区时按住alt键将 ...
- vscode 快速入门
vscode 快速入门 本篇主要讲解 vscode 使用中的一些经验: 配置 vue 开发环境 - Vetur+ESLint+Prettier 代码片段的使用 常用插件 如何完全卸载 vscode 通 ...
- JAVA结合Redis处理缓存穿透问题
public List<WeixinMenu> getList() { List<WeixinMenu> weixinMenuList= (List<WeixinMenu ...
- 【LeetCode】1110. Delete Nodes And Return Forest 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcode ...
- 【九度OJ】题目1474:矩阵幂 解题报告
[九度OJ]题目1474:矩阵幂 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1474 题目描述: 给定一个n*n的矩阵,求该矩阵的 ...
- 魔法串(hud4545)
魔法串 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Submiss ...
- 小试国产开源HTAP分布式NewSQL数据库TiDB-v5.3.0
概述 定义 TiDB官网 https://pingcap.com/zh/ 最新版本为5.3.0 TiDB GitHub源码 https://github.com/pingcap/tidb TiDB是由 ...
- FineGAN
目录 概 主要内容 隐变量 背景 轮廓 色彩和纹理 用于无监督分类 代码 Singh K., Ojha U. & Lee Y. FineGAN: Unsupervised Hierarchic ...
- Mysql数据库体系
Mysql数据库体系如下(手绘): 描述: 1.DBMS:database system management是数据库管理软件,平时我们使用的数据库的全称,是C/S架构(client/server)工 ...
- Dubbo为什么要用Go重写?
先说两句 我常常在散步时思考很多技术上的「为什么问题」,有时一个问题会想很久,直到问题的每一个点都能说服自己时,才算完结.于是想把这些思考记录下来,形成文章,可以当做一个新的系列.这些文章中你可能看不 ...