Web复习-4: jQuery

最新推荐文章于 2023-09-08 22:13:52 发布
最新推荐文章于 2023-09-08 22:13:52 发布
阅读量143 收藏
点赞数
分类专栏： JavaWeb 文章标签： js jquery dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44955356/article/details/116667098
版权

本节目录

好处：

  1. 简化遍历文档
  2. 操作DOM
  3. 简化处理事件
  4. 简化处理动画
  5. 开发Ajax
  6. 链式操作
  7. 隐式迭代

HelloWorld!

$(): 调用 $方法, 核心函数

为$()传入一个function(){}做参数, 相当于使用windown.οnlοad=function(){代码}

//需要注意jquery的引入, /开头必须是绝对路径
$(function () {
    //$()查找元素
    //使用.click来绑定点击响应函数, 作为click的参数传入即可
    $("#btn01").click(function () {
    alert("Hello");
    })
})

核心函数的本质就是一个方法, 如果使用

alert($);

我们可以看到:

在这里插入图片描述

核心函数的使用

  1. 传入参数为函数时, 文档加载完成后执行此方法

    $(function(){})// 相当于window.onload = function(){}

  2. 传入参数为HTML字符串时, 根据字符串创建元素节点对象

    $("<div>html</div")

  3. 传入参数为选择器字符串时, 根据选择器查找除元素节点对象

    $("#id")

  4. 传入参数为dom对象时, 将dom对象包装为jQuery对象并返回

    $(this)

DOM对象和jQuery对象

Dom对象: 使用原生的js查找或创建的元素

jQuery对象: 使用jQuery查找(包装了的)或创建的元素

dom和jq对象不能操作别个的方法, 所以必要的时候需要互相转换

  1. 由dom对象转化为jQuery对象:

    使用$进行包装即可;

  2. 由jquery对象转化为DOM对象:

    jquery对象是由DOM对象组成的数组, 尽管可能只有一个元素或对象, 也会封装成数组. 我们可以通过数组下标的方式获取jQuery对象中的dom对象

例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //1. 使用dom设置红色字体
            var btn01 = document.getElementById("dom2dom");
            btn01.onclick = function () {
                var text = document.getElementById("testDiv");
                text.style.color = "red";
            }
            //2. dom对象转化为jquery再使用jQuery的方法
            var btn02 = document.getElementById("dom2jQuery");
            btn02.onclick = function () {
                var text = document.getElementById("testDiv");
                $(text).css("color", "blue");
            }
            //3. 调用jquery方法
            $("#jQuery2jQuery").click(function () {
                $("#testDiv").css("color", "green");
            })
            //4.jQuery对象转化为dom对象调用dom方法
            $("#jQuery2dom").click(function () {
                $("#testDiv")[0].style.color = "yellow";
            })
        });
    </script>
</head>
<body>
<div id="testDiv">Atguigu is Very Good!</div>

<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>


</body>
</html>

jQuery选择器

基本选择器

选择器示例作用
#idid选择器#btn01, 选择id为btn01的元素
.class类别选择器.mini, 选择class为mini的元素
标签名标签选择器div, 选择所有div元素
*选择全部元素
,有多个元素需要选择时 引号内以逗号隔开span,#two 选择以span标签和id为two的标签

层次选择器

选择器作用说明
ancestor descendant给定的祖先元素下的所有后代元素空格隔开
parent>child选择子元素
prev+next紧接在prev后的兄弟元素
prev~siblingsprev之后的所有兄弟

过滤选择器

:first 获取第一个元素

:last 获取最后一个

:not(selector)

按照解析顺序, 解析一个就是一个, 不论父子

:even

:odd

:eq(index)

:gt(index)

:lt(index)

header: 标题标签

:animated: 正在执行动画的元素

如果冒号之前没写东西, 就是从最大的dom对象开始找, :first 找到的就是html对象(因为是第一个元素节点)

内容过滤选择器

:contain(text): 包含指定文本的元素

:empty空元素

:has(selector): 与not(selector)相反

:parent:查找有子元素或文本的元素

可见性过滤选择器

:visible

:hidden

不可见：display属性设置为none，或visible设置为hidden

属性过滤选择器

