jQuery从入门到忘记
jQuery 是一套JavaScript脚本库,注意 jQuery 是脚本库,而不是脚本框架。"库"不等于"框架"。jQuery 并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事。
脚本库能够帮助我们完成编码逻辑,实现业务功能。使用 jQuery 将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮。
使用 jQuery 的这些功能函数,能够帮助我们快速完成各种功能,而且会让我们的代码异常简洁。
javascript脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦,比如在 jQuery 中就通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象。
- 一、选择器(selector)
- 1、基本选择器
- 2、层级选择器
- 3、基本筛选器
- 二、筛选器
- 三、操作元素(action)
- 1、 属性操作
- 2、CSS操作
- 3、文档处理
- 4、事件
总结一下,jQuery封装了JavaScript + DOM,可以写的更少做的更多。本文仅对常用内容做一个总结,方便日后把相关知识点快速捡起来。
jQuery语法基本格式:$(selector).action()
链式编程
jQuery速查表
一、选择器(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(){})
转载于:https://www.cnblogs.com/lidyan/p/6913739.html
jQuery从入门到忘记相关推荐
- 《jQuery Mobile入门经典》—— 第 1 章 了解jQuery Mobile
本节书摘来异步社区<jQuery Mobile入门经典>一书中的第1章,作者:[美]Phil Dutson,更多章节内容可以访问云栖社区"异步社区"公众号查看. 第 1 ...
- 《jQuery Mobile入门经典》—— 2.7 练习
本节书摘来异步社区<jQuery Mobile入门经典>一书中的第2章,第2.7节,作者:[美]Phil Dutson,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
- 【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数,获取DataTable Json,Asp.net
直接上图=============最后拷贝源码(图片清楚) ====================================================================== ...
- jQuery学习入门总结之css()和addClass()的不同
jQuery学习入门之css()和addClass()的不同 这两天研究jQuery的,刚刚开始入门,从昨天开始呢,就发现一个方法addClass的,教程里有一个方法是这样写的 $(docum ...
- Ajax、jQuery基础入门视频教程
关注公众号,免费获取资料 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...
- JQuery 基础 || 目前 jQuery 有三个大版本||JQuery快速入门
1. 概念: 一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScrip ...
- jQuery快速入门
jquery快速入门 jQuery的作用:1.取得页面中的元素:2.修改页面的外观:3.改变页面的内容:4.响应用户的页面操作:5.为页面添加动态效果:6.无须刷新页面即可从服务器获取数据:7.简化常 ...
- JQuery EasyUI入门
JQuery EasyUI入门 @(JavaScript)[jQuery, EasyUI, 入门] JQuery EasyUI入门 基本概述 案例 Layout布局 Accordion手风琴 Tab选 ...
- 《jQuery Mobile入门经典》—— 2.2 展现CSS样式
本节书摘来异步社区<jQuery Mobile入门经典>一书中的第2章,第2.2节,作者:[美]Phil Dutson,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
最新文章
- java 正则 反向引用_正则之反向引用
- 使用struts2+JQuery实现的简单的ajax例子
- 刷算法的时候有没有必要自写测试用例?
- 大数据中心周边辐射大吗_PETCT有辐射,PETCT对陪同人员的影响大吗?
- java将数据封装为树结构_JAVA代码实现多级树结构封装对象
- 工厂模式、构造函数入门
- 玩转 Pandas 的 Groupby 操作
- PHP-代码审计-文件读取(下载)
- [CF]Round514
- matlab平滑窗滤波,matlab实现平滑滤波
- linux下关于密码复杂度设置
- 微服务框架 Spark Framework
- 火星上首座虚拟房屋以超过50万美元价格售出
- 宝塔linux面板安装seafile,Centos7 安装seafile 企业共享网盘
- java的环境变量_java学习册|JDK|环境变量
- 为什么要使用boost::enable_shared_from_thisT
- 【Linux】ubuntu中怪异的vi编辑器
- 14款CSS3图片层叠切换动画
- CSS 模拟电影卡片
- excel如何比对两列数据是否相同
热门文章
- 如何快速上手 AB Testing ?阿里技术专家秘方公开
- 1分钱,工程师可以做什么?
- android html ajax请求,android - HTMLUNIT java javascript ajax - Stack Overflow
- 漫谈C#编程语言在游戏领域的应用
- 回顾游戏中的设计模式:策略模式vs抽象工厂
- Python编程专属骚技巧2
- SQL基础【二十、索引】(超细致版本,前理论,后实践,应对sql面试绰绰有余)
- Spring boot 上传文件时 MultipartFile 报空指针
- Jmeter5.1.1第一个http请求的压力测试
- 关于async 中return 和 return await 的差异