jQuery总结

最新推荐文章于 2022-10-24 11:31:38 发布

ZhangCong01

最新推荐文章于 2022-10-24 11:31:38 发布

阅读量228

点赞数

分类专栏： web前端文章标签： jQuery

本文链接：https://blog.csdn.net/ZhangCong01/article/details/98057856

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.jQuery是一个Javascript函数库，对JavaScript进行封装，使其变得更加简洁。引入jQuery的方法：1.在官网下载jQuery库，2.从网页中载入jQuery。基础语法：$(selector).action(),$定义jQuery，selector：查询你和查找HTML元素，action()执行对元素的操作，jQuery的函数及操作，可以在官网的API中查看

2.jQuery选择器和事件

Jquery选择器，官网从API中可以看到函数、事件、选择器
 $(document).ready(function () {//用于声明文档是否加载完成
    元素选择器
    $("button").click(function () //通过调用button的点击事件
    {
        $("p").text("p元素被修改了");//调用p元素，通过text来修改p元素的内容
    })
    id选择器,类选择器同理
    $("button").click(function () {
        $("#pid").text("我只修改p2元素");
     })
 })



Jquery事件常用方法
 $(document).ready(function () //用于声明文档是否加载完成
{
    $("button").click(function (){//点击事件
        $(this).hide();//调用本身让文字消失
    });
    $("button").dblclick(function () {//鼠标双击事件
        $(this).hide();
    })
    $("button").mouseenter(function () {//鼠标移动事件，当鼠标移动到按钮上，文字取消
        $(this).hide();
    })
    $("button").mouseleave(function () {//鼠标移开事件，当鼠标移开时，按钮消失
        $(this).hide();
    })
 });



绑定事件与解除绑定事件bind(),unbind()
$(document).ready(function (){
    $("#clickMeBtn").click(function () {//常用事件
        alert("hello");
    });
    $("#clickMeBtn").bind("click",clickHandler1)//绑定事件，可以使用on来代替bind
    $("#clickMeBtn").bind("click",clickHandler2)//绑定事件
    $("#clickMeBtn").unbind("click",clickHandler2)//解除绑定事件，都要解除只用写个click可以用off代替它，
});
function clickHandler1() {
    console.log("hello")
}
function clickHandler2() {
    console.log("hello2")
}


事件目标与冒泡
$(document).ready(function () {
    $("body").bind("click",bodyHandler)//给body做一个监听事件，也就是绑定事件，点击其内容可获得
    $("div").bind("click",divHandler);//给div加上监听事件，点击div可获得
});
function bodyHandler(event) {
    conlog(event);//不是所有浏览器都支持console
}
function divHandler(event) {
    conlog(event);
    // event.stopPropagation();//阻止父级事件冒泡
    event.stopImmediatePropagation();//阻止所有事件冒泡
}
function conlog(event) {//可以通过函数调用console来完成修改，比较容易，console一出错可以通过此注销
    console.log(event);
}


自定义事件
$(document).ready(function () {
    $("#clickMeBtn").click(function () {//常用事件,也可叫监听事件
        var e = jQuery.Event("MyEvent");//创建对象e通过jQuery.Event创建自己的事件
        $("#clickMeBtn").trigger(e);//trigger触发被选元素的指定事件类型
    });
    $("#clickMeBtn").bind("MyEvent",function (event) {//通过调用按钮，创建绑定事件，指定自定义事件MyEvent的方法
        console.log(event);
    })
});

3.jQuery HTML

HTML：

HTML捕获
<p id="pid">这是p标签<a>这是a标签</a></p>
<button id="btn1">按钮</button>
<p><input type="text" id="it" value="jikexueyuan"></p>
<p><a href="http://www.4399.com" id="aid">极客</a></p>
<button id="btn2">按钮</button>


HTML的设置
<p id="pid1">hello world </p>
<button id="btn1">按钮</button>
<p id="pid2">hello world</p>
<button id="btn2">按钮</button>
<br/>
<input type="text" id="i3" value="hello world">
<button id="btn3">按钮</button>
<br/>
<a id="aid" href="http://www.baidu.com">开始是百度后面是极客</a>
<button id="btn4">按钮</button>

