2.13jquery练习

jquery选择器

console.log($("*"));//获取所有元素
console.log($(".btn"));
console.log($("ul.tel>li"));//层次选择器
console.log($("ul.tel li"))//和上面那个一样
console.log($(".li2+li"));//+代表下一个li
console.log($(".li2~li"));//获取当前匹配元素之后的所有
console.log($("ul.menu>li:first"));
console.log($(":header"))//获取所有的h标签
console.log($("input:focus"));//获取获得焦点的元素
console.log($(":root"));//直接获取html
console.log($("button:visible"));//根据元素的显示隐藏来匹配元素
console.log($("button:hidden"));

jquery 获取的时候一定要注意元素的初始化

设置宽高问题

   // console.log($("#box").width());
       // console.log($("#box").height());
        //$("#box").height("300px");//设置宽高值时不加双引号情况下不带px，加双引号带不带px都可以
$("#box").height(function(index,old){
console.log(index,old);
    return 300;
});

获取出来的宽高都是不带像素单位的，但是如果设置宽高的话，不加双引号情况下不加px，加双引则可加可不加，回调函数旧值为宽和高原来的值 index
为索引

console.log($("#box").innerHeight());
console.log($("#box").outerHeight());
console.log($("#box").outerHeight(true));

区别：innerHeight包含padding不包含boder
outerHeight包含padding和boder
当outerHeight（）设置为true时获取的是整体宽高包括margin部分

事件

/ $(".btn").on("click",function(){
// console.log("点击事件");

var stu=[{"name":"小明","age":"18","sex":"男"},
// {"name":"小华","age":"17","sex":"女"}
// ]
// $(".btn").on("click",stu,function(e){
//     console.log(e.data);
//     for(var i = 0;i<e.data.length;i++){
//         console.log(e.data[i].name,e.data[i].age,e.data[i].sex);
//     }
// });

on(eve,[sel],[data],fn) fn执行事件调用的函数， 数据data，对象类型的数据 或者说是json类型的数据 类型即是数组型也是对象型、
事件执行之后怎样获取data，执行力事件传递的数据在e(事件的执行对象)，用json集合获取单个值

$(".btn").on("click mouseenter mouseleave",hande);
function hande(e){
    if(e.type == "click"){
        console.log("点击");
        console.log($(this));
        $(this).off("mouseleave");
    }
else if(e.type == "mouseenter"){
    console.log("进入");
}
else{console.log("离开");}
};
//$(".btn").off();

on绑定事件，off移除事件，当绑定多个事件时用空格隔开，使用参数e区分事件，例如事件类型e.type;off不写任何参数表示移除所有事件，写一个事件移除单个事件
bind绑定 unbind移除 与on和off一样

   $("ul").on("click", ".box", handlelist);
function handlelist(){
    console.log("ul的单击事件委托给第二个li来执行");
}

on 和 off 中的参数 sel （选择器）
委托 父元素将自身的事件委托给子元素来执行
selector 是一个选择器字符串 $(".box") 直接写 “.box”

内部插入

//$(".box").append($(".small"))
// $(".box").append(function(index,html){
//     console.log(index,html);
//     return $(".small")
// });
$(".small").appendTo($(".box"))；

append 和appendTo都是追加到当前内容之后，主要区别在于：两个方法 前后位置颠倒

/$(".box").prepend($(".small"));
$(".box").prepend(function(index,html){
    console.log(index,html)
    return $(".small")
});
// $(".small").prependTo($(".box"));

prepend和prependTo都是追加到当前内容之前，却别在于前后位置颠倒。
jquery里面如何创建dom元素

var ele = $("<div class='child'></div>");       
        $(".box").append(ele);
    });

外部插入

 //  $(".child2").after($(".small"));
   
    // $(".child2").after(function(){
    /ins/     return $(".small");
    // });
    $(".child2").before($(".small"));
});
    </script>

after将外部元素插入到另一个元素之后，before插入到另一个元素z之前；
insertAfter和after前后顺序颠倒，insertBefore和before前后顺序颠倒

时间处理

/     var str=10;
// $(".btn").one("click",str,function(e){
//     console.log(e.data);
//     console.log("单机一次");
// });
$("input").trigger("focus");

one触发一次事件 trigger自动触发事件

$("input").on("uselick",function(){
    $(this).css({
        border:"red solid 1px "
    });
}).trigger("uselick");

也可以写自定义事件，也可以自动触发
注意：触发选择事件触发两次，默认trigger触发一次，自动选择又触发一次；
hover 事件切换：

$(".block").hover(function (){
            //over
            console.log("鼠标悬停");
        },function (){
            //out
            console.log("鼠标离开");
        });

