jquery笔记

最新推荐文章于 2022-03-19 19:00:25 发布

转载最新推荐文章于 2022-03-19 19:00:25 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/316578

文章标签：

#javascript #ViewUI

本文介绍jQuery的基础使用方法，包括简化DOM操作、事件绑定与解绑、动画效果等，并深入探讨jQuery的选择器、事件处理机制及文档操作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function(){

});

这个代码在Dom结构绘制完后就马上加载
这个代码可以有多个
或者简写为

$(function(){})

Jquery选择器

$(p) 标签选择器
$(“[name=’myname’]”) 属性选择器，此处的name为标签中的name属性

jquery事件

鼠标移入移除事件
mouseenter
mouseleave
还有其他，建议用这两个

绑定事件

bind 、on 官方推荐用on

$(#id).on("click",".childclass",function(){
   //执行语句
})

on的好处是可以添加到未来元素中，
比如js或者jq动态添加一个元素–>用on也可以绑定这个事件，直接写$(“id”).click(function(){}); 可能无效

第一个参数可以添加多个事件名 用空格隔开，表示绑定多个事件

$(#id).on("click mouseenter",".childclass",function(){
   //执行语句
})

绑定事件另一种写法(键值对)

 $("#id").on({
        click: function() {},
        mouseleave: function() {}
    });

绑定事件的几点说明

//写了子元素名，给子绑定事件
  $("#parent").on("click", "#childer", function() {
        alert("childer");
    })
//不写子元素，父子一起帮定事件
    $("#parent").on("click",  function() {
        alert("parent");
    })
//$(this)，父子一起帮定事件（其实仅仅绑定了父，因为子在父中，so子也有事件）
   $("#parent").on("click", $(this), function() {
        alert("parent");
    })
//随便写一个不存在的子。那么父子都绑定失败（其实仅仅绑定了父）
     $("#parent").on("click", "#dddd", function() {
        alert("parent");
    })

父子一起绑定的 如果没有子，那么仅仅绑定了父

解绑事件

$(“id”).off(“click”)
off是解绑事件，off 如果不指定事件，则解绑所有事件。

比如

$("#myid").off("click").on("click",".childcass",function(){
});

事件名如果有多个可以用空格隔开比如

$("#myid").off("click moudeleave").on("click",".childcass",function(){
});

事件冒泡问题

    $("#parent").on("click", function() {
        alert("p");

    })

    $("#parent").on("click", "#childer", function(event) {
        event.stopPropagation();
        alert("c");

    })

冒泡—》点击子，会调用父的绑定事件
用
event.stopPropagation(); 阻止冒泡

触发器

trigger

       var _p="<div style='width:100px;height:50px;background-color:red;margin-bottom:10px'>呵呵</div>"

        $("#addp").on("click",function(){
            $(this).before(_p);
        })

        $("#trigger").on("click",function(){
            $("#addp").trigger("click","ddd");
        })

获取焦点和失去焦点

focus blur

$("#trigger").on("focus", function() {
        $(this).addClass("ad");

    });

    $("#trigger").on("blur", function() {
        $(this).removeClass("ad");

    });

键盘事件

keyup

keydown

    $("#trigger").on("keydown", function() {
        $("#addp").addClass("ad");

    });

    $("#trigger").on("keyup", function() {
        $("#addp").removeClass("ad");

    });

jq弃用事件

弃用live() on()代替
弃用die() off()代替
弃用size length 代替
弃用 toggle() 无替代

动画效果

显示隐藏
hide（） hide（）

透明效果&逐渐显示&逐渐消失
fadeTo() fadeIn() fadeOut()

    $(".fadein").click(function(){
        $("#duanlu").fadeTo(1000,0.4); ///透明化
        $("#duanlu").fadeOut();  //消失
        $("#duanlu").fadeIn(); //出现
    });