[attribute]           
[attribute=value]     
[attribute!=value]         
[attribute^=value]        
[attribute$=value]        
[attribute*=value]        
[attrSel1][attrSel2][attrSelN]
选择器作用
[attribute]选择有attribute属性的元素节点
[attribute=value]选择attribute属性值等于value的元素节点
[attribute!=value] 选择attribute属性值不为value的元素节点, 没有该属性也算入其中
[attribute^=value]选择attribute属性以value为开始的元素
[attribute$=value]选择attribute属性以value为结尾的元素
[attribute*=value]选择attribute属性包含value的元素节点
[attrSel1][attrSel2][attrSelN] 选择满足多个属性过滤选择器的交集的元素节点

子元素选择器

选择器作用
:nth-child父元素下第n个父元素, 元素从1开始计算, 可以传入表达式
:first-child选第一个子元素
:last-child最后一个子元素
:only-child选择只有一个子元素的对象并返回他的子元素

子元素都要使用父元素[空格]子元素的方式, 因为选的是子元素, 所以按照基本选择器中后代元素的写法;

即是说 要先选出子元素, 再去用上面表格的这些去选第几个

div.one :first-child: class为one的div的第一个子元素

标准表述:ul li:nth-child(2): ul下的li子元素中的第二个

按理来说<ul>应当有三个子元素, 但因为jQuery中可能出现的状况是把下图中的两种情况所包含的节点全部不考虑, 只认为有一个li元素

在这里插入图片描述

在这里插入图片描述

nth-child()用法示例: #ulID :nth-child(2n)空格定位到后代, nth-child()只找子代,不会管b标签; 所以这里用``#ulID>:nth-child(2n)`右尖括号可能更高好一些

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#ulID :nth-child(2n)").css("color","red");
        })
    </script>
</head>
<body>
<ul id="ulID">
    <!--b标签是后来加的, 与运行结果不一致-->
    <li><b>你好1</b></li>
    <li><b>你好2</b></li>
    <li>你好3</li>
    <li>你好4</li>
</ul>
</body>
</html>

结果如下:

在这里插入图片描述

jQuery查找元素的机制: 只找元素节点(标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //找到9个
            var domEle = document.getElementById("ulID").childNodes;
            alert(domEle.length);
            //找到4个
            alert($("#ulID>*").length);
        })
    </script>
</head>
<body>
<ul id="ulID">
    <li>你好1</li>
    <li>你好2</li>
    <li>你好3</li>
    <li>你好4</li>
</ul>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

表单选择器

选择器作用
:input匹配所有input/textarea/select/(定义在表单内的)button元素
:text匹配所有单行文本框
:password选中密码框
:radio匹配所有单选框
:checkbox匹配所有复选框
:submit
:reset
:button<button>和<input type=button>
:file匹配文件
:hidden选中

表单内的button会被认为和submit具有一样的作用

<textarea>这样的起始标签和闭合标签之间尽量是挨着的, 如果空行, 会体现在浏览器端的

表单属性选择器

选择器作用
:enabled匹配所有可用元素
:disabled匹配所有不可用元素
:selected匹配下拉列表所有选中的option元素
:checked匹配所有选中项, 文档中说不包含下拉列表中选中的; 但实验中是包含的
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
    // val()可以操作表单项的value属性值
    // 它可以设置和获取
    $("input:enabled").val("我是万能的程序员");
});

//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
    $("input:disabled").val("管你可用不可用，反正我是万能的程序员");
});

//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
    alert( $(":checkbox:checked").length);
});

//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
    // 获取全部选中的复选框标签对象
    var checkboies = $(":checkbox:checked");
    // 老式遍历
    // checkboies是jQuery对象 是一个数组, 使用数组下标遍历即可获取dom对象
    for (var i = 0; i < checkboies.length; i++){
        // dom对象的属性值 
        alert( checkboies[i].value );
        // 将dom对象包装为jQuery对象, 并调用其val()方法
        alert($(checkboies[i]).val());					}

});

//5.获取下拉框选中的内容  
$("#btn5").click(function(){
    $(":selected").each(function () {
        //this代表当前对象
        alert(this.innerText)
    })
});