<br/>
<p id="pid5">hello word</p>
<button id="btn5">按钮</button>
<br/>
<p id="pid6">hello word</p>
<button id="btn6">按钮</button>


HTML的添加
<p id="pid1">hello world</p>
<button id="btn1">按钮</button>
<p id="pid2">hello world</p>
<button id="btn2">按钮</button>
<br/>
<button id="btn3" onclick="appendText()">按钮</button>


HTML删除
<div id="div" style="height: 200px;width: 200px;border: 1px;solid: red;background-color: cornflowerblue">
    hello
    <p>hello world</p>
    <p>hello</p>
</div>

<button id="btn1">按钮</button>

JQ：

单纯的HTML捕获，将内容显示到想要显示的地方
$(document).ready(function () {
    $("#btn1").click(function () {//通过点击按钮来触发事件
        alert($("#pid").text());//通过text获取p元素的内容，他不会显示子标签，只显示其中的内容
    });
    $("#btn1").click(function () {//通过点击按钮来触发事件
        alert($("#pid").html());//通过html获取p元素的内容，他会其内的子显示标签
    });
    $("#btn1").click(function () {//通过点击按钮来触发事件
        alert($("#it").val());//大多用于input元素通过val()方法返回或设置被选元素的值
    });
    $("#btn2").click(function () {//通过点击按钮来触发事件
        alert($("#aid").attr("href"));//通过attr()获取元素集中第一个元素的属性值
    });
});



HTML设置
$(document).ready(function () {
    $("#btn1").click(function () {
        $("#pid1").text("极客学院");//通过text修改其内容
    });
    $("#btn2").click(function () {
        $("#pid2").html("<a href='http://www.jikexueyuan.com'>极客学院</a>");//通过html修改其内容,可以元素加一个标签
    });
    $("#btn3").click(function () {
        $("#i3").val("极客学院");//通过val()可以修改input输入域的内容
    });
    $("#btn4").click(function () {
        // $("#aid").attr("href","http://www.jikexueyuan.com");//通过attr()可以修改元素中属性的值，修改一个属性
        $("#aid").attr({
            "href":"http://www.jikexueyuan.com",
            "title":"hello"
        });//修改多个属性
    });
    $("#btn5").click(function () {
        $("#pid5").text(function (i,ot) {
            return "old:"+ ot + " new:这是新的内容" +(i)
        });//通过text(function(i,0t){})回调的方式，i相当于元素的下标，一般默认为0，ot：当前要修改的内容，可以不停的添加
    });
    $("#btn6").click(function () {
        $("#pi6").hide("#pid6",function () {
            alert("隐藏")
        });//通过hide("#pid"function(){})回调的方式，先隐藏内容再弹出对话框
    });
});




HTML添加元素和内容,
添加内容的方法：
prepend/append：在被选中元素之前/之后插入内容不换行
before/after：在被选中元素之前/之后插入内容，要换行
$(document).ready(function () {
    $("#btn1").click(function () {
        $("#pid1").append("插入内容");//在所选元素之后插入内容
    });
    $("#btn1").click(function () {
        $("#pid1").prepend("插入内容");//在所选元素之前插入内容
    });
    $("#btn2").click(function () {
        $("#pid2").before("插入内容");//在所选元素之前插入内容,要换行
    });
    $("#btn2").click(function () {
        $("#pid2").after("插入内容");//在所选元素之后插入内容，要换行
    });

});
添加元素的方法：HTML、JSDOM、Jquery
function appendText() {
    var text1 = "<p>iwen</p>";//在HTML中添加
    var text2 = $("<p></p>").text("ime");//在Jquery中添加
    var text3 = document.createElement("p");//在JSDOM中添加
    text3.innerHTML = "bob";
    $("body").append(text1,text2,text3);//追加标签不用加引号

}



删除元素,常用的删除方法remove:移除.   empty:空的
$(document).ready(function () {
    $("#btn1").click(function () {
        $("#div").remove();//全部删除
        $("#div").empty();//删除里面的子元素
    })
})

4.jQuery的效果