jquery封装事件方法和js差不多，jquery不加on
/blur([[data],fn])
//change([[data],fn])
//click([[data],fn])
//dblclick([[data],fn])
//error([[data],fn])1.8-
//focus([[data],fn])
//focusin([data],fn)
//focusout([data],fn)
//keydown([[data],fn])
//keypress([[data],fn])
//keyup([[data],fn])
//mousedown([[data],fn])
//mouseenter([[data],fn])
//mouseleave([[data],fn])
//mousemove([[data],fn])
//mouseout([[data],fn])
//mouseover([[data],fn])
//mouseup([[data],fn])
//resize([[data],fn])
//scroll([[data],fn])
//select([[data],fn])
//submit([[data],fn])

        //浏览器窗口变化事件
        $(window).resize(function (){
            console.log(1);
         })

这个指得是浏览器缩放会影响

事件执行参数

$(".btn").click(function(e){
console.log(e);
});

//eve.currentTarget //当前点击的目标元素
//eve.data //事件传递的数据
//eve.delegateTarget1.7+ //在事件委托中 获取委托的元素
//eve.isDefaultPrevented() //返回值true/false 是否使用过preventDefault
//eve.isImmediatePropag…()
//eve.isPropagationStopped() //返回值true/false 是否使用过stopPropagation
//eve.namespace
//eve.pageX
//eve.pageY
//eve.preventDefault() 阻止事件的默认行为
//eve.relatedTarget
//eve.result
//eve.stopImmediatePro…()
//eve.stopPropagation() 阻止事件冒泡
//eve.target 执行事件的目标元素
//eve.timeStamp 执行的事件 ms
//eve.type 类型
//eve.which 键盘上的ascii值 1 是 鼠标

 $("ul").on("click",".box",function (e){
           
            console.log(e.delegateTarget);
        });

将ul委托给了子元素.box

事件冒泡处理

$("div").click(function(e){
     console.log(1);
     e.stopPropagation();
     console.log(e.isPropagationStopped());
    return false;
});

用e.stopPropagation()阻止事件冒泡 e.isPropagationStopped返回值是true还是false 取决于是否使用过stopPropagation

文本处理-包裹元素

//$(".child1").wrap("<div class='child2'></div>");
        $(".child1").wrap(function (index){
            console.log(index);
            return "<div class='child2'></div>"
        });

wrap 用一个元素把另一个元素包裹起来

$(".box").unwrap();

unwrap 移除包裹，注意移除的是他的父元素
wrap 是一对一包裹，wrapAll是将匹配的元素全部包裹起来
wrapInner 将元素的内容包裹起来

元素替换

var ipt= $("<input type='text' class='price'/>");
//ipt.val($(".price").html());
$("div").replaceWith(ipt);

repalacewith后替换前
replaceAll 前替换后
####### 元素复制删除

$(".box2").appendTo($(".box1"))
//$(".box2").clone(true).appendTo($(".box1"));

clone 参数 true(深度克隆 克隆dom元素以外 事件 之类) false(浅克隆 只是克隆了dom元素)

$("ul").empty();

empty 删除匹配元素所有的子节点

$("ul>li").remove();

remove 移除当前的匹配元素

$(".box").detach();
        console.log($(".box").html());//undefined
        console.log($(".box"));
        console.log($("ul"));

detach 删除元素之后 , jquery 对象里面的没有删除 , 只是界面没有了 , 数据和事件之类的还在。这个方法在使用的时候不能直接用匹配元素删除 得按照父元素找子元素的方式删除 这样的话 jquery对象里面的删除元素还在

jquery属性操作

        /*属性
         attr(name|pro|key,val|fn)
         removeAttr(name)
         prop(n|p|k,v|fn)
         removeProp(name)
         CSS 类
         addClass(class|fn)
         removeClass([class|fn])
         toggleClass(class|fn[,sw])
         HTML代码/文本/值
         html([val|fn])
         text([val|fn])
         val([val|fn|arr])*/

attr获取单个属性 可以设置多个属性

console.log($("input[type=text]").attr("value"));
$("input:text").attr({
                value: "你好",
                type: "button"
            });

prop能设置自定义属性， 但是 不显示
data 设置自定义属性 data设置的自定义属性不显示 类似prop
removeAttr 可以移除自带的属性 也可以移除自定义属性，移除的是属性
removeProp() 移除的是属性值 但属性还在 编译器里面没有修改
addClass(class|fn) 添加类
removeClass([class|fn]) 移除类
toggleClass(class|fn[,sw]) 切换类

 $("input").addClass("txt").addClass("btn");
            $("input").addClass("txt btn file");

一次可以添加多个类 中间使用空格隔开

$("input").removeClass("txt file");
$("input").removeClass();

移除里面不写参数 指的全部移除

$("input").toggleClass("menu");

类别切换 你有这个类我删除 没有这个类添加