需要注意的点:

  1. each循环中放入回调函数, 其中的this指向当前对象
  2. var checkboies = $(":checkbox:checked");可以省略然后写为var checkboies = $(":checked");
  3. dom对象和jQuery对象的相互转化

元素筛选方法

jQuery对象的元素筛选方法

  1. 过滤
方法作用说明
eq(index|-index)查找指定索引的元素, 负数表示倒着找
first()
last()
filter(expr|obj|ele|fn)传入的是选择器字符串
is(expr|obj|ele|fn)返回booleanis(":empty")表示是否为空
has(expr|ele)是否含有选择器元素传入选择器字符串$(div).has(".mini)"
not(expr|ele|fn)选择不满足的元素传入选择器字符串
  1. 查找
方法作用说明
children([expr])选出符合条件的子元素
find(expr|obj|ele)选出符合条件的所有后代元素
next([expr])选择满足条件的下一个兄弟,紧邻的下一个$(div).next()下一个兄弟$(div).next("span")下一个span兄弟, 如果下一个不是span就gg
nextall([expr])选择后面所有的兄弟$(div).nextAll()下一个兄弟$(div).nextAll("span")后面所有的span
nextUntil([exp|ele][,fil])$(#one).nextUntil("span")$one与第一个span之间的所有元素
parent([expr])父元素$(.mini).parent()选出所有mini的父元素, mini有多个, 父元素也对应的有多个
prev([expr])上一个, 和next类似
prevall([expr])
prevUntil([exp|ele][,fil])找到之前多有兄弟元素, 直到fil停止$("span").nextUntil("#one")$, span为全文档中最后一个span
siblings([expr])查找所有兄弟元素前后的都可以找到
  1. 串联
方法作用说明
add(expr|ele|html|obj[,con])合并多个选择器的结果并集
addSelf()包括自己$(#two).children(.mini).andSelf(), 选出子元素,和自己
end()回到上一步状态$(#two).children(.mini)返回子mini元素;$(#two).children(.mini).end()返回$(#two)
  1. 补充

contents(): 计算上文本节点的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
           var domEle = document.getElementById("ulID").childNodes;
           alert(domEle.length);//9
           alert($("#ulID *").length);//4
           alert($("#ulID").contents().length)//9
        })
    </script>
</head>
<body>
<ul id="ulID">
    <li>你好1</li>
    <li>你好2</li>
    <li>你好3</li>
    <li>你好4</li>
</ul>
</body>
</html>

dom属性操作

html() innerHTML 不传参:get 传参:set; 传入的字符串会被浏览器解析

text() innerText 不传参:get 传参:set; 传入的字符串只会被当作字符串,不=会被浏览器解析

val(): 获取去标签的value值

属性

  1. attr(name|pro|key,val|fn)

    • a.attr(‘name’)取出a的name值
    • a.attr(“name”,“username”)把a的name值设置为username

  2. prop(name|pro|key,val|fn)1.6+

    • a.prop(‘id’) 取出a的id值
    • a.prop(‘id’,“bj”) 设置a的id值为bj

  3. removeProp(name)1.6+: a.removeProp(‘class’) 移除a的class属性

  4. removeAttr(name)a.removeAttr(‘class’) 移除a的class属性

注意: checkbox中checked属性如果选用attr(“checked”)观察未选中框, 会返回undefined; prop(“checked”)观察未选中框会返回false

标签固定支持的属性叫原生属性, 标签也可以有自定义属性(使用自定义属性用attr, 使用原生属性时用prop)

练习

全选全不选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            var items = $(":checkbox[name='items']");
            //1. 全选
            $("#checkedAllBtn").click(function () {
                $(":checkbox[name='items'],#checkedAllBox").prop("checked", true)
            })
            //2. 全不选
            $("#checkedNoBtn").click(function () {
                $(":checkbox").add("#checkedAllBox").prop("checked", false)
            })
            //3. 反选
            $("#checkedRevBtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    // this代表当前遍历到的对象, 是dom对象
                    // this.checked = !$(this).prop("checked");
                    var status = $(this).prop("checked");

                    $(this).prop("checked", !status);
                })
                //获取四个框是不是都选中, 都选中就把全选框勾上
                // items.filter(":checked").length;
                // 判断选中的个数, 是不是全选
                // var flag = items.filter(":checked").length == 4;
                // $("#checkedAllBox").prop("checked", flag);
                // 也可使用三元运算符
                $("#checkedAllBox").prop("checked", items.filter(":checked").length == 4 ? true : false);
            })
            //4. 提交, 将选中的打印
            $("#sendBtn").click(function () {
                items.filter(":checked").each(function () {
                    alert(this.value);
                })
            });
            //5. 全选/全不选
            $("#checkedAllBox").click(function () {
                //获取状态, 把状态同步给下面的选项
                items.prop("checked", this.checked);
            })
            //6.状态同步
            items.click(function () {
                $("#checkedAllBox").prop("checked", items.filter(":checked").length == 4)
            })
        });

    </script>
