jQuery
1 - 解析HTML结构。
2 - 加载外部脚本和样式表文件。
3 - 解析并执行脚本代码。
4 - DOM树构建完成。
5 - 加载图片等外部文件。
6 - 页面加载完毕。
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
选择器
基本选择器
设置多个值的时候，用字典存储方法：
$(‘a’).css({‘属性1’:’值1’,’属性2’:’值2’})
// 1.id选择器
$('#id').css('color名称','black属性');
// 2.标签选择器
$('a').css('color','yellow')
// 3.类选择器
$('.class').css('color','red')
// 4.通配符选择器
console.log($('*').html())
层级选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 后代选择器 | $(‘标签1 p’).css(‘属性’,’值’); | 所有标签1包含的元素 |
| 子代选择器 | $(‘标签1>p’).css(‘属性’,’值’); | 标签1包含元素(子代的子代就不算了) |
| 邻居选择器 | $(‘标签1+p’).css(‘属性’,’值’); | 选择相邻的单个元素 |
| 兄弟选择器 | $(‘标签1～p’).css(‘属性’,’值’); | 选出标签1相同的元素 |
| 取第一个元素 | $(‘li:first’).css(‘属性’,’值’); | |
| 取最后个元素 | $(‘li:last’).css(‘属性’,’值’); | |
| 指定顺序元素 | $(‘li:eq(3)’).css(‘属性’,’值’); |
例子
$(function(){
//后代选择器
$('#box p').css('color','red');
//子代选择器，子元素的子元素就不算了
$('#box>p').css('color','yellow');
//邻居选择器，选择相邻的元素
$('#father+p').css('background-color','blue')
//兄弟选择器
$('#father~p').css('background-color','burlywood');
//获取第一个元素
$('li:first').css('font-size','50px');
//获取最后一个元素
$('li:last').css('font-size','50px');
//指定第几个元素
$('li:eq(3)').css('font-size','50px');
})过滤选择器
| 选择器 | 语法 |
|---|---|
| 选择奇数元素 | :odd |
| 选择偶数元素 | :even |
| 选择指定索引 | :eq(索引) |
| 从指定索引开始 | :gt(索引值) |
| 从指定索引之前 | :lt(索引值) |
例子
//获取第一个：first 最后一个：last
//奇数
$('li:odd').css('color','bisque')
//偶数
$('li:even').css('color','bisque')
//指定索引值的【最常用！！！】
$('li:eq(索引)').css('color','bisque')
//索引值从某个开始的
$('li:gt(索引值)').css('color','bisque')
//索引值之前的
$('li:lt(索引值)').css('color','bisque')属性选择器
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red');
//匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px');
//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow');
//匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red')筛选选择器【常用】！！
//获取第n个元素 数值从0开始
$('span').eq(1).css('color','red');
//查找自己的父元素
$('span').parent().css('color','red');
//.()选择所有的兄弟元素(自己同级的同类型元素)
$('.list').('li').css('color','red')
//.find()
//查找后代元素
$('div').find('span').css('color','red')JQ与 DOM模型的 相互转化
| Col1 | 获取 | 转换 |
|---|---|---|
| dom==>jquery对象 | var oDiv = document.getElementById(‘box’); | $(oDiv) |
| jquery对象==>dom | $(‘button’) | (‘button’)[0] |
| jquery对象==>dom | $(‘button’) | (‘button’).get(0) |
//dom==>jquery对象
var oDiv = document.getElementById('box');
console.log($(oDiv));
$(oDiv).click(function(){
//点击命令
})
//第一种方式 jquery ===>DOM对象
console.log($('button')[0]);
//第二种方式
console.log($('button').get(0));
var isShow = true;
$('button').get(0).onclick = function(){JQ效果
元素显示隐藏的方法特效
简单版
show(speed,callback)
后面可以带参数(延时时间，fun())
| 语法 | 意义 | 注意 |
|---|---|---|
| show | 显示 | field3 |
| hide | 隐藏 | field3 |
| toggel | 自动开关（已显示就关闭，反之） | foggel(延时时间,function(){方法}) |
//概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
//speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
//callback:在动画完成时执行的函数，每个元素执行一次
$('#btn').click(function(){
$('#box').toggle(1000,function(){
alert('改变')
});
})slide-滑动隐藏
通常用在，导航栏鼠标移动上，自动拉出信息框等等
通过高度变化，滑动出设置的元素
扫描二维码关注公众号，回复：
2556374 查看本文章
| 语法 | 意义 |
|---|---|
| slideDown | 向下滑动出显示出来 |
| slideUp | 向上滑动显示出来 |
| slideToggle | 自动滑动，同显示隐藏的toggle |
fade-透明度渐变
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
mouseover 与 mouseout 是鼠标移上与移出 可以配合使用
| 语法 | 意义 |
|---|---|
| fadeIn | 淡入效果 |
| fadeOut | 淡出效果 |
| fadeTo | 调整到指定的不透明度 例：fadeTo(时间,0.3透明度) |
| fadeToggle | 自动淡入和淡出效果 同上 |
animate 动画
移动某些元素到指定位置！ 或改变大小、属性等
| 语法 | 意义 |
|---|---|
| animate | 创建自定义动画的函数 |
| stop | 暂停正在运行的动画 |
| delay | 延时操作 delay(1000)延时1秒操作 |
//以动画形式改变 原来的大小
$('#box').animate({
width:'200px',
height:'300px'
})
//将盒子先左移动100px再等2秒后顶部移动400px
$('#box').animate({left:'100px'}).delay(2000).animate({top:"400px"});
//将盒子移动到100px，300px的位置
$('#box').animate({left:'100px',top:'300px'},2000);JQ属性
属性总类
jq属性操作分为四部分：html属性操作、dom属性操作、类样式操作、值操作
| 操作类型 | 原理 | 例如 |
|---|---|---|
| html属性操作 | 对html中属性进行读取、设置、移除 | attr()、removeAttr() |
| dom属性操作 | 对DOM元素的属性读取、设置、移除 | prop()、removeProp() |
| 类样式操作 | 对DOM属性className添加，移除 | ddClass()、removeClass()、toggleClass() |
| 值操作 | 对DOM属性value读取和设置 | html()、text()、val() |
attr( )与prop( )区别
前者对htm操作（可以直观的看到效果），后者对DOM对象操作（可以通过打印来查看效果
HTML属性操作
attr( ) 获取、赋值
设置属性值或者 返回被选元素的属性值
//获取值
// 如果有一个参数，表示获取值 对应属性的值
var id = $('选择器').attr('id') //获取选择器元素指定的 id = 多少
//设置值
$('选择器').attr('class','box') //设置选择器指定元素的class='box'
$('选择器').attr({name:'hahaha',class:'happy'}) //多个值，用字典removeAttr( ) 移除
删除一个属性
// 删除值,把name 和 class 都删除，删除多个或单个
$('选择器').removeAttr('name class') // 删多个用空格分割DOM属性操作
prop( ) 获取、赋值
获取元素集中第一个元素的属性值.它是匹配到的dom对象设置属性。
// 取第一个li元素的class值
$('li').prop('class')
// 设置值
$('li').first().prop({'name':'app','name2':'test'})removeProp( ) 移除
用来删除由.prop()方法设置的属性集
//删除值
$('li').first().removeProp('name','name2')类样式操作 (常用！)
addClass( ) 添加类
//添加类
$('span').addClass('span2 span3')removeClass( ) 移除类
//移除类
$('span').removeClass('span')toggleClass（ ） 自动添加、删除
//如果存在（不存在）就删除（添加）一个类
toggleClass('box')值属性操作
text() 取文本
//text()只获取文本
$('选择器').text()
//赋值
$('选择器').text('只是写入文本')html() 取网页内容
//html()获取所有信息，标签+文本信息
$('选择器').html()
//赋值
$('选择器').html('可以写html标签')val() 取表单值
表单中获取值，如input textarea select等等
$('选择器').val();
// 设置值
$('选择器').val('设置了表单控件中的值');input单选框、下拉框、多选框【取值与赋值】
单选框
//获取单选框被选中的value值
// 单选框类型：radio 选中状态：checked
$('input[type=radio]:checked').val()
//设置value 设置选中项
$('input[type=radio]').val(['要选择项的value值'])复选框
//复选框被选中的value获取到第一个被选中的值
console.log($('input[type=checkbox]:checked').val())
//设置value 设置选中项，复选框可以多选
$('input[type=checkbox]').val(['a','b'])下拉框
//下拉列表被选中的值
var obj = $('#name option:selected')
//设置下拉列表框的选中值，必须使用select
$('select').val(['3','2'])文本框
//文本框 设置值 和 获取值
console.log($('input[type=text]').val())JQ文档操作
插入、剪切 标签元素 【常用！】
| 效果 | 语法 |
|---|---|
| 父元素的后面添加标签 | 父元素.append(子元素) |
| 子元素 主动添加进 父元素 | 子元素.appendTo(父元素) |
| 剪切标签到指定位置 | $('粘贴地').append($('选择器，剪切标签')) |
| 插到选中的第一个位置 | $(‘ul’).prepend(‘插到ul下第一个’); |
| 同上，写法不同 | $(‘插到ul下第一个’).prependTo(‘ul’); |
| 在..之前插.. | $(‘ul’).before(‘插指定标签之前’) |
| 把..插到..前 | 子.insertBefore(父) |
| 在..之后插.. | $(‘ul’).after(‘插指定标签之后’) |
| 把..插到..后 | 子.insertAfter(父) |
//父元素.append(子元素) 追加某元素 父元素中添加新的元素
//添加标签
// 1.把 创造的标签对象直接添加
var oUl = document.createElement('li')
$('ul').append(oUl)
// 2.手动添加内容
$('ul').append('<li><a href="#">luffy</a></li>')
// 剪切添加，将其他位置的标签，添加到制定位置
$('需要添加到的标签').append($('选择器，要剪切的标签'))
//子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
//prepend 插入到被选中的元素的第一个位置
$('ul').prepend('<li>我是第一个元素</li>');
$('<li>我是第一个元素</li>').prependTo('ul');
//after before
$('ul').before('<h2>我是一个二级标题</h2>')
$('ul').after('<h3>我是一个三级标题</h3>')复制
复制内容.clone().粘贴地址
！！参数 true=完全把内部功能也clone false=只克隆表面无功能
$('复制内容').clone(true).insertAfter('粘贴到制定元素之后');
替换
| 效果 | 语法 |
|---|---|
| 匹配的元素替换成指定 | replaceWith() |
| 元素替换掉所有 匹配到的元素 | replaceAll() |
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">H</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
//replaceAll
$('<br/><hr/><button>按钮</button>').replaceAll('h4')删除 【常用！】
| 效果 | 语法 |
|---|---|
| 清空选中，本体框架还在 | empty() |
| 彻底删除选中 | remove() |
| 移除匹配的节点元素 删除节点后事件还在 | detach() |
//empty() 清空选中的 内容（子元素会被删掉）
$('ul').empty()
//remove() 彻底删掉选中
$('ul').remove()
//detach() 移除匹配的节点元素 删除节点后事件还在
var $btn = $('button').detach()JQ 通过css获取位置
| 效果 | 语法 |
|---|---|
| 匹配元素相对父元素的偏移位置 | position |
| 取元素在当前视口的相对偏移,返回对象包含两个整型属性：top 和 left | offset |
| 获取元素相对滚动条位置偏移 文档被卷起的像素值 | scrollTop、scrollLeft |
| 获取第一个匹配元素内部区域高宽（包括补白、不包括边框） | innerHeight、innerWidth |
| 元素外部高宽度（默认包括补白和边框） | outerHeight、outerWeight |
| 取得匹配元素当前计算的高宽度值 | weight、height |
筛选
- 常用！！
遍历
//query的遍历方法 .each()
//遍历ul标签下的元素, index=索引 ele=对象
$('ul').children().each(function(index,ele){})监听事件
常用事件
！！！JQ不支持事件捕获。 但支持事件冒泡
