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 ...
随机推荐
- 一份简明的 Base64 原理解析
书接上回,在 记一个 Base64 有关的 Bug 一文里,我们说到了 Base64 的编解码器有不同实现,交叉使用它们可能引发的问题等等. 这一回,我们来对 Base64 这一常用编解码技术的原理一 ...
- 16 搭建Spring Data JPA的开发环境
使用Spring Data JPA,需要整合Spring与Spring Data JPA,并且需要提供JPA的服务提供者hibernate,所以需要导入spring相关坐标,hibernate坐标,数 ...
- Linux apache让网页编码错误
今天帮一个小伙伴搞作业,遇到安装discuz乱码问题,就顺便在这里写一下,以供其他同学纠正. 开apache配置文件/etc/httpd/conf/httpd.conf 查找AddDefaultCha ...
- go学习第五天、运算符
算术运算符 下表列出了所有Go语言的算术运算符.假定 A 值为 10,B 值为 20 运算符 描述 实例 + 相加 A + B 输出结果 30 - 相减 A - B 输出结果 -10 * 相乘 A * ...
- C++ 阶乘求和
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> long long reslut( ...
- Angular介绍
Angulay介绍 1.介绍:是一个用于Html和TypeScript构建客户端应用平台与框架.Angular 本身就是用 TypeScript 写成的.基本构造块是 NgModule,它为组件提供了 ...
- MySQL第三章知识第一部分
SQL的特点:是一个综合的.功能极强并且简洁容易学的语言. SQL的功能:数据查询.数据操纵.数据定义.数据控制. 数据库系统的主要功能是通过数据库支持的数据语言来实现. 菲关系模型(层次模型.网状模 ...
- 【Weiss】【第03章】练习3.8：有序多项式求幂
[练习3.8] 编写一个程序,输入一个多项式F(X),计算出(F(X))P.你程序的时间复杂度是多少? Answer: (特例:P==0时,返回1.) 如果P是偶数,那么就递归计算((F(X))P/2 ...
- SpringBoot的启动流程是怎样的？SpringBoot源码（七）
注:该源码分析对应SpringBoot版本为2.1.0.RELEASE 1 温故而知新 本篇接 SpringBoot内置的各种Starter是怎样构建的? SpringBoot源码(六) 温故而知新, ...
- settings插拔式源码
创建一个文件夹notify __init__.py import settings import importlib def send_all(content): for path_str in se ...