</head>
<body>

<form method="post" action="">

    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反　选"/>
    <input type="button" id="sendBtn" value="提　交"/>
</form>

</body>
</html>

dom增删改

内部插入
append(content)a.append((b);把b添加到a中
appendTo(content) a.appendTo(b); 把a加到b里面, 添加到最后面, b可以直接传入选择器字符串, 也可传入jQuery对象
prepend(content) a.prependTo(b); 父节点a中插入一个子节点b, 插入到最前面
prependTo(content) a.prependTo(b); 把子节点a添加到父节点b里面, 添加到最前面
外部插入
after(content) a.after(b); a之后插入b
insertAfter(content) a.insertAfter(b); 把a插入到b的后面
before(content) a.before(b); a之前插入b
insertBefore(content) a.insertBefore(b); 把a插入到b的前面
替换
replaceWith(content|fn) a.replaceWith(b) 把a用b替换
replaceAll(selector) a.replaceAll(b) 用a替换所有的b
删除
empty() a.empty() 把a掏空,把a里面的所有元素都删除
remove([expr])a.remove(b) 从a中删除符合的b a.remove()删除a
节点包裹
wrap()a.wrap(b)用b把a包裹起来
wrapAll()a.wrapAll(b) 用一个b把所有a包裹
wrapInner()a.wrapInner(b)a里面的东西被b包围
unwrap()a.unwrap(b)解除包裹a删除父元素b

CSS操作(不用写在window.onload中)

CSS

css(name|pro|[,val|fn]) 读写匹配元素的样式属性。
a.css(‘color’)取出a元素的color
a.css(‘color’,“red”)设置a元素的color为red

height: get/set元素的高度; 设置百分比时以父元素作为参照

width: 宽度同上

CSS 类

addClass(class|fn) 为元素添加一个class值;<div class="mini big">

removeClass([class|fn]) 删除元素的class值；传递一个具体的class值，就会删除具体的某个class
a.removeClass()：移除所有的class值

hasClass: 检查元素是否包含指定的class

toggleClass: 对被选元素做取反操作

offset: 返回第一个匹配元素相对于文档的位置, 返回一个top和height; 传值也可设置{top:50, left:10}

事件

文件加载

$(function){}): dom载入就绪执行; 想写几个写几个; 相当于多次调用核心函数这个方法

window.onload: 文档加载完后执行; 不能编写多个, 相当于重复赋值

事件绑定

常规方式

jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).

绑定事件可以链式操作

   $(".head").click(function(){
      $(".content").toggle();
   }).mouseover(function(){
      $(".content").toggle();
   });
jQuery提供的绑定方式

  1. bind(type,[data],fn)函数把元素和事件绑定起来

    • type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法

    • bind(事件字符串,回调函数),后来添加的元素不会绑定事件

    • 使用bind()绑定多个事件 type可以接受多个事件类型，使用空格分割多个事件

    $(".head").bind("mouseover mouseout",function(){
    $(".content").toggle();
});

  2. one()只绑定一次, 绑定的事件只会发生一次

    • one(type,[data],fn)函数把元素和事件绑定起来
    • type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法
    $(".head").one("click mouseover",function(){
     $(".content").toggle();
  });

  3. live方法会为现在及以后添加的元素都绑定上相应的事件

    $(".head").live("click",function(){
                    $(".content").toggle();
                });
//新添加元素
$("#panel").before("<h5 class='head'>什么是jQuery?</h5>");

  4. 解绑

    unbind(): 删除元素所有已绑定事件

    unbind(fn): 删除元素已绑定的指定事件

    $(".head").unbind()