HTML：

 Jquery效果，隐藏与显示
    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏/显示</button>

    <style type="text/css">
        div{
            margin: 2px;
            background-color: fuchsia;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
<script>
    for(var i=0;i<5;i++){
        $("<div>").appendTo(document.body);//在被选元素的结尾插入HTML元素，例子：是在body中插入div元素
    }
    $("div").click(function () {
        $(this).hide(2000,function () {
            $(this).remove();//每点击一个消失后将其移除
        });//this关键字指向当前对象,隐藏每个的时间
    })
</script>


        Jquery效果淡入淡出
display: none;在此是让他的展示效果为隐藏，好实现淡出效果
    <button id="in">fadeIn</button>
    <button id="out">fadeOut</button>
    <button id="toggle">toggle</button>
    <button id="to">fadeTo</button>
    <div id="div1" style="width: 100px;height: 100px;display: none;background-color: antiquewhite"></div>
    <div id="div2" style="width: 100px;height: 100px;display: none;background-color: royalblue"></div>
    <div id="div3" style="width: 100px;height: 100px;display: none;background-color: red"></div>



    Jquery效果滑动
    <style>
        #content,#flipShow,#flipHide,#flipToggle{
            padding: 5px;
            text-align: center;
            background-color: royalblue;
            border: 1px solid rebeccapurple;
        }
        #content{
            padding: 50px;
            display: none;/*隐藏内容*/
        }
    </style>
    <div id="flipShow">出现</div>
    <div id="flipHide">隐藏</div>
    <div id="flipToggle">出现/隐藏</div>
    <div id="content">hello world</div>

    
    Jquery效果,回调
    <button id="btn">隐藏</button>
    <p>hello world hello world hello world hello world</p>

JQ：

Jquery效果隐藏与显示
$(Document).ready(function () {
    $("#hide").click(function () {
        $("p").hide(1000);//隐藏，hide中的数值为毫秒，为隐藏所用的时间
    });
    $("#show").click(function () {
        $("p").show(1000);//显示，hide中的数值为毫秒，为显示所用的时间
    });
    $("#toggle").click(function () {
        $("p").toggle(1000);//隐藏及显示为一个按钮，toggle中的数值为毫秒，为功能所用的时间
    });
});




Jquery效果淡入淡出
$(document).ready(function () {
    $("#in").on("click",function () {
        $("#div1").fadeIn(1000);//淡出到不透明所花费的时间
        $("#div2").fadeIn(1000);
        $("#div3").fadeIn(1000);
    });
        $("#out").on("click",function () {
        $("#div1").fadeOut(1000);//淡入到透明所花费的时间
        $("#div2").fadeOut(1000);
        $("#div3").fadeOut(1000);
    });
        $("#toggle").on("click",function () {
        $("#div1").fadeToggle(1000);//淡入淡出集为一体相当于开关
        $("#div2").fadeToggle(1000);
        $("#div3").fadeToggle(1000);
    });
        $("#to").on("click",function () {
        $("#div1").fadeTo(1000,1);//fadeTo()设置它的透明度，第一个参数为实现时间，第二个为透明效果0完全透明，1完全不透明
        $("#div2").fadeTo(1000,0.7);
        $("#div3").fadeTo(1000,0);
    });
});



Jquery效果，滑动
$(document).ready(function () {
    $("#flipShow").click(function () {
        $("#content").slideDown(1000);//用向下滑动动作显示匹配的元素,时间为1000毫秒
    });
    $("#flipHide").click(function () {
        $("#content").slideUp(1000);//用向上滑动动作隐藏匹配的元素
    });
    $("#flipToggle").click(function () {
        $("#content").slideToggle(1000);//用滑动动作显示或隐藏匹配的元素
    });
});


Jquery效果,回调
$(document).ready(function () {
   $("#btn").click(function () {
       // $("p").hide(1000,function () {
       //     alert("动画结束,窗口弹出,这个方法被称为回调 ")
       // });//将p元素隐藏
    $("p").css("color","red").slideUp(1000).slideDown(1000);//同时设置p的多个动画,css设置其样式,先隐藏再出现
   });
});

5.jQueryAJAX很重要，指异步操作，及在网页中执行一个操作网页不会跳转，后面给出详细方法

6.jQuery的扩展：

扩展文件：

