$(selector).action()

入口函数

等页面DOM加载完毕再执行JS代码

$(document).ready(function(){
$('div').hide();
})  //相当于原生中的 DOMContentLoaded

$(function(){          //简化版
$('div').hide();
})

基本使用

$是jQuery的**顶级对象** 相当于原生属性中window,把元素利用$ 包装成jQuery对象,可调用jQuery方法

原生对象与jQuery对象

用原生JS获取的对象是DOM对象

jQuery对象的本质是利用$对DOM对象包装后产生的对象是以伪数组的形式存储的

jQuery对象只能使用jQuery方法,DOM对象也只能使用JavaScript属性和方法

jQuery对象和DOM对象相互转换

1.DOM转jQuery

直接获取标签

$('')

已经用js获取过来的DOM对象

var mydiv = document.querySelector('div')

2.jQuery转DOM

$('div')[index].play index索引号play是原生的播放方法

$('div').get(index).play index索引号

jQuery选择器

基本选择器: $("选择器")

子代选择器 $("ul>li") 亲儿子选择器

后代选择器 $("ul li") 使用空格选择ul下所有li

隐式迭代

遍历内部DOM元素(伪数组形式储存)的过程

给匹配到的所有元素循环遍历,执行相应的方法

$("div").css("background","pink");

筛选选择器

1.$("ul li : first/last ").css("color,red") 一或最后

2.:eq(index) 索引号index从0开始

$("ul li:eq(2)").css("color,blue") 第三个li变为蓝色

3.选择索引号为奇数的或偶数的

$("ol li : odd(奇数)/even(偶数) ").css("color,yellow")

筛选方法

选择器.方法

parent()查找父级,亲爸爸

children()最近一级亲儿子

find()选取所有后代标签

siblings(selsctor) 查找兄弟节点不包括自己

nextAll([exper]) 前后

eq(序列号)

链式编程

节约代码量看起来更优雅

$(this).css("color","red").siblings().css("color","")

我的颜色为红色我的兄弟颜色为空

操作CSS

1.参数只写属性名,返回属性值

2.参数可以是对象形式,方便设置多组样式,属性名和属性值用:隔开,属性可以不用加引号

$("div").css({

width:400,

height:400,

backgroundColor: "pink",

})

设置类样式方法

添加类 $("div").addClass("name")

移除类 $("div").removeClass("name")

切换类 $("div").toggleCladd("name")

jQuery 效果

显示/隐藏/切换

show() 参数可省略speed速度 easing指定切换效果

fn 回调函数

上滑/下滑/切换

slideUp() slideDown() toggle()

动画效果队列

stop()

获取元素

根据ID获取

getElementById()

var element = documentById(id)

返回的是一个匹配到ID的DOM Element对象

可看jsExercise2.html
根据标签名

getElementsByTagName()

方法可以返回带有指定标签名的对向的集合

操作BOM对象

BOM:浏览器对象模型

window 代表浏览器窗口

Navigator 封装了浏览器信息

screen 屏幕

screen.width/height

location(重要):代表当前页面的URL信息 host 主机 href

protocol 协议 reload 方法

document 当前的页面信息

获取具体的文档树节点也可以获取网页的Cookie

history

代表浏览器的历史记录

JQuery