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 ...
随机推荐
- 初窥Mybatis初始化
引言 这篇文章呢,主要是讲Mybtais的两种方式的源码剖析:传统方式以及Mapper代理方式,初次探索Mybatis源码,希望大佬勿喷并且指正错误,谢谢! 个人博客:www.fqcoder.cn 一 ...
- Simple: 一个支持中文和拼音搜索的 sqlite fts5插件
之前的工作关系,需要在手机上支持中文和拼音搜索.由于手机上存储数据一般都是用 sqlite,所以是基于 sqlite3 fts5 来实现.这段时间再次入门 c++,所以想用 c++ 实现一下,一来用于 ...
- Java Opencv 实现 中值滤波器
原理 Note 以下原理来源于Richard Szeliski 的著作 Computer Vision: Algorithms and Applications 以及 Learning OpenCV ...
- 打造你的第一个 Electron 应用
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端. ...
- 【音视频连载-001】基础学习篇- SDL 介绍以及工程配置
技术开发故事会连载 这是音视频基础学习系列的第一篇文章,主要讲解 SDL 是什么以及为什么要用到它,看似和音视频没啥卵关系,其实必不可少. SDL 简介 SDL 是 "Simple Dire ...
- [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives.
使用VScode开发vue中,v-for在Eslint的规则检查下出现报错:如下Elements in iteration expect to have ‘v-bind:key’ directives ...
- vue--基础应用 全选
1.用computed实现全选 <body> <div id="app"> <input type="checkbox" v-mo ...
- ubuntu下使用apt-get install安装软件的安装位置
在ubuntu下使用 apt-get install 或 apt install 下载安装软件,软件下载及安装后的目录.: A.下载的软件的存放位置:/var/cache/apt/archives B ...
- [译]ABP框架v2.3.0已经发布！
在新冠病毒的日子里,我们发布了ABP框架v2.3, 这篇文章将说明本次发布新增内容和过去的两周我们做了什么. 关于新冠病毒和我们的团队 关于冠状病毒的状况我们很难过.在Volosoft的团队,我们有不 ...
- 关于Resouces.resx 在WPF中{x:Static}不显示内容只显示字段的问题解决办法
问题现象:<object property="{x:Static prefix:typeName.staticMemberName}" .../> 界面中只显示资源引用 ...