$.myjq = function () {
    alert("hello");//直接通过$.myjq = function () {}创建函数来实现拓展
}//方式1
$.fn.myjq = function () {
    $(this).text("hello");
}//方式2

源文件：

// $(document).ready(function () {
//     // $.myjq();//直接调用所申明的函数
//     $("div").myjq();//通过div调用
// })




//noConflict方法因为可能文件中有其他函数占用了$符号，使用noConflict代替掉美元符号让美元符号不代表jQury
$.noConflict();//解除$，让他不在是jQuery的缩写
jQuery(document).ready(function () {
    jQuery("#btn").on("click",function () {
        jQuery("div").text("替换效果")
    });
})

7.jQuery Css

JQ的CSS
$(document).ready(function () {
    // $("div").css({
    //     width: "100px",height: "100px",backgroundColor: "#00ff00"
    // });//通过JQ更改css的样式
    $("div").addClass("style1")//通过引入css文件增加样式，在代码中更改能让他变为动态的
    //$("div").removeClass("style1")//移除样式
    $("div").click(function () {
        $(this).toggleClass("style");//相当于开关来回切换
    })
});

//JQ的CSS盒子
$(document).ready(function () {
    // alert($("div").height())//通过height()方法得到元素的高度
    // alert($("div").innerHeight());//得到元素高度+内边距
    // alert($("div").outerHeight());//不传参数包含内边距，元素本身，边框
    alert($("div").outerHeight(true));//传参数true包含内边距，外边距，元素本身，边框

});

8.jQuery遍历

HTML，CSS

   JQ向上及向下遍历
    <div id="div">
        <div id="div1">
            <p>
                <a>
                    hello
                </a>
            </p>
        </div>
    </div>

JQ同级遍历
    <div class="div2">
        <p>P</p>
        <h2>H2</h2>
        <h3>H3</h3>
        <h4>H4</h4>
        <h5>H5</h5>
        <h6>H6</h6>
    </div>

JQ过滤
    <div>
        <p class="p1">div1</p>
    </div>
    <div>
        <p class="p1">div2</p>
    </div>
    <div>
        <p>div3</p>
    </div>
    <div>
        <a>div4</a>
    </div>

JQ向上级向下遍历
#div{
    width: 400px;
    height: 400px;
    border: 3px solid red;
}
#div1{
    width: 300px;
    height: 300px;
    margin-top: 10px;
    margin-left: 10px;
    border:3px solid red;
}
p{
    width: 200px;
    height: 200px;
    margin-top: 10px;
    margin-left: 10px;
    border:3px solid red;
}

JQ同级遍历
.div2 *{
    display: block;
    padding: 5px;
    margin: 15px;
    border: 3px solid red;

}

JQ：

JQ遍历之向下遍历，方法children()，find()
$(document).ready(function () {
    // $("#div").children("#div1").css({border:"3px solid blue"})//children可以写参数，也可以不写参数，只能改变儿子辈
    $("#div").find("p").css({border:"3px solid blue"})//find必写参数，可以向下传递到任何辈分

})


JQ遍历之向上遍历，方法parent(),parents(),parentsUntil()
$(document).ready(function () {
    // $("a").parent().css({border:"3px solid blue"})//只能指向一层向上遍历，只能找到父级
    // $("a").parents().css({border:"3px solid blue"})//全部的向下遍历，所有的都能找到
    $("a").parentsUntil("#div").css({border:"3px solid blue"})//他是一个区间，能将两元素之间的遍历

})


