jQuery第一篇 (帅哥)
同学心目中的jQuery:
简单易用,功能强大,对移动端来说,体积稍大。
1.1 回顾前面学到的js我们遇到的一些痛点
- window.onload 事件有个事件覆盖的问题,我们只能写一个
- 代码容错性差
- 浏览器兼容性问题
- 书写很繁琐,代码量多
- 代码很乱,各个页面到处都是
- 动画效果,我们很难实现
1.2 jQuery解决问题
解决了我们上面遇到所有问题
1.3 jQuery的基本使用
min:它是压缩过的版本
区别:我们开发过程中,会用未压缩的版本,或者压缩的。
项目上线的时候,我们要用压缩过的版本。
版本问题:
- 1.xxx 版本 jQuery-1.11.1.js
- 2.xxx 版本 不再支持IE6、7、8
1.3.1 引包
1.要把我们的jQuery源文件拿到我们的项目里面来
2.在我们的页面中引用jQuery文件
问题:
如果遇到这种问题,那肯定是没有引用我们的jQuery源文件。
用jQuery之前,先引入jQuery,然后,再去写我们的jQuery代码。
1.3.2 入口函数
$(document).ready(function(){});
$(function(){});
1.3.3 事件处理程序
- 事件源
Js方式:document.getElementById(“id”)
jQuery方式:$(“#id”)
- 事件
Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
区别:jQuery的事件不带on
- 事件处理程序
Js 书写方式:
document.getElementById(“id”).onclick = function(){
// 语句
}
jQuery 书写方式:
$(“#id”).click(function(){
// 语句
});
1.4 jQuery详细介绍
1.4.1 $问题
a) Js命名归法:下划线、字母、$、数字
b) 但是不能以数字作为开头
var $ = “我是$符号”;
jQUery的两个变量:$ 和 jQuery
jQuery占用了我们两个变量:$ 和 jQuery
1.4.2 js入口函数跟jQuery入口函数的区别:
- Js的window.onload事件是等到所有内容,以及我们的外部图片之类的文件加载完了之后,才回去执行
- jQuery的入口函数 是在 html所有标签都加载之后,就回去执行。
1.5 Js创建对象
三种方式:
- var obj = {};
- var obj1 = new Object();
- var obj2 = Object.create();
1跟2的区别:
推荐使用第一个方式
第二种方式存在效率问题,因为要new对象,会涉及到原型查找的问题。
1.6 jQuery基本选择器
1.6.1 回顾CSS选择器
CSS选择器回顾 |
||
符号 |
说明 |
用法 |
#id |
Id选择器 |
#id{ color:red; } |
.class |
类选择器 |
.class{ //} |
Element |
标签选择器 |
P { //} |
* |
通配符选择器 |
配合其他选择器来使用 |
, |
并集选择器 |
div,p{} |
空格 |
后代选择器 |
div span{} 选择div下面所有后代的span |
> |
子代选择器 |
div > span{} |
+ |
紧邻选择器 |
div+p 选择div紧挨着的下一个p元素 |
|
1.6.2 jQuery基本选择器
基本选择器 |
||
符号 |
说明 |
用法 |
$(“#demo”) |
选择id为demo的第一个元素 |
$(“#demo”).css(“background”,”red”) |
$(“.liItem”) |
选择所有类名(样式名)为liItem的元素 |
$(“.liItem”). css(“background”,”red”); |
$(“div”) |
选择所有标签名字为div的元素 |
$(“div”). css(“background”,”red”); |
$(“*”) |
选择所有元素 少用或配合其他选择器来使用 |
$(“*”). css(“background”,”red”) |
$(“.liItem,div”) |
选择多个指定的元素,这个地方是选择出了 .liItem元素和div元素 |
$(“.liItem,div”). css(“background”,”red”) |
规律:$(selector).css(“background”,”red”);
1.7 jQuery是什么
jQuery就是javascript的一个库,把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率。
1.7.1 Javascipt跟jQuery的区别:
Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到。
1.8 jQuery其他选择器
1.8.1 层级选择器
|
||
符号 |
说明 |
用法 |
空格 |
后代选择器 选择所有的后代元素 |
$(“div span”). css(“background”,”red”); |
> |
子代选择器 选择所有的子代元素 |
$(“div > span”). css(“background”,”red”) |
+ |
紧邻选择器 选择紧挨着的下一个元素 |
$(“div + p”). css(“background”,”red”) |
~ |
兄弟选择器 选择后面的所有的兄弟元素 |
$(“div ~ p”). css(“background”,”red”) |
层级选择器选择了选择符 后面那个元素,比如,div > p,是选择>后面的p元素。
1.8.2 过滤选择器
基本过滤选择器 |
||
符号 |
说明 |
用法 |
:eq(index) |
index是从0开始的一个数字,选择序号为index的元素。选择第一个匹配的元素。 |
$(“li:eq(1)”). css(“background”,”red”) |
:gt(index) |
Index 是从0开始的一个数字,选择序号大于index的元素 |
$(“li:gt(2)”). css(“background”,”red”) |
:lt(index) |
Index是从0开始的一个数字,选择小于index 的元素 |
$(“li:lt(2)”). css(“background”,”red”) |
:odd |
选择所有序号为奇数行的元素 |
$(“li:odd”). css(“background”,”red”) |
:even |
选择所有序号为偶数的元素 |
$(“li:even”). css(“background”,”red”) |
:first |
选择匹配第一个元素 |
$(“li:first”). css(“background”,”red”) |
:last |
选择匹配的最后一个元素 |
$(“li:last”). css(“background”,”red”) |
属性选择器 |
||
符号 |
说明 |
用法 |
$(“a[href]”) |
选择所有包含href属性的元素 |
$(“a[href]”). css(“background”,”red”) |
$(“a[href=’itcast’]”) |
选择href属性值为itcast的所有a标签 |
$(“a[href=’itcast’]”). css(“background”,”red”) |
$(“a[href!=’baidu’]”) |
选择所有href属性不等baidu的所有元素,包括没有href的元素 |
$(“a[href!=’baidu’]”). css(“background”,”red”) |
$(“a[href^=’web’]”) |
选择所有以web开头的元素 |
$(“a[href^=’web’]”). css(“background”,”red”) |
$(“a[href$=’cn’]”) |
选择所有以cn结尾的元素 |
$(“a[href$=’cn’]”). css(“background”,”red”) |
$(“a[href*=’i’]”) |
选择所有包含i这个字符的元素,可以是中英文 |
$(“a[href*=’i’]”). css(“background”,”red”) |
$(“a[href][title=’我’]”) |
选择所有符合指定属性规则的元素,都符合才会被选中。 |
$(“a[href][title=’我’]”). css(“background”,”red”) |
筛选选择器参考上课讲的 11 筛选选择器.html
1.9 mouseover事件跟mouseenter事件的区别:
mouseover/mouseout事件,鼠标经过的时候会触发多次,每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件,鼠标经过的时候只会触发一次
1.10 DOM对象跟jQuery对象相互转换
jQuery对象转换成DOM对象:
方式一:$(“#btn”)[0]
方式二:$(“#btn”).get(0)
DOM对象转换成jQuery对象:
$(document) -> 把DOM对象转成了jQuery对象
var btn = document.getElementById(“bt n”);
btn -> $(btn);
1.11几个面试题:
- js对象创建的有几种方式(三种)
a) 1.var obj = {};
b) 2. var obj = new Object();
c) 3. ECMAScript5里面提供的一个方法:Object.create(参数);
- window.onload 跟jQuery的ready函数区别:
a) 参考 1.4.2
jQuery第一篇 (帅哥)的更多相关文章
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
- jquery第一篇
1 jquery是什么 <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jquery jtemplates.js模板渲染引擎的详细用法第一篇
jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...
- 空格哥的第一篇Blog
首先十分感谢博客园在这里给我的平台,我在这里学习到了很多东西,响应的,我也想要在这里记录下自己的心路历程!在学习的过程中,希望博客园一直陪伴我,小弟在这里不胜感激!这是小弟的第一篇博客,很多东西都不是 ...
- 【腾讯敏捷转型No.2】帅哥,来多少敏捷?
上回腾讯敏捷转型系列第一篇文章<敏捷到底是什么鬼?>讲到公司铁了心要推进敏捷,这是战略层面的决定,为什么呢? 当时的我们并不知道公司为什么一定要推行敏捷的新概念,但是后来公司的变化帮助我们 ...
- Three.js 第一篇:绘制一个静态的3D球体
第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
- 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- Python开发【第一篇】:目录
本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...
随机推荐
- 图解HTTP
1.返回结果的HTTP状态码 a. 2xx 成功: 200 ok 204 No Content 206 Partial Content b. 3XX重定向:301 Moved Permanently ...
- AutoCAD 2007-2012 长度统计工具
长度统计工具 下载 1 解压到磁盘 2 CAD 中输入命令 netload 3 选择文件 "CADLittleProgram.dll" 4 点击 Ps:后续会打包并支持2013-2 ...
- iOS 有TabBar的VC界面push后隐藏TabBar的方法
当一个UITabbarController管理多个UINavigationController的时候, 我们要从这每一个UINavigationController中push一个ViewControl ...
- 一些关于HTML与CSS的总结与实际应用
//学习前端也快一年了,觉得有必要好好总结一下这一年来学过的知识.一些是前辈们的精华,文章最后会讲地址一一放出,若原作者有任何介意,请及时联系我删除. 关于DOCTYPE 1.DOCTYPE的作用是什 ...
- eclipse安装hibernate-Tools
启动eclipse 选择Help -> About Eclipse 记住自己的eclipse版本 访问http://download.jboss.org/jbosstools/updates/s ...
- 【转】apache 二级域名设置完整步骤
原文链接:http://blog.sina.com.cn/s/blog_5375d76b01014fnt.html 最近在折腾网站二级域名的事情,在网上查了很多零碎的文档,不完整,有些也没有自己验证, ...
- JS /JQuery 获取变量为数字时 容易出错 可能不是数字类型
Javascript内置函数,原型为parseInt ( String s , [ int radix ] ),用于解析一个字符串,并返回一个整数. var $prod_kucun=$(this).n ...
- Salesforce注册开发者账号
在对Salesforce进行了简单的了解之后,我们现在来注册Salesforce的开发者账号,开始Salesforce的学习 一.注册前的准备 首先点击网址:https://developer.sal ...
- web应用程序
1.web应用程序和网站的区别 应用程序有两种模式C/S.B/S.C/S是客户端/服务器端程序,也就是说这类程序一般独立运行.而B/S就是浏览器端/服务器端应用程序,这类应用程序一般借助IE等浏览器来 ...
- VIPM 发布功能总结
前言 上一篇中,我们分析介绍了LabVIEW自带的安装发布功能,今天总结一下VIPM的发布功能. VIPM 提到LabVIEW,不能不提VI Package Manager (VIPM)这个工具包 ...