入口函数

$(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('')
清空匹配元素的元素内容

jQuery基础api