天天看点

11--2

11--2

jquery文档就绪函数(onload、ready)、动态添加样式、三种方法和它的属性、基本筛选器、内容、可见性

文档就绪函数

$:jquery的标志

onload:加载页面中所有的内容,包含外部资源(图片、文档等等文件)

先加载页面中所有内容及外部资源,再加载js代码

ready(文档就绪函数):加载页面中的内容,不包含外部资源()

先加载页面中所有的标签内容,再加载js代码,最后加载外部资源

文档就绪函数的三种方法

文档就绪函数第一种书写格式

$(document).ready(function(){

alert("文档就绪函数第一种书写方法");

})

//文档就绪函数第二种书写方法

$().ready(function(){

alert("文档就绪函数第二种书写方法");

//文档就绪函数第三种书写方法

$(function(){

alert("文档就绪函数第三种书写方法");

属性

$("#btn1").click(function() {

//隐藏图片

$("#img1").hide(); //隐藏

$("#btn2").click(function() {

$("#img1").show(); //显示

$("#btn3").click(function() {

$("#img1").toggle(2000);//交替显示和隐藏

$("#btn4").click(function() {

$("#img1").fadeOut(1000);//淡出 --隐藏

$("#btn5").click(function() {

$("#img1").fadeIn();//淡入 ---显示

$("#btn6").click(function() {

$("#img1").fadeToggle(2000) //交替淡入淡出

$("#title").click(function(){

$("#contents").slideToggle();//下滑式交替显示和隐藏

/*动态添加样式*/

//css("css属性名","css属性值"):设置对象的css样式

//addClass("新的class名称"):添加样式对象(要添加的样式必须预先定义好再使用)

基本筛选器

:first  获取匹配的第一个元素

:not(selector)  去除所有与给定选择器匹配的元素 

:even 匹配所有索引值为偶数的元素,从 0 开始计数

:odd 匹配所有索引值为奇数的元素,从 0 开始计数

:eq(index) 匹配一个给定索引值的元素,从 0 开始计数

:gt(index) 匹配所有大于给定索引值的元素,从 0 开始计数

:lt(index) 匹配所有小于给定索引值的元素,从 0 开始计数

:lang1.9+

:last 获取匹配的最后个元素

:header 给页面内所有标题加上背景色

:animated 只有对不在执行动画效果的元素执行一个动画特效

:focus 匹配当前获取焦点的元素。

:root1.9+

:target1.9+

内容

:contains(text) 匹配包含给定文本的元素

:has(selector) 匹配含有选择器所匹配的元素的元素

:empty 查找所有不包含子元素或者文本的空元素

:parent 查找所有含有子元素或者文本的 td 元素

可见性

:hidden 查找隐藏的元素

:visible 查找所有可见的元素