JQ同级遍历，siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()
$(document).ready(function () {
    $("h4").siblings().css({border:"3px solid blue"});//不指定参数把同级除它以外的全部修改颜色，指定参数，只修改同级指定的元素
    $("h4").next("h5").css({border:"3px solid blue"});//只能指定它的下一个元素
    $("h4").nextAll("h5").css({border:"3px solid blue"});//它下面的所有元素都被修改
    $("p").nextUntil("h6").css({border:"3px solid blue"});//只能从上到下，在两个元素之间的会变化
    同理prev是从下到上，next从上到下
// });


JQ遍历之过滤，方法first(),last(),eq(),filter(),not()
$(document).ready(function () {
    $("div p").first().css("background-color","red");//first()寻找同样元素中的第一个
    $("div p").last().css("background-color","red");//last()寻找同样元素的最后一个
    $("div p").eq(0).css("background-color","red");//eq()返回当前元素指定的索引id，从0开始,0为第一个元素
    $("div p").filter("p").css("background-color","red");//filter()指定一个标准，满足就改变颜色，不满足不改变
    $("div p").not(".p1").css("background-color","red");//not()在相同元素中指定一个标准，满足就不改变颜色，其他改变颜色
})

9.jQuery菜单的实现

HTML，CSS

<!--垂直菜单栏-->
    <div>
        <ul>
            <li class="main">
                <a href="#">菜单项1</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li class="main">
                <a href="#">菜单项2</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li class="main">
                <a href="#">菜单项3</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
        </ul>
    </div>
<br/>
<br/><br/><br/><br/><br/><br/>
<!--水平菜单栏-->
    <div>
        <ul>
            <li class="main1">
                <a href="#">菜单项1</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li class="main1">
                <a href="#">菜单项2</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li class="main1">
                <a href="#">菜单项3</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
        </ul>
    </div>

ul,li{
    list-style-type: none;
}
ul{
    padding: 0px;/*去掉ul中的缩进，低版本的ie中可能还不行，要加上margin*/
    margin: 0px;
}
.main,.main1{
    background-image: url("menu_img/3.png");
    width: 100px;
    background-repeat: repeat-x;
}
li{
    background-color: gray; /*主菜单的背景图片的设置会覆盖li标签给它设置的背景颜色*/
}
a{
    text-decoration: none;
    padding-left: 20px;
    display: block;
    width: 80px;
    padding-top: 3px;
}
.main a,.main1 a{
    color: white;
    background-image: url("menu_img/1.jpg");
    background-repeat: no-repeat;
    background-position: 3px center;
}
.main li a,.main li a{
    color: black;
    background-image: none;
}
.main ul,.main1 ul{
    display: none;
}
.main1{
    float:left;
    margin-right: 1px;
}

JQ：

 // 垂直菜单实现
$(document).ready(function () {
    $(".main>a").click(function () {
        // 做出现隐藏效果，第一种方法
        var ulNode = $(this).next("ul");//找到当前函数的下一个元素“ul”，将其存储在ulNode中
        // if(ulNode.css("display")=="none")//如果ul的排列隐藏了为空
        // {
        //     ulNode.css("display","block");//通过点击让他显示
        // }else{
        //     ulNode.css("display","none");//不为空，通过点击让他为空隐藏
        // }

        // JQ中的简单方法，show(),hide()，toggle();数字，slow，fast，normal可以控制变化的时间
        // ulNode.show();//显示
        // ulNode.hide();//隐藏
        // ulNode.toggle(1000);//相当于开关显示隐藏一体
        // 滑动
        // ulNode.slideDown();//下移
        //  ulNode.slideUp();//上移
        ulNode.slideToggle();//相当于开关为一体
    })
    changeImg($(this));
})


 //水平菜单栏
 $(document).ready(function () {
     $(".main1").hover(function () {
        $(this).children("ul").slideToggle();//调用本身函数，通过children找到子函数"ul"设置效果
         changeImg($(this));

     });
 });
function changeImg(mainImg) //为了改变点击时下拉菜单的图标
{
    if(mainImg){
        if(mainImg.css("background-image").indexOf("menu_img/1.jpg")>=0)//indexOf()指定字符串在另一个字符串的位置找到返回1，没找到返回0
        {
            mainImg.css("background-image","url('menu_img/2.jpg')");
        }else{
            mainImg.css("background-image","url('menu_img/1.jpg')");
        }
    }
}

ZhangCong01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery总结

1.jQuery是一个Javascript函数库，对JavaScript进行封装，使其变得更加简洁。引入jQuery的方法：1.在官网下载jQuery库，2.从网页中载入jQuery。基础语法：$(selector).action(),$定义jQuery，selector：查询你和查找HTML元素，action()执行对元素的操作，jQuery的函数及操作，可以在官网的API中查看2.jQue...
复制链接

扫一扫