jq基础笔记
来源:互联网 发布:webservice返回json 编辑:程序博客网 时间:2024/05/29 15:12
同学心目中的jQuery:
简单易用,功能强大,对移动端来说,体积稍大。
1.1 回顾前面学到的js我们遇到的一些痛点
1. window.onload 事件有个事件覆盖的问题,我们只能写一个(如果页面有两个window.onload,那么第一个会被第二个覆盖)
2. 代码容错性差 (比如把onclick写成onclik也不会报错)
3. 浏览器兼容性问题(用innerText在火狐上不兼容)
4. 书写很繁琐,代码量多($(“#div1”)和document.getElement(“div1”))
5. 代码很乱,各个页面到处都是
6. 动画效果,我们很难实现 (animate(),slide(),show(30)等等)
1.2 jQuery解决问题
解决了我们上面遇到所有问题
1.3 jQuery的基本使用
min:它是压缩过的版本
区别:我们开发过程中,会用未压缩的版本,或者压缩的。
项目上线的时候,我们要用压缩过的版本。
版本问题:
1. 1.xxx 版本 jQuery-1.11.1.js
2. 2.xxx 版本 不再支持IE6、7、8
3. 3.xxx版本
1.3.1 引包
1.要把我们的jQuery源文件拿到我们的项目里面来
2.在我们的页面中引用jQuery文件
问题:
如果遇到这种问题,那肯定是没有引用我们的jQuery源文件。
用jQuery之前,先引入jQuery,然后,再去写我们的jQuery代码。
1.3.2 入口函数
$(document).ready(function(){});
$(function(){});
1.3.3 事件处理程序
1. 事件源
Js方式:document.getElementById(“id”)
jQuery方式:$(“#id”)
2. 事件
Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
区别:jQuery的事件不带on
3. 事件处理程序
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入口函数的区别:
1. Js的window.onload事件是等到所有内容,以及我们的外部图片之类的文件加载完了之后,才回去执行
2. jQuery的入口函数 是在 html所有标签都加载之后,就回去执行。
1.5 Js创建对象(3种)
三种方式:
1. var obj = {}; 推荐使用
2. var obj1 = new Object();
3. 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
选择所有序号为奇数行的元素下标为1 3 5 7
$(“li:odd”). css(“background”,”red”)
:even
选择所有序号为偶数的元素下标为0 2 4 6
$(“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’]”)
$(“a[href*=’img’]”) img必须是连在一起
如果是images是不可以的
选择所有包含i这个字符的元素,可以是中英文
$(“a[href*=’i’]”). css(“background”,”red”)
$(“a[href][title=’我’]”)
选择所有符合指定属性规则的元素,都符合才会被选中。
$(“a[href][title=’我’]”). css(“background”,”red”)
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 上午提到的两个面试题:
1. js对象创建的有几种方式(三种)
a) 1.var obj = {};
b) 2. var obj = new Object();
c) 3. ECMAScript5里面提供的一个方法:Object.create(参数);
2. window.onload 跟jQuery的ready函数区别:
- jq基础笔记
- jq基础笔记02
- jq学习使用基础笔记
- JQ基础
- jq笔记
- JQ笔记-----
- JQ 笔记
- jq笔记
- js与jq基础笔记(持续添加)
- JQ基础事件
- JQ基础学习篇
- jq ajax基础
- JQ基础---正则表达式
- JQ 学习笔记
- JQ 学习笔记2
- JQ学习笔记
- JQ笔记一张
- js、jq学习笔记
- linux查看防火墙状态及开启关闭命令
- 从数据库动态加载菜单栏
- 带翻页标志的横向滑动GridView
- PAT(basic level) 1039 到底买不买(20)
- Longest Substring Without Repeating Characters
- jq基础笔记
- 【C/C++】报错问题积累
- linux技术进阶蓝图纲要
- 关于重构的一点体会
- RT-Thread 基于STM32F1xx HAL 库的学习笔记(2)---加入pin功能支持
- sobel operator
- sudo yum upgrade nss解决java.security.KeyException错误
- 范数汇总
- mysql 数据库分库/分表/读写分离