jquary基础

什么是jQuary

简单来说，一个js库；将原生的js封装成方法，便于我们使用

jQuary的优点

减轻搽脸面膜纸

• 兼容性：好，适配所有浏览器
• 轻量级：只有几kb，体积比较小，渲染比较快
• 支持插件扩展
• 链式调用：隐式迭代
• 免费开源

jQuary对象和DOM对象

• console.dir(元素) 可以检验获取的是jQuery还是DOM

jQuary：通过jQUary获取的对象(维数组的形式)

$("div");

jQuary转化为DOM

$("div")[index索引值]
$("div").get(index索引值)

DOM：通过原生js获取的对象

document.getElementsByTagName("div");

DOM转化jQuery

$(document.getElementsByTagName("div"));

jQuary的选择器

1. 基础选择器
2. 层级选择器
3. 筛选选择器

基础选择器

类型	代码
标签名选择器	$(“div”)
类名选择器	$(".div")
ID名选择器	$("#div")
通配符选择器	$("*")
并集选择器	$(“div,span,p”)
交集选择器	$(“ul.list”)

后代选择器

类型	代码
子代选择器（亲儿子）	$(“ul>li”)
后代选择器 （子孙后代）	$(“ul li”)

筛选选择器($(元素标签:类型))

类型	代码
第一个	$(“li:first”)
最后一个	$(“li:last”)
任意一个	$(“li:eq(索引)”)
所有奇数	$(“li:odd”)
所有偶数	$(“li:even”)

jQuery筛选方法

类型	代码
父类	$(“li”).paren()
亲儿子	$(“ul”).children(“li”)
子孙后代	$(“ul”).find(“li”)
兄弟	$(“li”).sblings(“li”)
任意一个	$(“li”).eq(索引)
这个之后	$(“li”).nextAll()
这个之前	$(“li”).prevAll()

隐氏迭代

对所有的DOM元素进行便利循环，进行操作

jQuary修改css方法

• 获取属性值
  $("div").css("background")
• 设置单个属性
  $("div").css("background","red")
• 设置多个属性
  $("div").css({"background":"red","color":"blue"})