jQuery

一.核心

1.查找dom

$('div')

2.将dom对象转化为jQuery对象

var a1 = document.getElementById('a');
$(a1);

3.创建元素

$(<div></div>).appendTo(a1);//追加到某个盒子底部

属性 each

$('ul li').each(function(i){
    console.log(i);
    $(this).css('background','red');
})//以每一个匹配的元素作为上下文来执行一个函数。
$('ul li').css('background','red');

属性 length

$('ul li').length//个数

方法 get()  取得其中一个元素,返回dom元素

$($('ul li').get(1)).css('background','red');

方法 index()  返回某一个元素的索引

$('ul li').each(function(){
    console.log($(this).index());
})

 二.选择器

:frist        //获取匹配的第一个元素

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

:first-child        //可以匹配多个,在每一个ul中查找第一个li

:last-child        //可以匹配多个,在每一个ul中查找最后一个li

:nth-child(n)        在每个ul中查找索引为n的li

:even        //索引为偶数

:odd        //索引为奇数

:eq()        //选中某个索引

:gt()        //大于某个索引的元素

:lt()        //小于某个索引的元素

:header        //标题元素 h1 h2 h3

:root        //返回根元素

:empty        //空元素 没有子元素的元素

:parent        //非空元素

:hidden        //隐藏元素 不可见元素

:visible        //可见元素

div:has(p)        //返回所有div中含有p元素的那个div

div[id]        //返回所有div中含有id属性的元素

[ = ]        //匹配给定的属性是某个特定值的元素

[ != ]        //不等于

[ ^= ]        //开头

[ $= ]        //结尾

[ *= ]        //包含

[id=a1][class=red]        //复合写法，复合属性选择器，需要同时满足多个条件时使用。

:input        //获取所有的input元素

:text        //获取所有input中text类型的元素

:only-child        //找到有唯一子元素的父元素

:disabled        //不可用

:enabled        //可用

:checked        //复选框 单选框 选中

:selected        //select中option选中

三.属性

attr()        //获取和设置属性

$('#a1').attr('title')//获取
$('#a1').attr('class','red');//设置
$('#a1').attr({
    class:'blue',
    title:'xiaoming'
})//设置多个

removeAttr()        //删除一个元素的某个属性

$('#a1').removeAttr('title');

prop()        //获取在匹配的元素集中的第一个元素的属性值

removeProp(name)        //用来删除由.prop()方法设置的属性集

addClass()        //追加某一个元素的类，如果已经有类，则加在它后面

$('#a1').addClass('big');

removeClass()        //删除某一个元素的类

toggleClass()        //如果不存在就添加，存在就删除

html()        //返回该元素的html内容

$('#a1').html();//返回该元素的html内容
$('#a1').html('<p>hello</p>)//将盒子里所有的元素替换掉

text()        //返回该元素中所有的文本内容

val()        //返回元素的值

四.css

        console.log($('#a1').css('color'));//获取
        $('#a1').css('color','red');//单个设置
        $('#a1').css({
            width:'200px',
            height:'200px',
            background:'red'
        })//多个设置

hide()        //隐藏元素

show()        //显示元素

offset()        //获取匹配元素当前的视口的相对偏移

position()        //获取匹配元素相对父元素的偏移

scrollTop()

height()        //获取元素的高度

width()        //获取元素的宽度

innerHeight()        //获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

outerHeight()        //获取第一个匹配元素外部高度（默认包括补白和边框）。

五.事件

one()        //为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$('#btn').one('click',function(){
    console.log(111);
}).trigger('click')

trigger()        //模拟触发某个事件(不需要操作 自动触发)

hover()        //模仿悬停 鼠标移动到一个对象上面及移出这个对象

$('#btn').hover(function(){
    $(this).addClass('red');
},function(){
    $(this).removeClass('red');
})//两个参数，一个移入，一个移出

toggle()        //如果元素显示，则隐藏，如果隐藏，则显示

$('#btn').toggle(1000);//可以传值 有动画效果 缓慢消失或出现

ready()        //绑定函数

$(document).ready(function(){});
//等价于
$(function(){})

on()        //在选择元素上绑定一个或多个事件的事件处理函数。

$('ul').on('click','li',function(e){
    console.log($(this).text());
    console.log(e.target.innerText);
    console.log($(e.target).text());
})

off()        //解除绑定

$('ul').off('click');//解除click绑定

六.文档处理

append() 末尾追加元素

$('#a1').append('<p></p>')

appendTo() 先创建后追加

$('<p></p>').appendTo('#a1')

prepend() 往前追加元素

$('#a1').prepend('<p></p>')

prependTo() 先创建再往前追加元素

$('<p></p>').prependTo('#a1')

after() 往匹配元素的后面追加兄弟元素

$('#a1').after('<p></p>)

before() 往匹配元素前面追加兄弟元素

$('#a1').before('<p></p>)

wrap() 给每个匹配元素包裹一个父标签

$('li').wrap('<ul></ul>')

unwrap() 拆除匹配元素的父标签

$('li').unwrap()

wrapAll() 将所有匹配的元素用单个标签包裹起来

$('li').wrapAll('<ul></ul>)

replaceWith() 将匹配元素替换成指定元素

$('p').replaceWith('<b>hello</b>')

empty() 清空 删除匹配的元素集合中所有的子节点

$('#a1').empty();

remove() 从dom中删除所有匹配的元素 不保留事件和数据

$('p').remove()

detach() 从dom中删除所有匹配的元素 保留事件和数据

$('p').detach()

clone() 克隆 事件不会被克隆

$('b').clone()

clione(true) 事件会被克隆

$('b').clone(true)

七.效果

show() 显示

hide() 隐藏

toggle() 显示的隐藏，隐藏的显示

slideUp() 通过高度变化（向上减小）来动态地隐藏所有匹配的元素

sildeDown()通过高度变化（向下增大）来动态地显示所有匹配的元素

fadeIn() 通过不透明度的变化来实现所有匹配元素的淡入效果

fadeOut() 通过不透明度的变化来实现所有匹配元素的淡出效果

stop() 停止所有在指定元素上正在运行的动画。

$('#btn').on('click',function(){
    $('#a1').show(1000,function(){
        $('#a1').hide(1000,function(){
            $('#a1').toggle(1000,function(){
                $('#a1').slideUp(1000,function(){
                    $('#a1').slideDown(1000,function(){
                        $('#a1').fadeOut(1000,function(){
                            $('#a1').fadeIn(1000)
        

})
})        
})
})
})
})
})

八.动画

animate

$('#a1').animate({
    left:'150px';
    bottom:'150px';
},2000).animate({})