一、基本使用
- 引包
先引入文件 - 入口函数
$(function(){});
$(document).ready(function(){}); //document可以被双引号包裹 - 事件处理
- 事件源
Js方式：document.getElementById(“id”)
jQuery方式：$(“#id”) - 事件
Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
不带on - 事件处理程序
Js 书写方式:
document.getElementById(“id”).onclick = function(){
// 语句
}
jQuery 书写方式:
$(“#id”).click(function(){
// 语句
});
- $问题
a)Js命名归法：下划线、字母、$、数字
b)但是不能以数字作为开头
jQUery的两个变量：$ 和 jQuery
jQuery占用了我们两个变量：$ 和 jQuery
入口函数：把函数作为一个参数进行传递 - 区别
Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行
jQuery的入口函数 是在 html所有标签都加载之后，就回去执行。 - 创建对象的方式
三种方式：
1.var obj = {};
2.var obj1 = new Object();
3.var obj2 = Object.create();
推荐使用第一个方式
第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。
二、基本选择器
- jq特点：隐式迭代
- $(“#demo”) id选择器
选择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”)
规律：$(selectors).css(“background”,”red”); - $(“li#b03”) 交集选择器
- Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发 - css用法：
- 获取css： ("li").csss("backgroud-color");
- 设置样式：("li").csss("backgroud-color","red");
- 设置多个样式：("li").csss({
"backgroud-color"："red",
"font-size":"10px";
}); - ("li").csss("backgroud-color",function(index,value){
return(函数 例如:(index+1)*10+"px");//（元素的索引号，样式）
});
三、其他选择器
1. 层级：
- 空格 后代选择器 选择所有的后代元素
$(“div span”). css(“background”,”red”); - .>子代选择器：子代是只所有的儿子 选择所有的子代元素
$(“div > span”). css(“background”,”red”) - .+ 紧邻选择器 选择紧挨着的下一个元素
$(“div + p”). css(“background”,”red”) - ~ 兄弟选择器 选择后面的所有的兄弟元素
$(“div ~ p”). css(“background”,”red”)
层级选择器选择了选择符 后面那个元素，比如，div > p，是选择>后面的p元素。
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”)
3. 属性选择器：
- $(“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”)
4. 筛选选择器（都是方法） - .eq()
例 $("span").eq(1).css(); - .first() 第一个元素
- .parent() 选择父元素
.parent(#id)
.parent(.class ) - .siblings() 兄弟元素（没有自己 ）
- 事件的区别
mouseover/mouseout事件，鼠标经过的时候会触发多次，每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件，鼠标经过的时候只会触发一次
hover事件：传入两个函数参数，第一个是鼠标经过，第二个是鼠标离开。 - js对象和jQ对象相互转换
js转换成jQ:
- $(document)
- var btn = document.getElementById(“btn”);
btn -> $(btn);
jQ转换成js - $(#btn)[0]
- $(#btn).get[(0)