$(".head").unbind("mouseout")

事件冒泡

事件由内向外层的传导， 直至document结束； 如何阻止向上传导？

return false能够取消默认行为, 能够阻止事件冒泡

$(function(){

    //冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发
    //解决冒泡问题：return false;

    //给span绑定一个单击响应函数
    $("span").click(function(){
        alert("我是span的单击响应函数");
        return false;
    });

    //给id为content的div绑定一个单击响应函数
    $("#content").click(function(){
        alert("我是div的单击响应函数");
        return false;
    });

    //给body绑定一个单击响应函数
    $("body").click(function(){
        //alert("我是body的单击响应函数");
    });

    //取消默认行为
    $("a").click(function(){
		return false;
	}) ;

事件对象

获取事件的详细信息, 给函数一个参数, 浏览器机会将事件对象赋值给在这个参数

window.onload = function(){
    //使用js获取事件对象
    var areaDiv = document.getElementById("areaDiv");
    var showMsg = document.getElementById("showMsg");
    //将mousemove绑定给当前元素
    areaDiv.onmousemove = function(event){
        //获取事件的详细信息, 给函数一个参数, 浏览器机会将事件对象赋值给在这个参数
        var x = event.pageX;//X
        var y = event.pageY;//Y
        showMsg.innerHTML = "x="+x+" y="+y;//把div中的html赋值
    };
}

jQuery中, 与js类似

$(function(){
    $("#areaDiv").mousemove(function(event){

        $("#showMsg2").text("x="+event.screenX+" y="+event.screenY)	
    })
})

同时可以根据event.type的类型(到底是绑定的哪一个事件, 具体去确定绑定事件的行为)

$("#areaDiv").bind("click mousemove", function (event) {
    //1. 当点击的时候弹出showMsg的文本值
    if ("click" == event.type) {
        alert($("#showMsg").text());
    }
    //2. mousemove的时候showMsg里面显示详细信息
    if ("mousemove" == event.type) {
        $("#showMsg").text("x="+event.screenX+" y="+event.screenY)
    }
})

动画

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

    <script type="text/javascript">
        /*
            基本
            show([speed,[easing],[fn]]), fn: 回调函数, 完成后调用的函数
            hide([speed,[easing],[fn]])
            toggle([speed],[easing],[fn])
            滑动
            slideDown([spe],[eas],[fn])
            slideUp([speed,[easing],[fn]])
            slideToggle([speed],[easing],[fn])
            淡入淡出
            fadeIn([speed],[eas],[fn])
            fadeOut([speed],[eas],[fn])
            fadeTo([[spe],opa,[eas],[fn]])
            fadeToggle([speed,[eas],[fn]])
            */
        $(function () {
            //显示   show()
            $("#btn1").click(function () {
                $("#div1").show(2000, function () {
                    alert("show动画完成 ")
                });
            });
            //隐藏  hide()
            $("#btn2").click(function () {
                $("#div1").hide(1000, function () {
                    alert("hide动画 执行完成 ")
                });
            });
            //切换   toggle()
            $("#btn3").click(function () {
                $("#div1").toggle(1000, function () {
                    alert("toggle动画 完成 ")
                });
            });

            // var abc = function(){
            // 	$("#div1").toggle(1000,abc);
            // }
            // abc();

            //淡入   fadeIn()
            $("#btn4").click(function () {
                $("#div1").fadeIn(2000, function () {
                    alert("fadeIn完成 ")
                });
            });
            //淡出  fadeOut()
            $("#btn5").click(function () {
                $("#div1").fadeOut(2000, function () {
                    alert("fadeOut完成 ")
                });
            });

            //淡化到  fadeTo()
            $("#btn6").click(function () {
                $("#div1").fadeTo(2000, 0.5, function () {
                    alert('fadeTo完成 ')
                });
            });
            //淡化切换  fadeToggle()
            $("#btn7").click(function () {
                $("#div1").fadeToggle(1000, function () {
                    alert("fadeToggle完成 ")
                });
            });

            $("#btn8").click(function () {
                var param = {width: "200px", height: "200px", color: "red", borderWidth: "5px"}
                $("#div1").animate(param, 2000);
            });

        })
    </script>

</head>
<body>
<table style="float: left;">
    <tr>
        <td>
            <button id="btn1">显示show()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn2">隐藏hide()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn3">显示/隐藏切换 toggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn4">淡入fadeIn()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn5">淡出fadeOut()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn6">淡化到fadeTo()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn7">淡化切换fadeToggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn8">自定义动画animate()</button>
        </td>
    </tr>
</table>

<div id="div1" style="float:left;border: 1px solid;background-color: #bcf;width: 300px;height: 200px;display: none">
    jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
朝阳王铁蛋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery-tagsinput-revisited：流行的jQuery标签输入插件的重新版本
02-03
jQuery标签输入再探插件基本信息从创建的已停止使用的jQuery标签输入插件。 在此处查看原始项目： : jQuery Tags Input Revisited Plugin是先前插件的改进...改进之处复习jQuery标签输入欢迎一些非常重要的改进： 它将
lighthouse-web-notes:Lighthouse Labs的课程笔记
03-19
4. 定期复习，巩固知识，避免遗忘。 总之，"Lighthouse-web-notes"提供了丰富的Web开发资源，特别是对于那些想要深入学习JavaScript和前端开发的人而言，这是一个宝贵的自学材料。通过这些笔记，你可以逐步构建起...
Web前端复习-11、jQuery基础
qq_45560350的博客
06-18 333
1、jQuery概述 JavaScript语言作为Web前端语言发展过程中的一个重要里程碑 随着浏览器种类的推陈出新，JavaScript对浏览器的兼容性受到了极大挑战 2006年1月，美国John Resing创建了一个基于JavaScript的开源框架——jQuery jQuery具有代码高效、浏览器兼容性更好等特征，极大地简化了对DOM对象、事件处理、动画效果以及AJAX等操作 1.1 jQuery优势 访问和操作DOM元素：jQuery中封装了大量的DOM操作，可以非常方便地获取或修改页面.
Web前端复习-12、jQuery进阶
qq_45560350的博客
06-19 274
1.jQuery文档处理 jQuery除了可以操作元素的属性、样式和内容外，还可以对DOM进行复杂的操作： 元素的创建 元素的插入 元素的删除 元素的替换 元素的复制 1.1 创建节点 根据W3C中的HTML DOM标准，HTML文档的所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点；各种节点相互关联，共同形成了DOM树。 在页面中添加元素时，首先需要找到该元素的上一级节点，再通过函数$()完成节点的创建，然后完成节点的添加操作。 $(htmlCode) 参数htmlCode.
web前端复习(一):jquery实现轮播
都市桃源
06-07 2962
作为一个想从事后台开发的人,我心里倒并不是排斥学习其前端,我自己也很喜欢web前端,只不过现在前端发展速度较快,我有点目不暇接了,我对web前端的印象还停留在html+css+div+js+jquery上,但是目前前端的发展,各种框架的出现以及node.js的出现,前台后台的界限已经模糊了好多,js一套语法可以实现前后台,各种听没听过的前台框架见没见过的前台框架如雨后春笋版涌出,而且自己去看了git
jQuery复习-(jQuery入门,jQuery语法(DOM),jQuery动画)
m0_64526818的博客
01-04 851
jQuery入门 jQuery语法(DOM) jQuery动画
Day24 WEB-JQuery复习
Hello World ！
08-09 191
五、JQuery JQuery的一些属性和方法的使用有别于JS，要对照API进行练习不要混淆。
Web学习笔记day4-JQuery
kb_white的博客
08-11 83
前言:学习总结,主要用于自我复习 1. 使⽤JQ完成⾸⻚的定时⼴告弹出 1.1 相关知识点JQuery 1.1JQuery介绍 JQuery是一个快速、简洁的JavaScript框架.它封装JavaScript的常用功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互. 1.2JQuery的使用 JQuery它是⼀个库（框架），要想使⽤它，必须先引⼊对应JS⽂件。 ...
JavaWeb--------jQuery基础
詹煜彪9527
03-07 7655
一. 概念 1.1 简介 jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。jQuery是一个快速、简洁的JavaScript框架，能够兼容各种浏览器，核心理念是write less,do more(写得更少,做得更多)。jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML...
从0开始学web-day30-jquery03
oxygen_ls的博客
02-14 186
三位置法轮播图 函数节流 clone和appendTo each方法 碎片轮播图 间歇模型 篮球积分系统
【web开发】4、JavaScript与jQuery
qq_46644680的博客
09-08 1135
JavaScript常用的基本功能： 1.插入位置、2.注释、3.变量、4.数组、5.滚动字符 三、jQuery常用的基本功能： 1.引入jQuery、2.寻找标签、3.val、text、append的使用举例、4.表格删除案例、5.绑定事件案例、6.菜单切换案例
code-aca:JavaScript复习
04-30
JavaScript，作为一种广泛应用于Web开发的脚本语言，已经成为现代互联网技术不可或缺的一部分。它在浏览器端运行，赋予网页动态交互的能力，让用户体验更加丰富和个性化。本文将深入探讨JavaScript的核心概念和重要...
csc170-course-documentation:CSC 170 Web开发简介
04-02
4. **Web浏览器的工作原理**: 学生将了解HTTP协议，以及浏览器如何解析HTML、CSS和JavaScript，呈现网页内容。 5. **Web服务器**: 介绍基本的Web服务器概念，如Apache或Nginx，以及它们在发布和管理网站中的作用。 ...
FE-Web-Dev-Nano-P2:Udacity FE Web Dev Nanodegree 项目二（简历）
07-04
如果您需要复习 JavaScript 语法，请转到； 如果您想了解这个项目是如何操作和遍历 DOM 的，请查看 。 浏览本课程中的视频和作业，学习构建简历所需的 JavaScript。 根据项目评分细则（下一页）检查您的工作。 ...
数据分析的核心技能和方法
07-19
数据分析的核心技能和方法
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包
07-19
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 平湖人寿保险公司保险销售网站分为用户和管理员两个部分 前台部分（用户界面）： 1、资讯浏览功能： （1）新闻资讯浏览 （2）新闻资讯查询 （3）公司简介 （4）通知公告 2、用户登录注册功能： （1）注册 （2）登录 3、用户管理功能 （1）个人信息管理 （2）订单管理 4、保险购买功能： （1）保险产品浏览 （2）保险产品查询 （3）保险产品购买 后台管理（管理员界面） 1、管理员登录功能： 管理员在管理员登录界面输入用户名和密码，即可登录管理员的界面。 2、资讯管理功能： （1）新闻资讯管理 （2）公司简介管理 （3）通知公告管理 3、保险产品管理： （1）保险产品信息管理 （2）保险产品查询 4、会员管理： （1）会员删除 （2）会员级别管理 5、统计管理： （1）保险产品销售量统计 （2）有效会员数量统计 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包
最新发布
07-19
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 题库 试卷信息管理 阅卷 统计功能 包含：源码、数据库脚本、环境工具包、相同框架项目的安装教程（在说明文档中）
揭秘黑箱：YOLO预测结果的可解释性探究
07-19
YOLO（You Only Look Once）是一种流行的实时对象检测系统，最初由 Joseph Redmon 等人在 2015 年提出。它的核心思想是将对象检测任务视为一个回归问题，直接从图像像素到边界框坐标和类别概率的映射。YOLO 以其快速和高效而闻名，特别适合需要实时处理的应用场景。 以下是 YOLO 的一些关键特点： 1. **单次检测**：YOLO 模型在单次前向传播中同时预测多个对象的边界框和类别概率，不需要多次扫描图像。 2. **速度快**：YOLO 非常快速，能够在视频帧率下进行实时检测，适合移动设备和嵌入式系统。 3. **端到端训练**：YOLO 模型可以从原始图像直接训练到最终的检测结果，无需复杂的后处理步骤。 4. **易于集成**：YOLO 模型结构简单，易于与其他视觉任务（如图像分割、关键点检测等）结合使用。 5. **多尺度预测**：YOLO 可以通过多尺度预测来检测不同大小的对象，提高了检测的准确性。 YOLO 已经发展出多个版本，包括 YOLOv1、YOLOv2（也称为 YOLO9000）、YOLOv3、YOLOv4 和 YOLOv5 等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值