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 ...
随机推荐
- elasticsearch 创建索引
一.基本概念 索引:含有相同属性的文档的集合. //可以想象成一个数据库 database 类型:索引可以定义一个或多个类型,文档必须属于一个类型. //可以想象成数据库中的表 table 文档:文档 ...
- form表单提交没有跨域问题，但ajax提交存在跨域问题
浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...
- 16 搭建Spring Data JPA的开发环境
使用Spring Data JPA,需要整合Spring与Spring Data JPA,并且需要提供JPA的服务提供者hibernate,所以需要导入spring相关坐标,hibernate坐标,数 ...
- postgreSQL外键引用查询 查询外键被那些表占用
根据一个表名,查询所有外键引用它的表,以及那些外键的列名key_column_usage(系统列信息表),pg_constraint(系统所有约束表) SELECT x.table_name, x.c ...
- 备份Oracl数据库.bat
=========================== @echo off echo ================================================ echo Win ...
- 软件基础1Word文档编辑
word文档编辑 启动Word2010 创建文档,<你好word>. 编辑文字. 保存的三种方式. ctrl+s. 点击文件选择保存,或另存为. 快速工具栏保存按钮. 设置字体 1.通过工 ...
- 简单配置Vue路由
简单配置Vue路由 1. 创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...
- Python面向对象之：三大特性：继承，封装，多态以及类的约束
前言: python面向对象的三大特性:继承,封装,多态. 1. 封装: 把很多数据封装到⼀个对象中. 把固定功能的代码封装到⼀个代码块, 函数, 对象, 打包成模块. 这都属于封装的思想. 具体的情 ...
- php 数据库 操作
header.php <?php error_reporting(0);//加上error_reporting(0);就不会弹出警告了 // header("Content-type: ...
- Java 并发同步工具(转)
转自:https://www.jianshu.com/p/e80043ac4115 在 java 1.5 中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如 CountDownLatch,Cy ...