jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

小新大人y

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量113

点赞数 1

分类专栏： jQuery 文章标签： jQuery jQuery怎么获取dom元素 jQuery筛选 jQuery事件的绑定 jQuery动画

本文链接：https://blog.csdn.net/qq_44885374/article/details/96858742

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery是什么？

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

怎么使用jQuery

和外部js文件引入一致
$为顶级变量 j Q u e r y 混写 j s j q u e r y 加载事件：$ (document).ready(function () { });
$(function () { });
jQuery(function (){ }); – 三种写法类似window.onload；

如何动态创建dom元素

		 var r = "<div></div>";
        var str = document.createElement("div");
        var s = $("<div></div>");
        s.addClass("txt");

创建的元素显示到界面

追加方法

append() appendTo()追加到当前元素的内容之后;
prepend() prependTo()追加到当前元素的内容之前；
after() before()追加到当前元素之后或之前；
insertafter() insertbefore()追加到当前元素之后或之前；
包裹方法
wrap()包裹当前匹配元素；
unwrap()移除当前匹配元素的包裹内容；
wrapAll()将所有匹配元素用一个包裹包起来；
wrapInner()用固定的标签包裹匹配元素的内容；
replacewith()用元素替换匹配元素，将所有匹配元素替换成指定的HTML或者dom元素；
raplaceAll(selector)用匹配的元素替换掉所有selector匹配到的元素，写法与replacewith相反；
empty()清空当前匹配元素的所有内容；
remove()移除元素；
clone()不写就是浅克隆默认值是false；ture是完全克隆（包含元素的事件）；

jQuery获取dom元素

$(“”)jQuery获取的dom对象都是集合型

