JQuery核心知识点精讲-优快云博客

JQuery知识点整理2

自定义动画

语法: $(selecotr).animate(styles, speed, 动画执行效果, callback)
① : 对象, 需要的样式必填
② : 动画的执行时间, 可选
③ : 动画执行效果, 可选 “swing” 摇摆式, 秋千(先慢后快) 可选 “linear” 匀速
④ : 回调函数 , 可选

$("#box1").animate({left: 800})
            .animate({top:"400px"})
            .animate({width:"300px", height:300})
            .animate({opacity: 0.1});

//重新加载 load()

$("div audio")[$(this).index()].load();

play()播放音频

$("div audio")[$(this).index()].play();

动态创建节点

 // 用jq创建了一个a标签
    var html = $("<a href='http://www.taobao.com'>百度两下</a>");
    console.log(html[0]);
    //用jq添加到盒子里 追加到盒子的子末尾
    $("#box").append(html);

    //简写
    $("#box").append($("<h1>好的</h1>"));
    $("#box").append("<h1>简写</h1>");

    //   父元素.append(子元素)
    //   子元素.appendTo(父元素)

    $("<p>一段话</p>").appendTo($("#box"));
    $("<p>两段话</p>").appendTo("#box");

    //添加到子节点的最前面
    //  父元素.prepend(子元素)
    //  子元素.prependTo(父元素)

    $("#box").prepend("<h5>法一</h5>");
    $("<h5>法二</h5>").prependTo("#box");

    //添加兄弟节点
    $("#box").before("<span>前兄弟</span>");
    $("#box").after("<span>后兄弟</span>");

清空和删除节点

清空清除div后代所有的元素 empty()

  $("div").empty();

删除删除自己以及后代所有的元素 remove()

 $("div").remove();

克隆 clone()

布尔参数: 默认是false,   为true时, 会复制事件

设置或者获取表单的值

//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();

trim();

$.trim() 函数用于去除字符串两端的空白字符。

注意： $. t r i m () 函数会移除字符串开始和末尾处的所有换行符，空格 (包括连续的空格) 和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。例如 : i f ($ ("#txt").val().trim().length == 0) return;

html方法与text方法

html() : 即innerHTML 一样. 获取当前元素所有的内容,包含标签
text() : 即innerText 一样. 获取当前元素所有的文本内容

//设置内容
$("div").html("<h3>呵呵?</h3>");  //能解析标签
//获取内容
$(“div”).html()

//设置内容
$("div").text("<h3>呵呵?</h3>");    //不能解析标签
//获取内容
$(“div”).text()

width方法与height方法

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();

获取网页的可视区宽高

//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();

注册窗口调整尺寸的事件

 $(window).resize(function () {
        console.log($(this).width());
        console.log($(this).height());
    })

scrollTop与scrollLeft

//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();

    //① window没有scrollTop**属性**
    //② 要考虑scroll兼容性, 建议写html对象
     $("html").scrollTop(0);//正确
  // $("html").animate({scrollTop: 0}, 3000);//正确
  // $("window").animate({scrollTop: 0}, 3000);//错误

注册滚动事件

   $(window).scroll(function () {
        //获取向上或者向左卷曲出去的距离
        console.log($(this).scrollTop());
        console.log($(this).scrollLeft());
    })

注册事件

1.注册简单事件 —>一次注册一个

 $("p").click(function () {
        console.log("简单")
    })

2.注册多个事件 bind() 绑定多个 —>作为了解
//第一个参数：事件类型
//第二个参数：事件处理程序

    $("p").bind({
        click: function () {
            console.log("点击")
        },
        mouseenter: function () {
            console.log("移入")
        }
    })

3.解决: 让新增的元素有事件
用委托事件 delegate(selector, type, callback)
① : 事件最终的执行者
② : 事件的类型
③ : 事件所执行的函数
注意: 祖先委托给后辈 . 委托不是自己执行

   $("body").delegate("p", "click", function () {
        console.log(this);
        console.log("让新增的元素有事件");

4. on(); 方法又可以注册简单事件, 又可以注册委托事件

$(selector).on(events[,selector][,data],handler);
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数

4.1给所有的p标签注册事件, 让新增的p标签有事件
父级.on(type,selector, callback)

    $("div").on("click", "p", function () {
        console.log("新增");
    })

4.2给自己注册事件
自己.on(type, callback)

  $("p").on("click", function () {
         console.log("自己的事件")
     })

on方法里面的data参数

 var money = 1000;
    $("div").on("click",money, function (e) {
        console.log(e.data)//打印的1000
        console.log("哈哈哈哈,发奖金啦"+ money+"元");//此时money为0
    })
    money = 0;
    $("button").on("click", function () {
        console.log("555,发奖金啦"+ money+"元")
    })

解绑事件 ----- off()

  // 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件----- trigger(“事件的类型”)

   $("button").on("click", function () {
        //触发p标签的click
        //方法1
        //$("p").click();
        //方法2
       $("p:last").trigger("click");//两种解绑方法都可以
    })

阻止事件冒泡

$(“button”).on(“click”, function (e) {
console.log(“里面的事件”);
//阻止事件冒泡
//return false;//jq可以阻止,js中不可以
e.stopPropagation();//和js中一样,可以阻止
})

阻止事件跳转

$(“a”).on(“click”, function (e) {
console.log(“我要阻止跳转”)
//阻止跳转事件
//return false;//可以阻止,同js
e.preventDefault();//可以阻止,同js
})

jq : 链式编程的特点

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
$(“div”).css(“color”, “red”).css(“background”, “pink”).width();
此时上述式子返回的是数字,是对应的值,不可继续链接下去

end();
 // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
  $("div").css("color", "red").css("background", "pink").width().end();
  在式子末尾加了end()之后,即可继续连接

jq的遍历方法 each() 函数参数①: index 参数② : 要遍历的每一个元素

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});


$("p").each(function (index, item) {
        console.log(index, item)
        //设置递减的透明度
        $(item).css("opacity", (index + 1) / 10);
    })