前端学习日志(jquery)

1.27

$(function(){
	$("div")
})//和window.onload一样

jquery 和 js 可以共存，不能混用

jquery常用方法

 $("div").filter('.box').css("backgroundColor",'orange');//对已经获取到的元素进行过滤  家长
 $("div").not('.box').css("backgroundColor",'orange');//filter的反义词                
 $("div").has('.box').css("backgroundColor",'orange');//拥有，直接判断子节点中是否有符合条件的元素 孩子

//----------------------------------------------------------------------------------------------
$("div").prev().css("backgroundColor",'orange');//该节点的前一个兄弟结点
$("div").next().css("backgroundColor",'orange');//该节点的后一个兄弟结点
$("div").find("li").css("backgroundColor",'orange');//该节点的子节点

//-----------------------------------------------------------------------------------------------
$("div").index();//该节点在兄弟结点中的下标
$("div").eq(3).css('backgroundColor','red');//筛选出下标为3的结点

行间属性

//-----------------------------------------------------------------------------------------------
alert($("#div1").attr('id','hdiv2'));//设置和修改行间属性

calss属性

//---------------------------------------------------------------------------------------------
$("div").addClass("box1");
$("div").removeClass("box1");

width

//-----------------------------------------------------------------------------------------------
$("div").width();//width
$("div").innerWidth();//width+padding
$("div").outerWidth();//width+borer+_padding
$("div").outerWidth(true);//width+borer+padding+margin

节点操作

$(“span”)insertBefore($("div"));//找到span插入到div之前
$(“span”)insertAfter($("div"));
$(“span”)appendTo($("div"));//插在子节点的末尾
$(“span”)prependTo($("div"));//首位
$(“span”).remove();//删除
$(“div”).before("span");//div的前面是span

before after append转换，链式操作的主体会不同

事件绑定

$("div").click(function(){
            console.log('1');
        })
$("div").click(function(){
            console.log('2');
        })

可以保留所有的事件，不覆盖

 $("div").on("click mouseover",function(){});

可以并列添加
给不同的事件添加不同的函数

 $("div").on({
        click: function(){

        },
        mouseOver:function(){
            
        }
    }) 

实现事件委托

 $("ul").on("click","li",function(){});//由ul实现，第二个参数是触发对象的选择器

新增结点

 var i = 6;
        $("#btn1").click(function(){
            $(`<li>${i++ * 1111}</li>`).appendTo($("ul"));
        })

取消事件

 $("#btn1").click(function(){
            $("div").off();//取消事件上的所有函数
            $("div").off("click")//取消点击事件
            $("div").off("click",show);//取消点击事件上的show函数
        })

$(window).click(scrollTop());//s输出滚动高度

scroll resize事件

pageX pageY
clicentX clientY视窗口为距离
offset position

$("div").offset().left;//距离最左边得距离
 $("div").position().left;//相对父级得距离第一个有定位得父级margin算在内
 offsetparent()//选的是第一个有定位得父级元素
 
 

  alert($('input').val());//只取第一个符合条件的值
            $('input').val("hello world");//会对所有的元素进行赋值
            alert($("input").length);//jq独有
            alert($("input").size());//元素个数  

 $("input").each(function(index,item){

            })

1.28
jquery的特效函数

hide()//
show()//
slideUp()//
slideDown()//
fadeIn()//
fadeOut()//
fadeTo(time,persent,function)//
animate(css,time,function)//默认运动形式 慢快慢 leaner匀速 swing慢快慢
stop();//停止动画（停止第一个动画，后续动画继续运行）
stop(true)//停止所有动画
stop(true,true)//停止所有动画，并将当前正在运行的动画直接到达运行值
finish()//停止所有动画，并将所有的动画都到达目的值
delay()//延迟执行
$(div).click(function(){
                $("#iv1").stop(true).delay(2000).animate(
                    {
                        width:300
                    },2000
                ).animate({height:400},2000)
            }
            )

remove()//返回值就是我们删除的这个结点，不会返回保留的事件和行为
detach()//会保留之前的事件和行为

$("document")ready()//事件触发在当前的document加载完成以后执行 docment加载在window之前

html();
innerHtml();
text();
innerText();//纯文本

siblings();//除当前结点外的所有兄弟结点
nextAll();
preAll();
parentUntil();
nextUntil();

parent();//父节点
parents();//父节点们 参数选择器
closest();//只获取第一个符合条件的元素，参数也是选择器

wrap()
wrapAll()//整体包装
wrapInner()
unwarp()//删除上面一成包装，不包括body结点
$("span").wrap("<p style=""></p>")

clone()//只会克隆结点本身，不会克隆行为
clone(true);//都会克隆

add();//将多个选择器拼接
$("div").add("span");

slice(start,end);//

serialize() //将表单中的数据拼接成queryString name1 =  value1&name2 = value2
serialArry()//将表单数据拼接为一个数组

trrager(“play”)//触发自己的定义的事件

1.29
jquery的工具方法
既可以给jquery使用也可以该js使用
$.xxx();

$.type();//输出属性，可以有array null
$.trim();//去除前后的空格
$.inArray(30,arr);//查找第一次出现的位置 indexOf()
$.noConflict();//起别名
$.makeArray()//将类数组转化为数组 Array.from()
 

jquery的插件方法

$.extend({
	aaa:function(){
		alert("这是一个工具方法");
		}
})
$.fn.extend({
	aaa:function(){
		alert("这是一个JQ方法");
		}
})