指获取所有对象元素；$(""))
tagname获取dom元素；$(“button”)
id获取dom元素；$("#btn")
class获取dom元素；$(".btnlist")
获取dom元素；$(“body>button”)
空格获取dom元素；$(“body button”)
混合使用；$(“body>button#btn”)
获取当前元素的子元素，第一个获最后一个元素:first;:last;:first-child;last-child;例如：$(“ul>li:first”);
$(“ul>li:last”);
$(“ul>li:last-child”);
$(“ul>li:first-child”);
:not除了谁获取其他的；
:even偶数获取元素；
:add奇数获取元素；
:eq()根据所引来获取元素；
:lt();:gt()获取小于或大于；
:focus获取获得焦点的元素；
:header 获取h标签;
:has()获取当前的元素里面必须有谁；
:parent()获取的元素必须有子集，元素或文本；
属性选择器$(“li[id]”);
根据序号获取元素:checked匹配checkbox radio被选择元素（没选中就匹配不上）$(“input:checked”);
silbings()匹配该元素的所有兄弟元素；
如果还不知怎么用请看下面详解：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn" class="btnlist">按钮</button>
<button id="btn1">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li id="li4">4</li>
    <li>5</li>
    <li>6</li>
</ul>
<input type="checkbox" checked/>篮球
<script>
    /*
     * http://jquery.cuishifeng.cn/     jquery文档
     * */
    $(function () {
        //代码
        //jquery选择器  ---css1   css2  css3选择器来匹配元素
        //jquery代码获取的dom对象都是集合型
        console.log($("*"));//* 指获取所有对象元素
        console.log($("button"));//tagName获取dom元素
        console.log($("#btn"));//id获取dom元素
        console.log($(".btnlist"));//class获取dom元素
        console.log($("body>button"));//>获取dom元素
        console.log($("body button"));//空格获取dom元素

        console.log($("body>button#btn"));//混合使用
        console.log($("#btn,#btn1"));

        //获取当前元素的子元素  第一个或者最后一个元素
        console.log($("ul>li:first"));
        console.log($("ul>li:last"));
        console.log($("ul>li:last-child"));
        console.log($("ul>li:first-child"));
        //:not  除了谁  获取其他的
        console.log($("ul>li:not(#li4)"));
        //:even  偶数获取元素
        console.log($("ul>li:even"));
        //:odd  奇数获取
        console.log($("ul>li:odd"));
        //:eq  根据索引来获取元素
        console.log($("li:eq(0)"));
        //:lt   :gt   获取小于或者大于
        console.log($("li:lt(3)"));
        console.log($("li:gt(3)"));
        //:focus  获取获得焦点元素  :header 获取h标签
        //:has  获取当前的元素里面必须的有谁
        console.log($("ul:has(#li4)"));
        //:parent  获取的元素必须有子集  元素 或者文本
        console.log($("li#li4:parent"));

        //属性选择器
        console.log($("li[id][class]"));
        console.log($("li[id='li4']"));
        //:nth-child(3)  根据序号获取元素
        console.log($("ul>li:nth-child(3)"));
        //:checked  匹配checkbox  radio  被选择元素
        console.log($("input:checked"));
    });
</script>
</body>
</html>

jQuery操作dom元素的属性和方法

jQuery可以进行隐式迭代，即操作一堆。
设置元素的文本
html(),text()获取或者设置元素的文本或者HTML值，html解析标签；
获取或设置匹配元素的当前值
val();
给元素添加类
addClass();
给元素移除类名称
removeClass();
类别的切换
toggleClass()有则有，没有则加
获取或设置属性的方法
attr()参数1：名称；参数2：值；设置或获取。prop()
移除属性
removeAttr();removeprop();
一次性设置多个属性

$("input").attr({
            id: "username",
            "data-list": "list"//有符号要用""括起来
        });

设置或者获取元素的样式设置一个或者多个
css()
获取样式是必须有参数，不然会报错！

//单个设置
$("#block").css("border","1px solid black");
//多个设置
        $("#block").css({
            width: "100px",
            height: "100px",
            border: "1px solid black",
            backgroundColor: "red"
        });
//获取属性
        console.log($("#block").css("backgroundColor"));
        console.log($("#block").css("border"));

offset()获取当前元素的相对偏移量，返回值是对象（left和top）
scorllTop()当前元素相对滚动条到顶部的距离（谁有滚动条就是谁）；
scorllLeft()当前元素相对滚动调到左边的距离（谁有滚动条就谁）；
height()width()带回调函数，在旧高上重新设置，带回调函数(height,width一致)

 $("#block,#block1").height(function (index, oldheight) {
            return oldheight + (index + 1) * 100;
        });

innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
outerHeight([options])获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
outerWidth([options])获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。

jQuery筛选

jQuery里面对象的过滤
eq(index)按照所有来过滤元素
first() Last()获取当前元素里面的第一个获最后一个
hasClass()检测当前元素有没有固定的类
filter()过滤元素
map()映射,将一个集合元素转化为另一个集合元素。
has()找匹配当前元素里面谁具有这么个元素
not(selector)当前匹配元素中特定元素，获取其他的元素
slice()选取jQuery集合里面的一部分
children()获取当前元素所有子集
find()查找元素元素适配器
next()查找下一个元素
nextAll()后面所有
prev()上一个元素
prevAll()前面所有
找当前元素的父级元素：

parent()找当前元素的直接父容器；
parents()找当前元素所有的父容器；
找同胞兄弟元素的方法siblings(）找同胞兄弟元素，写参数找具体的某一个

jQuery特定的方法

$(" ", t h i s) 确定获取元素的作用域动画创建 d o m 元素$ ("< span></ span>")
dom元素渲染完成之后$(function(){ })
each集合遍历参数是索引

get(index)根据索引获取指定对象，不加参数直接获取整个集合
index()获取当前元素的索引值
扩展jQuery的方法
jQuery.fn.extend();给所有的jquery对象
jquery.extend()直接是给jquery顶级变量$或者jquery

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<button id="btn">找最小值</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(function () {
        $("button").each(function (index) {
           $(this).click(function (){
             console.log(index);
             });
        });
         console.log($("button").get(0));
        console.log($("button").index($("button:nth-child(3)")));
        /* jQuery.fn.extend({
         mySort: function () {
         $(this).each(function (index) {
         $(this).html("我在修改");
         });
         }
         });*/
        jQuery.fn.extend({
            mymin: function () {
                //找传入值里面最小的
                return $(this).map(function (index, obj) {
                    return parseInt($(this).val());
                }).get().sort(function (n1, n2) {
                    return n1 - n2;
                })[0];
            }
        });
        /* $("button").mySort();*/
        $("#btn").click(function () {
            console.log($("input").mymin());
        });
        /*
         * jQuery.extend()  直接是给jquery顶级变量  $  jQuery
         * */
        jQuery.extend({
            mylits: function () {
                console.log(1);
            }
        });
        $.mylits();
    });


</script>
</body>
</html>

jQuery事件绑定

ready()dom元素加载完成$(document).ready(function (){ //dom元素加载完成的时候去执行 });
jQuery里面的常规事件 js里面的内置事件on******
jQuery在写的时候不带on直接是函数的写法
click(data,fn)data传递给时间的数据，事件里面获取传递的数据，e.data其他事件类似于click事件绑定
在jQuery里面对象可以惊醒链式操作（写链式操作的时候尽量链式操作标准写到三次，链式操作针对同一个对象进行多次操作，链式操作针对多个对象进行多次操作）
事件都有那些：

keydown当键盘或按钮被按下时，发生 keydown 事件
keyup当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
keypress当键盘或按钮被按下时，发生 keypress 事件。
mouseover当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseenter当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
mousedown当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseleave当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
mousemove当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout当鼠标指针从元素上移开时，发生 mouseout 事件。
mouseup当在元素上放松鼠标按钮时，会发生 mouseup 事件。
resize（窗口大小发生变化）
scroll当用户滚动指定的元素时，会发生 scroll 事件。
select当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
jquery封装事件
one指定事件类型执行一次
on可以绑定一个或者多个事件（！绑定多个事件的时候怎么区分e.type）
bind事件绑定，类似on(3.0+弃用，用on代替)
事件的移除unbind(3.0+弃用，用off())unbind参数如果没有,则所有事件全部移除，有参数，移除指定事件
off可以直接移，也可以移除委托off(type,selector fn)不带参数时间全部移除，带参移除指定事件
trigger为指定元素添加触发事件和传递数据
hover事件切换，第一个时间是鼠标悬停 over；第二个时间是鼠标离开out
jquery处理事件冒泡retrun false

jquery ajax封装的是原生的ajax

get(url，data(可写)，callback，type)get方式传递数据在路径后边拼接
post(url，data(可写)，callback，type)增删改查都可以使用，安全性较高，
jQuery.getJSON(url, [data], [callback])通过 HTTP GET 请求载入 JSON 数据。（url:发送请求地址。data:待发送； Key/value 参数；callback:载入成功时回调函数。）
jQuery.getScript(url, [callback])通过 HTTP GET 请求载入并执行一个 JavaScript 文件。（url:待载入 JS 文件地址。callback:成功载入后回调函数。）
jQuery.ajax(url,[settings])通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $. p o s t 等。$ .ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax()可以不带任何参数直接使用。（url:一个用来包含发送请求的URL字符串。
settings:AJAX 请求设置。所有选项都是可选的。
async(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
dataType：预期服务器返回的数据类型。
error：(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", “error”, “notmodified” 和 “parsererror”。Ajax 事件。
success：请求成功后的回调函数。
method：请求方式）

jquery效果

-show([speed,[easing],[fn]])显示隐藏的匹配元素，（speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)；easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"；fn:在动画完成时执行的函数，每个元素执行一次。）
-hide([speed,[easing],[fn]])隐藏显示的元素

toggle([speed],[easing],[fn])如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
slideDown([speed],[easing],[fn])通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp([speed,[easing],[fn]])通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
slideToggle([speed],[easing],[fn])这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
fadeIn([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
fadeTo([[speed],opacity,[easing],[fn]])把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在运行的动画。
delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目。
finish( [queue ] )停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
queue(element,[queueName])显示或操作在匹配元素上执行的函数队列（检测有多少动画）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            width: 200px;
            height: 100px;
            background-color: black;
            font-size: 13px;
            color: #fff;
        }
    </style>
</head>
<body>
<button id="disbtn" class="showbtn">动画</button>
<button id="stopbtn">停止</button>
<div class="block">
    南方克雷登斯你发了看电视呢分开鲁大师你发了看电视呢弗兰克的少年福利看电视你发了看电视呢分开了的酸奶分开的
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(function () {
        /*$("#disbtn").click(function () {
         if ($(this).is(".showbtn")) {
         /!* $(".block").hide();*!/
         /!* $(".block").slideUp(1000);*!/
         /!*$(".block").fadeOut(5000);*!/
         $(".block").fadeTo(500, 0);
         }
         else {
         /!* $(".block").show();*!/
         /!*$(".block").slideDown(1000);*!/
         /!*$(".block").fadeIn(5000);*!/
         $(".block").fadeTo(500, 1);

         }
         $(this).toggleClass("showbtn hidebtn");
         /!*$(".block").slideToggle();*!/
         /!*$(".block").fadeToggle(1000);*!/
         });*/
        $("#disbtn").click(function () {
            $(".block").delay(1000).animate({
                marginLeft: 400,
                marginTop:400
            }, 1000, "linear", function () {
                console.log("1");
            }).delay(1000).animate({
                marginTop: 400
            }, 1000, function () {
                console.log(2);
            }).delay(1000).animate({
                marginLeft: 0
            }, 1000, function () {
                console.log(3);
            }).delay(1000).animate({
                marginTop: 0
            }, 1000, function () {
                console.log(4);
            });
        });
        $("#stopbtn").click(function () {
            $(".block").stop();
        });
    });
</script>
</body>
</html>

小新大人y

关注

1
点赞
踩
0

收藏

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

jQuery是什么？jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。怎么使用jQuery和外部js文件引入一致为顶级变量jQuery混写jsjquery加载事件：为顶级变量 jQuery 混写 js jquery ...
复制链接

扫一扫