01-老马jQuery教程-jQuery入口函数及选择器
前言
这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu.com/s5508922.html
1.什么是jQuery?
1.1 jQuery介绍
jQuery是一个轻型、快速的、小巧的功能丰富的JavaScript类库。本质就是一堆js的函数的组合。对原生DOM操作做了一些非常有用的封装,可以让开发人员更简单、更方便、更统一的对DOM进行操作,比如:封装了事件相关统一操作api、DOM操作的API、Ajax、样式操作、动画的基础类库等。而且尽量屏蔽了浏览器的兼容性,而且提供了强大的可扩展性,成为了目前非常流行的前端开发框架之一。
1.2 为什么要学习jQuery
虽然前端的MVVM开发模式已经进入各个公司和各个开发人员的视野,而且也异常火爆。为什么还要学习jQuery呢?
- 很多老的项目都是jQuery开发的,所以jQuery还会运行很长时间。
- jQuery有助于刚入门的开发人员,更深入的理解原生DOM的开发方式
- jQuery库封装的的确非常经典,做一下小项目和简单的项目足够支撑
- 第三方类库太丰富!
jQuery的理念:write less,do more
1.3 jQuery相关资料
- 参考书:《锋利的jQuery》
- jQuery官网: http://jquery.com
- jQuery 在线API: http://api.jquery.com
- jQuery UI: http://jqueryui.com
- jQuery的github地址: https://github.com/jquery/jquery
1.3 关于jQuery的版本说明
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最好版本在1.7.2 以上。
下载地址:http://code.jquery.com/jquery-1.11.3.min.js2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,一般不要用,直接要么用3.x版本,兼容低版本浏览器就用1.x就行了。
下载地址:http://code.jquery.com/jquery-2.1.4.min.js3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
下载地址:http://jquery.com/download/同一版本分类
jQuery每一个版本又分为压缩版和未压缩版:- jquery.js:未压缩版本(开发版本),代码可读性高,推荐在开发和学习阶段使用,方便查看源代码。
- jquery.min.js:压缩版本,去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符,基本没有可读性,推荐在项目生产环境使用,因为文件较小,减少网络压力。
jQuery3.0多出来一个精简版(Slim)
精简版就是剔除了ajax模块和effects模块,精简版的文件比为未精简版要小很多,压缩和未压缩跟上面的区别一样。- jQuery.Slim.js:未压缩精简版
jQuery.Slim.min.js:压缩精简版
image.png
1.4 jQuery的安装
- 官网下载地址:http://jquery.com/download/
- npm方式安装
npm install jquery
- bower方式安装
bower install jquery
2.入口函数介绍
2.1window.onload事件的问题
在之前DOM课 中咱们已经说过用window的onload事件作为JS代码的入口,时机并不好。因为window.onload事件是在页面的图片、第三方脚本、样式等都下载和加载完成后才会触发。而我们希望是页面的HTML的文档树对象可进行交互就立即绑定DOM的事件和做一些初始化工作。所以之前的DOM时代的兼容代码
/**
* @description 当页面的文档树加载完成后,可以进行交互就立即触发回调函数执行
* @param {function} callback -页面加载完成后调用的回调函数
* @return {undefined} 返回undefined
*/
document.myReady = function(callback) {
// jQuery实现文档加载完成后 事件的原理。
// 封装标准浏览器和ie浏览器
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback, false);
} else if(document.attachEvent) {
// 兼容IE8及以下的浏览器。
document.attachEvent('onreadystatechange', function(){
// 当文档的状态变为:interactive表示,文档dom对象可以进行访问。
if(document.readyState == "interactive") {
callback(window.event);
}
});
} else { // 其他特殊情况
window.onload = callback;
}
};
2.2 jQuery类型引入HTML页面中
- 引入jQuery文件(注意路径)
<script src="../code/lib/jquery.js"></script>
忘记引包或者引包在入口函数的后面
2.3 jQuery对于页面加载完成入口函数的封装
jQuery内部帮我们做好了页面加载完成的封装,而且时机正是页面的文档加载完成,而不是window.onload. 而且对于页面中的iframe等子页面也做了兼容处理。直接用如下的方法进行使用:
// 第一种方式: 给document绑定ready事件。
$(document).ready(function(){
// ....此处是页面DOM加载完成的入口
});
// 第二种方式:直接给jQuery的全局函数传入一个回调函数
$(function(){
// ....此处是页面DOM加载完成的入口
});
参考代码:
<script>
// DOM
// window.onload = function() {
// var btn = document.getElementById('btn');
// btn.onclick = function(e) {
// alert(this.value);
// }
// };
window.onload = function () {
console.log('load')
}
// **** 推荐使用这种。!!
// jQuery 占用了两个全局变量, $ === jQuery // true
$(function () {
// 页面加载完成后,自动执行
console.log('ready1')
var btn = document.getElementById('btn');
btn.onclick = function (e) {
alert(this.value);
}
}); // $是一个函数对象,jQuery构造函数。
jQuery(function () {
});
// 文档加载完成后自动执行回调函数。
$(document).ready(function () {
console.log('ready2')
});
</script>
<input type="button" id="btn" value="123">
3.jQuery的选择器
3.1 dom选择的痛点
- ie8以下的浏览器不支持标准DOM的querySelector方法。强大的CSS选择器没有用武之地。
- ie8以下的浏览器仅仅支持以下搜索的方法:
document.getElementById(id)
document.getElementsByTagName(tag)
document.getElementsByName(name)
- `chideNode、nextSibling等节点操作方法也很不灵活
我们迫切希望,能用querySelector()
或者querySelectorAll()
这样的CSS选择器选择DOM元素节点的灵活方法。
jQuery的1.x版本支持ie6~8浏览器,而且还支持丰富的CSS选择器选择元素。
3.2 id选择器
id选择器就是根据标签的id获取dom的包装对象。
var $div = $('#id'); // $div 不是dom对象是jQuery的包装对象。
3.3 jQuery的包装对象和DOM对象
通过jQuery的选择器选择出来的对象都是jQuery的包装对象,里面封装了jQuery的很多API方法,后续我们会一一学习。
这里简单说一点:
jQuery包装对象本身是一个伪数组,选择器返回的所有的DOM元素都会存在jQuery的包装对象中,并且还有很多其他的jQuery特有的api。
jQuery的包装对象和DOM对象的相互转换。
- jQuery包装对象 → DOM对象
var $div = $('#id');
var domDiv = $div[0];
- DOM对象→jQuery包装对象
var domDiv = document.getElmentById('divId');
var $div = $(domDiv);
// 等同如下代码:
var $div = $('#divid');
上课源码:
<input type="button" value="按钮" id="btn">
<script>
// dom
// window.onload = function() {
// document.getElementById('btn');
// }
// jQuery
$(function(){
// 页面的文档加载完成后
var $btn = $('#btn'); // #代表id选择器。
//jQuery的构造函数:
// 第一种用法:可以接受一个回调函数,回调就是在页面加载完成后执行。
// 第二种用法:还可以接受一个css的选择器(string),返回选择器对应dom节点的jQuery包装对象。
// 我们一般给jQuery的对象加一个$.
console.dir($btn);
// jQuery包装对象(所有的选择器选择返回的对象都是jQuery的包装对象。也就是一个伪数组)
// jQuery包装对象 和dom对象相互转换。
var btn = $btn[0]; // jQuery → DOM
// dom 对象转换 jQuery
var $btn2 = $(btn); // jQuery构造函数的第三种用法: 接受一个dom对象,转成jQuery的包装对象。
console.dir($btn2)
// 转成jQuery的包装对象之后 ,就拥有了jQuery.fn上的方法api
});
</script>
3.4 其他简单选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id"); |
获取指定ID的元素 |
全选选择器 | $('*'); |
匹配所有元素 |
类选择器 | $(".class"); |
获取同一类class的元素 |
标签选择器 | $("div"); |
获取同一类标签的所有元素 |
并集选择器 | $("div,p,li"); |
使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素 |
交集选择器标签指定式选择器) | $("div.redClass"); |
注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。 |
3.5 层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $("ul>li"); |
使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $("ul li"); |
使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
3.6 过滤选择器
过滤选择器都带冒号
语法 | 用法 | 描述 |
---|---|---|
:first |
$('li:first'); |
获取第一个元素 |
:last |
$('li:last'); |
获取最后个元素 |
:contains(text) |
$("div:contains('John')") |
匹配包含给定文本的元素 |
:not(selector) |
$("input:not(:checked)") |
去除所有与给定选择器匹配的元素 |
:eq(index) |
$("li:eq(2)").css("color", "red"); |
获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd |
$("li:odd").css("color", "red"); |
获取到的li元素中,选择索引号为奇数的元素 |
:even |
$("li:even").css("color", "red"); |
获取到的li元素中,选择索引号为偶数的元素 |
- 案例:隔行变色
$(function(){
$("tr:odd").css('backgroundColor', '#eee')
$("tr:even").css('backgroundColor', '#ddd')
});
// 上课代码:
$(function(){
// 获得奇数行的tr标签
var oddTrs = $('tr:odd');
// console.dir(oddTrs);
// // DOM原始的写法,很麻烦,需要进行遍历。
// for(var i = 0; i < oddTrs.length; i++) {
// var domTr = oddTrs[i]; // 拿到dom的tr标签对象。
// domTr.style.backgroundColor = "#eee";
// }
// jQuery提供隐式迭代的用法
// jQuery设置dom的元素样式,提供了方法css('styleName', 'value')
// 如果传一个参数,代表获取,传两个参数代表设置。
oddTrs.css('backgroundColor', '#aaa');
// jQuery:如果包装对象里面元素是多个时候,做设置操作会影响包装对象中的所有dom对象。
// 但是获取值,只会返回第一个元素的值。
// 拿到所有的偶数行
$('tr:even').css('backgroundColor', '#eee');
});
上课代码:
<body>
<p>我是一个短路</p>
<div class="cd">
我是的一个div1
</div>
<div class="cd">
我是的一个div2
</div>
<div class="cd2">
我是的一个div2
laoma
</div>
<h3 tm="属性">标题标签</h3>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function(){
// 全部选择器,选择页面中所有的标签元素。
var $all = $('*');
console.dir($all);
// 类选择器
var $cd = $(".cd");
console.dir($cd);
var div1 = $cd[0];
console.log(div1.innerHTML);
// 标签选择器和并集选择器
console.dir($('div, h3'));
// 交集选择器
console.dir($('div.cd2'));
// 过滤选择器和后代选择器
console.dir($('.list li:first'));
// 包含选择器
var $div = $('div:contains("laoma")');
// 如果选择器返回的是多个元素的时候,那么返回第一个元素的内部文本
console.log($div.text());// jQuery获取选择元素的内部文本。
var domDiv = $div[0];
// var str = domDiv.textContent ? domDiv.textContent : domDiv.innerText;
console.log(domDiv.innerHTML);
});
</script>
</body>
3.7 属性选择器
用法 | 说明 |
---|---|
$("p[attr]") |
选取所有该p标签且具有attr属性的节点 |
$("p[attr=a_value]") |
选取所有p标签且具有attr属性并满足属性值为a_value的节点 |
$("p[attr^=a_value_head]") |
选取所有p标签且attr属性的属性值是以a_value_head开头的 |
$("p[attr$=a_value_end]") |
选取所有p标签且attr属性的属性值是以a_value_end结尾的 |
$("p[attr*=a_value") |
选取所有p标签且attr属性的属性值中包含a_value |
3.8 筛选方法
语法 | 用法 | 说明 |
---|---|---|
parent() |
$("#first").parent(); |
查找父亲 |
children(selector) |
$("ul").children("li") |
相当于$("ul>li") ,子类选择器 |
find(selector) |
$("ul").find("li"); |
相当于$("ul li"),后代选择器 |
siblings(selector) |
$("#first").siblings("li"); |
查找兄弟节点,不包括自己本身。 |
nextAll([expr]) |
$("div:first").nextAll() |
查找当前元素之后所有的同辈元素。 |
prevtAll([expr]) |
$("div:first").prevAll() |
查找当前元素之前所有的同辈元素 |
hasClass(class) |
$('div').hasClass("protected") |
检查当前的元素是否含有某个特定的类,如果有,则返回true。 |
eq(index) |
$("li").eq(2); |
相当于$("li:eq(2)"),index 从0开始 |
not(exp) |
$("p").not("#selected") |
删除与指定表达式匹配的元素 |
4. 互斥选择案例
<table>
<tr>
<td>用户名</td>
<td>年龄</td>
<td>联系</td>
</tr>
<tr>
<td>老马1</td>
<td>20</td>
<td>qq:515154084</td>
</tr>
<tr>
<td>弗兰德</td>
<td>23</td>
<td>332</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script>
$(function(){
// jQuery可以通过 原型上的click方法进行绑定点击事件。
// $('tr');// 选择到了所有的tr
$('tr').click(function(e){ // 存在隐式迭代。
// 点击了当前行, 那么让当前行 背景高亮,让其他的兄弟节点背景不高亮。
// jQuery的事件处理程序中。 this依然指向 绑定事件dom对象。
$(this).css('backgroundColor', '#ccc');
// 拿到多个兄弟节点,隐式迭代全部设置背景为白色。
$(this).siblings().css('backgroundColor', '#fff');
});
});
</script>
5. 综合练习
有html代码如下:
<table>
<tr>
<th><span class="pl20">编号</span></th>
<th><span class="pl120">课程名称</span></th>
<th><span>价格</span></th>
<th><span>购买/试听</span></th>
<th><span>发布时间</span></th>
<th><span>状态</span></th>
<th><span>操作</span></th>
</tr>
</table>
<div class="finance-pt">
<table cellpadding="0" class="finance-form">
<thead>
<tr>
<th colspan="2">必读数据</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#">市场热点</a>
</td>
<td>
<a href="#">微博舆情</a>
</td>
</tr>
<tr class="la">
<td>
<a href="#">A股热图</a>
</td>
<td>
<a href="#">美股热图</a>
</td>
</tr>
<tr>
<td>
<a href="#zz">环球股指</a>
</td>
<td>
<a id="md" href="#dd">实时大单</a>
</td>
</tr>
</tbody>
</table>
</div>
- 搜索样式类为:pl20的单元格。
$('.pl20');
- 搜索具有colspan属性的th标签
$('th[colspan]');
- 搜索id=md的标签
$('#md');
- 搜索.finance-form下面的所有的td标签
$('.finance-form td');
- 搜索tr.la的所有的兄弟标签
$('tr.la').siblings();
联系老马
对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码
01-老马jQuery教程-jQuery入口函数及选择器的更多相关文章
- jquery教程-Jquery 获取标签个数 size()函数用法
jquery教程-Jquery 获取标签个数 size()函数用法,size() 方法返回被 jQuery 选择器匹配的元素的数量. 语法 $(selector).size() jQuery ...
- 02-老马jQuery教程-jQuery事件处理
1. 绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉. jQuery简单绑定事件的方式,可以让我绑定多个事件处理程序跟 ...
- 06-老马jQuery教程-jQuery高级
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的.jQuery源码中对原型对象做了简写的处理.也就是说:jQuery.fn === jQuery.pro ...
- 2、jQuery的基本概念-必看-版本-入口函数- jq对象和dom对象区别
1.4. jQuery的版本 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 大版本分类: 1.x版本:能够兼容IE678浏览 ...
- jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换
JavaScript与jquery的区别 JavaScript是一门编程语言,用来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助简化javascri ...
- 第69天:jQuery入口函数
一.jQuery入口函数 1.$(document).ready(function(){}); 2.$(function(){}); 二.事件处理程序 1.事件源 Js方式:document.get ...
- jQuery总结01_jq的基本概念+选择器
jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果. 为什么要学习jQuery? [01-让div显示与设置内容.html] 使 ...
- jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、
this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload === $(document).ready(); $(“”):获取元素 标 ...
- 05-老马jQuery教程-动画
前言 jQuery的动画系统做的非常出色,而且把最常用的显示.隐藏.淡入淡出.滑动显示和折叠凳效果都做了很好的封装.跟jQuery的选择器和事件配合起来,可以实现很多很绚的效果,而且简单易用兼容性好. ...
随机推荐
- /proc/net/sockstat 里的信息是什么意思?
cat /proc/net/sockstat sockets: used 294 TCP: inuse 35 orphan 0 tw 0 alloc 45 mem 1 UDP: inuse 13 me ...
- 微信公众平台HTTPS方式调用配置免费https服务器
微信公众平台数据传输安全,提高业务安全性,公众平台将不再支持HTTP方式调用.避免影响正常使用中含有HTTP方式调用的服务,请开发者尽快调整,将现有通过HTTP方式调用的切换成HTTPS调用,平台将于 ...
- 【Algorithm】二分查找
今天在学习<编程之美>的时候,看到一个二分查找的题目,发现原来我真的不懂二分查找. 二分查找时候注意的事项: 在求二分查找的中间点时没有使用 midIndex = (minIndex + ...
- ORA-14404: partitioned table contains partitions in a different tablespace
SQL> drop tablespace nn_data including contents and datafiles; drop tablespace nn_data including ...
- 企业内知识库wiki所存在的问题
相信很多公司都利用开源的wiki web app搭建了自家的内部wiki服务,比如使用media Wiki, Gollum, doku wiki, jsWiki等 但是,真正可用的企业wiki系统却没 ...
- js 什么是深拷贝问题?
一.什么是值类型? 二.什么是引用类型? 三.使用ES Next新特性带来的 Object.assign 方法 和 扩展运算符: 四.Object.assign 方法 和 扩展运算符的 “深入浅出” ...
- JavaScript 循环:如何处理 async/await
如何串行或者并行运行异步循环? 在使用循环处理异步的魔法之前,我们先来看下我们是怎么处理同步循环的. 同步循环 很久以前我写的循环是这样的: for (var i = 0; i < array. ...
- MySql(十五):MySql架构设计——可扩展性设计之 Cache 与 Search 的利用
前言 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为宽广的发散开来.这一章,我们就将跳出完全依靠数据库自身来改善扩 ...
- Linux应用server搭建手冊—Weblogic服务域的创建与部署
前一篇谈到了Weblogic的安装,接下来整理weblogic服务域的创建及项目的部署 一.webLogic服务域创建 使用root用户登录后使用命令:#su W ...
- 【Unity】7.4 游戏外设输入
分类:Unity.C#.VS2015 创建日期:2016-04-21 一.简介 Unity可以处理摇杆.游戏手柄.方向盘等标准游戏外设的输入,使用的方法如下图所示: 虚拟按键需要在输入管理器中配置,把 ...