jQuery从入门到忘记
jQuery 是一套JavaScript脚本库,注意 jQuery 是脚本库,而不是脚本框架。"库"不等于"框架"。jQuery 并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事。
脚本库能够帮助我们完成编码逻辑,实现业务功能。使用 jQuery 将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮。
使用 jQuery 的这些功能函数,能够帮助我们快速完成各种功能,而且会让我们的代码异常简洁。
javascript脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦,比如在 jQuery 中就通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象。
总结一下,jQuery封装了JavaScript + DOM,可以写的更少做的更多。本文仅对常用内容做一个总结,方便日后把相关知识点快速捡起来。
jQuery语法基本格式:$(selector).action()
链式编程
一、选择器(selector)
1、基本选择器
#id
element
.class
* 包含body
selector1,selector2,selectorN 并列选择,组合
$("p").css("color","red")
$("#div1").text("it works")
$(".div2").css("background","yellow")
2、层级选择器
ancestor descendant 所有后代
parent > child 只有儿子
prev + next 后面紧邻的下一个
prev ~ siblings 后面所有的兄弟同辈
3、基本筛选器
- 针对索引进行筛选
:first 第一个
:even 索引为偶数
:odd 索引为奇数
:eq(index) 索引等于
:gt(index) 索引大于
:lt(index) 索引小于
$("li:first") $("li:even")
$("li:eq(2)") $("li:gt(1)")
其他
:not(selector) 非
:header
:focus
针对内容进行筛选
:contains(text)
$("div:contains('moumou')")
:empty 选择内容为空的
:has(selector) 如包含P标签
$("div:has(p)").addClass("test");
- 针对属性进行筛选----重要常用
[attribute] 也可以自定义属性
[attribute=value]
[attr1][attr2][attr3] 多个属性并列
<div id="div1" selfdefine="moumou"/>
$("div[selfdefine]")
$("div[id='div1']")
- 针对表单进行筛选
:input
:checkbox
$("input")
等价于
$(":input")
$("[type='text']")
等价于
$(":text")
$("input[type='checkbox']")
等价于
$(":checkbox")
针对表单对象属性筛选
:enabled
:disabled 禁用标签
:checked
:selected
$("input:checked")
$("select option:selected")
二、筛选器
过滤筛选器
\\通过索引过滤
eq(index|-index)
first()
last()
hasClass(class)
$("p:eq(1)").css("fontSize","30px")
$("p").eq(1).css("fontSize","30px")
//优势后者不需要字符串拼接
查找筛选器
children([expr]) 只有儿子,没有孙子
find(e|o|e) 所有后代
$("div").children(".test") $("div").find(".test")
next([expr]) 紧邻的下一个
nextAll([expr]) 下面的所有满足条件的集合
nextUntil([e|e][,f]) 到**为止
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
prev([expr]) 紧邻的上一个
prevall([expr])
prevUntil([e|e][,f])
$("div").prev() $("div").prevAll() $("div").prevUntil()
parent([expr]) 父亲
parents([expr]) 父亲爷爷等祖先
parentsUntil([e|e][,f])
$(".test").parent() $(".test").parents() $(".test").parentUntil()
siblings([expr]) 后面的兄弟
$("div").siblings()
三、操作元素(action)
1、 属性操作
//HTML代码/文本/值
$("p").text()
$("p").html()
$(":checkbox").val()
$(".test").attr("attr")
$(".test").attr("attr","value")
$(".test").attr("checked","checked")
$(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
$(".test").removeClass("hide")
取消全选的实例
<button onclick="selectAll();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
</tr>
</table>
<script src="jquery-1.8.2.js"></script>
<script>
function selectAll() {
$("table :checkbox").prop("checked",true)
}
function cancel() {
$("table :checkbox").prop("checked",false)
}
function reverse() {
$("table :checkbox").each(function(){
if ($(this).prop("checked")){
$(this).prop("checked",false)
}
else {
$(this).prop("checked",true)
}
})
}
</script>
each 函数需要注意的问题:
// each return 退出与外层函数无关
// each return false 提示each退出
function f1(){
var li=[11,22,23,44]
//x,y索引和值
$.each(li,function (x,y) {
console.log(y);
if (x == 1){
return false;
}
});
return
console.log("ok");
}
2、CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) height() width()
//scrollTop距离顶部的距离
window.onscroll=function(){
var current=$(window).scrollTop();
console.log(current)
}
3、文档处理
内部插入
append()
appendTo()
$("#c1").append("<b>hello</b>")
$("p").appendTo("div")
prepend()
prependTo()
外部插入
before() insertBefore()
after insertAfter()
replaceWith() 替换
remove() 删除标签
empty() 清空内容
clone() 复制某标签
4、事件
整个文档拓扑结构加载再执行js代码
// 所有函数放入其中,需要等待整个文档加载完,避免找不到
$(document).ready(function(){...})
$(function(){...})
绑定事件
//js中的写法
<button class="result" onclick="show(this)"></button>
function show(self){
self.lalalala;
}
//jQuery的写法
$(".result").click(function(this){
this.lalalala;
})
$("p").click(function(){})
$("p").bind("click",function(){})
//用的时候再绑定事件 事件委托
$("ul").delegate("li","click",function(){})
jQuery从入门到忘记的更多相关文章
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- JQuery Mobile入门——设置后退按钮文字(转)
http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28 CSDN博客原文 h ...
- 极客技术专题【007期】:jQuery初学者入门 - jQuery Event
日期:2013-8-19 来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第三讲:jQuery Event] 分享人:极客标签技术编辑 -Lana (请站内关注分享人) 授课时 ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- jQuery的入门与简介
jQuery的入门与简介<思维导图> <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- 第一百九十一节,jQuery EasyUI 入门
jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...
- day 48 jQuery快速入门
jQuery快速入门 jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...
随机推荐
- 使用Fiddler进行http抓包和调试
本文目录 : Fiddler的工作原理 Fiddler的常用操作 支持https解密分析 Fiddler的断点调试 本文小结 参考文献 俗话说:工欲善其事,必先利其器. Fiddler是windows ...
- SPRING AOP ....0 can't find referenced pointcut
下载最新的aspectjweaver就可以了,因为JDK的版本的问题不兼容. //织入点语法 @Pointcut("execution(public * com.frank.dao..*.* ...
- OpenCV探索之路(十一):轮廓查找和多边形包围轮廓
Canny一类的边缘检测算法可以根据像素之间的差异,检测出轮廓边界的像素,但它没有将轮廓作为一个整体.所以要将轮廓提起出来,就必须将这些边缘像素组装成轮廓. OpenCV中有一个很强大的函数,它可以从 ...
- STM32串口控制步进电机(原创)
用的42步进电机: 厂家可能不一样,两项四线步进电机,里面有两个线圈.在电机什么电都没有接的情况下,用万用表测量四个管脚:两两短接(或者阻值很小)的为一组,可以分别接A+,a-剩余接B+,B-;顺序可 ...
- zookeeper的安装与配置
本文将通过三个zookeeper的节点去配置 1.首先去官网下载zookeeper的包 zookeeper-3.4.10.tar.gz 2.用FTP文上传到/usr/local下 3.解压文件tar ...
- firstChild,lastChild,nextSibling,previousSibling & 兼容性写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java之进程与线程
一.进程 二.线程 1.定义及特点 1)[定义]线程是一个进程内部的一条执行路径,Java虚拟机允许应用程序并发地运行多个执行路径 是系统独立调度和分派[CPU]的基本单位 2)特点 进程中执行运算的 ...
- Hadoop SSH+IP、SSH+别名 免密登录配置
1.为什么要进行 SSH 无密码验证配置? Hadoop运行过程中需要管理远端Hadoop守护进程,在Hadoop启动以后,NameNode是通过SSH(Secure Shell)来启动和停止各个Da ...
- cpp(第十一章)
1. std::istream & operator>>(std::istream &is,complex_c &t) { std::cout<<&qu ...
- mysql之 mysql 5.6不停机双主一从搭建(活跃双主一从基于日志点复制)
环境说明:版本 version 5.6.25-log 主1库ip: 10.219.24.25主2库ip: 10.219.24.22从1库ip:10.219.24.26os 版本: centos 6.7 ...