入口函数
$(function(){
...//此处是页面DOM加载完成的入口
})
等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成
Dom对象和jQuery转换
- Dom对象转换为jQuery对象：
- $('div')
- jQuery对象转换为Dom对象
- $('div')[index]
- $('div').get(index)
选择器
基础选择器
| 名称 | 用法 | 描述 | ID选择器 | $('#id') | 获取指定ID元素 | 全选选择器 | $('#') | 匹配所有元素 | 类选择器 | $('.class') | 获取同一类class元素 | 标签选择器 | $('div') | 获取同一类标签的所有元素 | 并集选择器 | $('div,p,li') | 选取多个元素 | 交集选择器 | $('li.current') | 交集选择 |
|---|
层级选择器
| 名称 | 用法 | 描述 | 子代选择器 | $('ul>li') | 使用>号，获取亲儿子层级的元素；注意并不会获取孙子层级的元素 | 后代选择器 | $('ul li') | 使用空格，代表后代选择器，获取ul下所有li元素，包括孙子等 |
|---|
筛选选择器
| 名称 | 用法 | 描述 | :first | $('li:first') | 获取第一个li元素 | :last | $('li:last') | 获取最后一个li元素 | :eq(index) | $('li:eq(2)') | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 | :odd | $('li:odd) | 获取到的li元素中，选择索引号为奇数的元素 | :even | $('li:odd) | 获取到的li元素中，选择索引号为奇数的元素 |
|---|
筛选方法（重点）
| 名称 | 用法 | 描述 | parent() | $('li').parent() | 查找父级 | children(selector) | $('ul').children('li') | 相当于$('ul>li'),最近一级（亲儿子） | find(selector) | $('ul').find('li') | 相当于$('ul li'),后代选择器 | siblings(selector) | $('.first').siblings('li') | 查找兄弟节点，不包括自己本身 | nextAll([expr]) | $('.first').nextAll() | 查当前元素之后所有的同辈元素 | prevtAll | $('.last').prevAll() | 查找当前元素之前所有的同辈元素 | hasClass(class) | $('div').hasClass('protected') | 检查当前的元素是否含有某个特定的类，如果有，则返回true | eq(index) | $('li').eq(2) | 相当于$('li:eq(2)'),index从0开始 |
|---|
重点记住：parent（） children（） find（） siblings（） eq（）
jQuery排他思想 + 链式编程
<button>快速<button>
<button>快速<button>
<button>快速<button>
<script>
$(function(){
//1.隐式迭代 给所有的按钮都绑定了点击事件
$('button').click(function(){
//2.当前的元素变化背景颜色
$(this).css('background','pink')
//3.其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings('button').css('background','')
})
})
<script>
<script>
$(function(){
$('button').click(function(){
$(this).css('background','pink').siblings('button').css('background','')
}) //链式编程
})
<script>
jQuery样式修改
css方法
- 参数只写属性名，则是返回属性值
- $(this).css('color')
- 参数式属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
- $(this).css('color','red')
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
- $(this).css({'color':'white','font-size':'20px'})
设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
- 添加类
- $('div').addClass('current')
- 移除类
- $('div').removeClass('current')
- 切换类
- $('div').toggleClass('current')
jQuery属性操作
设置或获取元素固有的属性值prop()
所谓元素固有属性就是元素本身自带的属性，比如< a >元素里面的href，< input >元素里面的type
- 获取属性语法
- prop('属性')
- 设置属性语法
- prop('属性'，'属性值')
设置或获取自定义属性值attr()
用户自己给元素添加的属性。比如div添加 index='1'
- 获取属性语法
- attr('属性') //类似原生getAttribute()
- 设置属性语法
- att('属性','属性值') //类似原生setAttribute()
- 也可以获取H5自定义属性data-x
数据缓存data()
data()可以在指定元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除
- 附加数据语法
- data('name','value') //向被选元素附加数据
- 获取数据语法
- data('name') //向被选元素获取数据
//这个方法可以获取data-index h5自定义属性 不用写data-，返回的是数字型
$('div').data('index')
表单内容操作
- 普通元素内容html() （相当于原生innerHTML）
- html() //获取元素的内容
- html('内容') //设置元素的内容
- 普通元素文本内容text() (相当于原生innerText)
- text() //获取元素的文本内容
- text('文本内容') //设置元素的文本内容
- 表单的值 val() (相当于原生value)
jQuery元素操作
遍历元素
语法一
$('div').each( function( index , domEle ) {xxx} )
- each()方法遍历匹配的每一个元素。主要用DOM处理
- 里面的回调函数有2个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象
- 所以想要使用jquery方法，需要给这个dom元素转换成jquery对象
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(()=>{
//$('div').css('color','red')
//如果针对同一类元素做不同动作，需要用到遍历元素（类似for，但比for更强大）
//each()方法遍历
let arr=['red','green','blue']
$('div').each((i,domEle)=>{
//回调函数第一个参数一定是索引号 可以自己指定索引号名称
console.log(i)
//回调函数第二个参数一定是dom元素对象
console.log(domEle)
//domEle.css('color');dom对象没有css方法
$(domEle).css('color',arr[i])
})
})
<script>
</body>
语法二
$.each( object , function( index , element {xxx}))
- $.each()方法可以用于遍历任何对象。主要用于数据处理，比如数组，对象
- 里面的函数有2个参数：index是每个元素的索引号;element遍历内容
$.each({
name:'ggbondfucker',
age:18
},function(i,ele){
console.log(i);//输出的是name age属性名
console.log(ele);//输出的是ggbondfucker 18属性值
})
创建元素
$('< li ></ li >')
添加元素
- 内部添加
element.append('内容')
- 把内容放入匹配元素内部的最后面，类似原生appendChild
element.prepend('内容')
- 把内容放如匹配元素内部的最前面
- 外部添加
element.after('内容')
- 把内容放入目标元素后面
element.before('内容')
- 把内容放入目标元素前面
内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，它们是兄弟关系
删除元素
element.remove()
- 删除匹配的元素（本身）
element.empty()
- 删除匹配的元素集合中所有的子节点
element.html('')
- 清空匹配元素的元素内容
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！