jQuery学习笔记01
1、jQuery介绍
1.1什么是jQuery ?
jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。
1.2 jQuery核心思想
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
1.3 jQuery流行程度
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery好处！
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
2、jQuery举例
2.1需求：使用jQuery给一个按钮绑定单击事件?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var btnObj = document.getElementById("btnId");
// // alert(btnObj);//[object HTMLButtonElement] ====>>> dom对象
// btnObj.onclick = function () {
// alert("js 原生的单击事件");
// }
// }
$(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
var $btnObj = $("#btnId"); // 表示按id查询标签对象
$btnObj.click(function () { // 绑定单击事件
alert("jQuery 的单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
2.2 jQuery常见问题
|
1.使用jQuery一定要引入jQuery库吗？ |
答案：是，必须 |
|
2.jQuery中的$到底是什么？ |
答案：它是一个函数 |
|
3．怎么为按钮添加点击响应函数的？ |
答案：1、使用jQuery查询到标签对象 2、使用标签对象.click( function(){} ); |
3、jQuery核心函数
$ 是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数
1、传入参数为[ 函数 ] 时：表示页面加载完成之后。
相当于window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时： 会创建这个html标签对象
3、传入参数为 [ 选择器字符串 ] 时：
|
$(“#id属性值”); |
id选择器，根据id查询标签对象 |
|
$(“标签名”); |
标签名选择器，根据指定的标签名查询标签对象 |
|
$(“.class属性值”); |
类型选择器，可以根据class属性查询标签对象 |
4、传入参数为 [ DOM对象 ] 时：会把这个dom对象转换为jQuery对象
4、jQuery对象和DOM对象区分
4.1、什么是jQuery对象，什么是DOM对象
|
Dom对象 1.通过getElementById()查询出来的标签对象是Dom对象 2.通过getElementsByName()查询出来的标签对象是Dom对象 3.通过getElementsByTagName()查询出来的标签对象是Dom对象 4.通过createElement() 方法创建的对象，是Dom对象 注意：DOM对象Alert出来的效果是：[object HTML标签名Element] |
|
jQuery对象 1.通过JQuery提供的API创建的对象，是JQuery对象 2.通过JQuery包装的Dom对象，也是JQuery对象 3.通过JQuery提供的API查询到的对象，是JQuery对象 注意：jQuery对象Alert出来的效果是：[object Object] |
4.2、问题：jQuery对象的本质是什么？
jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数的组合。
4.3、jQuery对象和DOM对象使用区别
jQuery对象不能使用DOM对象的属性和方法，DOM对象也不能使用jQuery对象的属性和方法
4.4、DOM对象和jQuery对象互转
|
DOM对象转化为jQuery对象（*重点） |
|
1、先有DOM对象 |
|
2、$( DOM对象 ) 就可以转换成为 jQuery对象 |
|
jQuery对象转为DOM对象（*重点） |
|
1、先有jQuery对象 |
|
2、jQuery对象[下标]取出相应的DOM对象 |
5、jQuery选择器（重点）
5.1、基本选择器（重点）
|
#ID 选择器 |
根据id查找标签对象 |
|
.class 选择器 |
根据class查找标签对象 |
|
element 选择器 |
根据标签名查找标签对象 |
|
* 选择器 |
表示任意的，所有的元素 |
|
selector1，selector2 组合选择器 |
合并选择器1，选择器2的结果并返回 |
|
|
表示标签名必须是p标签，而且class类型还要是myClass |
5.2、层级选择器（重点）
|
Ancestor descendant |
后代选择器 ：在给定的祖先元素下匹配所有的后代元素 |
|
parent > child |
子元素选择器：在给定的父元素下匹配所有的子元素 |
|
prev + next |
相邻元素选择器：匹配所有紧接在 prev 元素后的 |
|
prev ~ sibings |
之后的兄弟元素选择器：匹配 prev 元素之后的所有 |
5.3、过滤选择器
基本过滤器：
|
:first |
获取第一个元素 |
|
:last |
获取最后一个元素 |
|
:not(selector) |
去除所有与给定选择器匹配的元素 |
|
:even |
匹配所有索引值为偶数的元素，从 |
|
:odd |
匹配所有索引值为奇数的元素，从 |
|
:eq(index) |
匹配一个给定索引值的元素 |
|
:gt(index) |
匹配所有大于给定索引值的元素 |
|
:lt(index) |
匹配所有小于给定索引值的元素 |
|
:header |
匹配如 h1, h2, h3之类的标题元素 |
|
:animated |
匹配所有正在执行动画效果的元素 |
|
:focus |
触发每一个匹配元素的focus事件。 |
内容过滤器：
|
:contains(text) |
匹配包含给定文本的元素 |
|
:empty |
匹配所有不包含子元素或者文本的空元素 |
|
:has(selector) |
匹配含有子元素或者文本的元素 |
|
:parent |
匹配含有选择器所匹配的元素的元素 |
属性过滤器：
|
匹配包含给定属性的元素 |
|
|
匹配给定的属性是某个特定值的元素 |
|
|
匹配所有不含有指定的属性，或者属性不等于特定值的元素 |
|
|
匹配给定的属性是以某些值开始的元素 |
|
|
匹配给定的属性是以某些值结尾的元素 |
|
|
匹配给定的属性是以包含某些值的元素 |
|
|
复合属性选择器，需要同时满足多个条件时使用。 |
表单过滤器:
|
:input |
匹配所有 input, textarea, select 和 |
|
:text |
匹配所有文本输入框 |
|
:password |
匹配所有的密码输入框 |
|
:radio |
匹配所有的单选框 |
|
:checkbox |
匹配所有的复选框 |
|
:submit |
匹配所有提交按钮 |
|
:image |
匹配所有img标签 |
|
:reset |
匹配所有重置按钮 |
|
:button |
匹配所有input type=button |
|
:file |
匹配所有input type=file文件上传 |
|
:hidden |
匹配所有不可见元素display:none 或 |
表单对象属性过滤器：
|
:enabled |
匹配所有可用元素 |
|
:disabled |
匹配所有不可用元素 |
|
:checked |
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) |
|
:selected |
匹配所有选中的option元素 |
6、jQuery元素筛选
过滤筛选：
|
eq() |
获取给定索引的元素 |
功能跟 :eq() 一样 |
|
first() |
获取第一个元素 |
功能跟 :first 一样 |
|
last() |
获取最后一个元素 |
功能跟 :last 一样 |
|
filter(exp) |
留下匹配的元素 |
|
|
is(exp) |
判断是否匹配给定的选择器，只要有一个匹配就返回，true |
|
|
map(callback) |
将一组元素转换成其他数组（不论是否是元素数组） |
|
|
has(exp) |
返回包含有匹配选择器的元素的元素 |
功能跟 :has 一样 |
|
not(exp) |
删除匹配选择器的元素 |
功能跟 :not 一样 |
|
slice(start,[end]) |
选取一个匹配的子集 |
功能与原来的slice方法类似 |
查找筛选：
|
children(exp) |
返回匹配给定选择器的子元素 |
功能跟 parent>child一样 |
|
closest(exp) |
从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 |
|
|
find(exp) |
返回匹配给定选择器的后代元素 |
功能跟 ancestor descendant 一样 |
|
next() |
返回当前元素的下一个兄弟元素 |
功能跟 prev + next 功能一样 |
|
nextAll() |
返回当前元素后面所有的兄弟元素 |
功能跟 prev ~ siblings 功能一样 |
|
nextUntil() |
返回当前元素到指定匹配的元素为止的后面元素 |
|
|
offsetParent() |
返回第一个匹配元素用于定位的父节点。 |
|
|
parent() |
取得一个包含着所有匹配元素的唯一父元素的元素集合。 |
|
|
parents(exp) |
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素） |
|
|
prev(exp) |
返回当前元素的上一个兄弟元素 |
|
|
prevAll() |
返回当前元素前面所有的兄弟元素 |
|
|
prevUnit(exp) |
返回当前元素到指定匹配的元素为止的前面元素 |
|
|
siblings(exp) |
返回所有兄弟元素 |
|
串联筛选：
|
add(exp) |
把与表达式匹配的元素添加到jQuery对象中 |
|
andSelf() |
加入先前所选的加入当前元素中 |
|
contents() |
查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容 |
|
end() |
回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态 |
jQuery学习笔记01的更多相关文章
- JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
- JQuery 学习笔记(01)
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
随机推荐
- 使用Blazor Server 线路处理程序 (circuit handler)跟踪打开的SignalR连接
Blazor服务器允许定义线路处理程序(circuit handler)代码,该处理程序(handler)允许在更改用户线路状态时运行此代码. 线路处理程序(circuit handler)是通过从C ...
- docker 学习路线
docker 学习路线 参考资料 知乎 docker 的学习路线 Docker - 从入门到实践 Docker 核心技术与实现原理 Docker 入门 <Kubernetes in Action ...
- 解决layui表单ajax提交回调函数不起作用问题的两种方式
最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉.一个简单的登录就困扰了我很久.登录的form通过ajax提交回调函数老是不起作用.经过浪费了N多时间的调试,发现l ...
- idea创建简单web项目分析Servlet的请求转发与重定向的区别
注:如需转载,请附上原文链接,如有建议或意见,欢迎批评指正! 需求说明: // index.jsp页面 1 <% 2 String basePath = request.getScheme() ...
- Python进阶练习与爬取豆瓣T250的影片相关信息
(一)Python进阶练习 正所谓要将知识进行实践,才会真正的掌握 于是就练习了几道题:求素数,求奇数,求九九乘法表,字符串练习 import re #求素数 i=1; flag=0 while(i& ...
- django models中字段
AutoField:一个自动递增的整型字段,添加记录时它会自动增长.你通常不需要直接使用这个字段:如果你不指定主键的话,系统会自动添加一个主键字段到你的model.(参阅自动主键字段) Boolean ...
- 如何优雅的使用AbpSettings
在Abp中配置虽然使用方便,但是每个配置要先定义key,要去provider中定义,再最后使用key从ISetting中获取还是挺麻烦的一件事, 最主要是获取修改的时候,比如,修改用户配置,是从获取一 ...
- 微信小程序用setData修改数组或对象中的一个属性值,超好用，最简单的实现方法，不容错过！大神们 都 在 看 的方法！！！
在page中 data: { info: [{ name: "yuki", tou: "../img/head.jpg", zGong: 130, gMoney ...
- MySQL 【常识与进阶】
MySQL 事物 InnoDB事务原理 事务(Transaction)是数据库区别于文件系统的重要特性之一,事务会把数据库从一种一致性状态转换为另一种一致性状态. 在数据库提交时,可以确保要么所有修改 ...
- js Number方法总结
Number构造属性 Number.EPSILON // 两个可表示(representable)数之间的最小间隔. Number.MAX_SAFE_INTEGER // JavaScript 中最大 ...