备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

jQuery学习笔记--效果，操作html元素，遍历DOM树

2018-05-19 1639
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 参考W3school:http://www.w3school.com.cn/jquery/jquery_hide_show.aspjQuery效果：隐藏：基础语句： $(selector).hide(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

参考W3school:

http://www.w3school.com.cn/jquery/jquery_hide_show.asp

jQuery效果：

隐藏：

基础语句：

$(selector).hide(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实现：单击p标签的文字 文字消失

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

实现：单击button按钮 文字在2秒内消失

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(2000);
  });
});
</script>

实现：单击按钮 包含按钮的div缓慢隐藏

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>

<body>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>大家好<br /> 
我是小莫<br />
哈哈</p>
</div>

</body>
</html>

注意：
parents(“.ex”)父亲节点中class为ex的元素

div.ex表示 又是div又是class为ex的元素

div .ex则表示 div中 class为ex的元素
区别 中间空格

而#ex则表示id为ex的元素

$(“.ex .hide”)表示class为ex元素中的class为hide的元素

hide(“slow”)是缓慢消失的意思

显示：

基础语句：

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实现：单击id为show的元素时候p文本文件显示

<script type="text/javascript">
$(document).ready(function(){
  $("#show").click(function(){
  $("p").show();
  });
});
</script>

那有没有方法实现hide和show转换的呢？
有，还真有 那就是toggle()函数:
显示被隐藏的元素，并隐藏已显示的元素：
语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>

淡入淡出：

淡入：
实现：单击按钮 id为div1的淡入 id为div2缓慢淡入 id为div3 3秒内淡入
前提三个div中style：display:none
fadeIn（）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>

淡出：
fadeOut（）类似fadeIn（）

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>

转换淡入淡出：

fadeToggle()类似于上文的toggle（）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>

可以指定淡出的透明度：

fadeTo(速度,透明度);

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.1);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>

总结：
通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  1. fadeIn() 淡入
  2. fadeOut() 淡出
  3. fadeToggle() 转换淡入淡出
  4. fadeTo() 指定淡出透明度

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeTo有点不同：

$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

滑动：

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

slideDown() 向下滑动显示：

div.panel
{
height:120px;
display:none;
}

<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>

slideUp() 向上滑动隐藏

div.panel
{
height:120px;
}

<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>

转换滑动方向也相当于 转换显示和隐藏
slideToggle()
如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

div.panel
{
height:120px;
display:none;
}

<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

语法：

$(selector).slideDown(speed,callback);

(selector).slideUp(speed,callback);(selector).slideUp(speed,callback);(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

动画：

animate() 方法用于创建自定义动画
语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

单击按钮 div元素移动到离左端100px的地方

<script> 
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'100px'});
});
});
</script> 

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

也可以操作多个属性：
{params}中有多个属性 里面是最终的状态
举个栗子： 离左端250px 透明度50% 高度150px 宽150px

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script>

可以使用相对值：

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script>

使用预定义的值:
把属性的动画值设置为 “show”、”hide” 或 “toggle”
高度显示和隐藏通过按钮转换

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script>

队列功能：
依次执行animate

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script>

总结：
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

注意：

提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

stop()
stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
id为panel动画下滑的时候 单击id为panel的按钮暂停 单击id为flip的按钮继续

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>

注意：
stop语法

$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

Callback 函数
在当前动画 100% 完成之后执行。
实现：单击按钮 文字文本1秒内隐藏后 输出”hahaha”

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("hahaha");
    });
  });
});
</script>

一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
举个栗子：
“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

等效于：

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

jQuery操作DOM

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

举个栗子：

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>

<p id="test">这是段落中的<b>粗体</b>文本。</p>

第一个alert返回的是

这是段落中的粗体文本。

第二个alert返回的是

这是段落中的<b>粗体</b>文本。

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>

返回的是表单的内容 如果是text返回的是 输入的值或者默认值

attr() 方法用于获取属性值。
返回的是id为w3s的href属性值

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>

也可直接通过上述方法修改内容 举个栗子:
修改id为test1的文本文件值为”Hello world!”
修改id为test2的html内容为<b>Hello world!</b>
修改id为test3的内容为Dolly Duck

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
  });
});
</script>

设置属性 - attr()
修改id为w3s的href属性为

http://www.w3school.com.cn/jquery

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

attr() 方法也允许您同时设置多个属性。

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "hhaha"
  });
});

attr其实有个问题 如果涉及到复选框之类的设置true false值的时候就不可靠 要用prop
使用attr获取checked属性时返回”checked”和”“,现在使用prop方法获取属性则统一返回true和false。
那么，什么时候使用attr()，什么时候使用prop()？


1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop();

3.其他则使用attr();

参考：
https://www.cnblogs.com/smartXiang/p/5686800.html

text()、html() 以及 val() 的回调函数

回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});
$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

添加新的 HTML 内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append(): 元素结尾插入
在p结尾添加粗体
在ol列表中结尾添加一行

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>

appendTo跟append相反

prepend():元素开头插入

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>Prepended item</li>");
  });
});
</script>

append和prepend可以一次性添加多个

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

after() 和 before()
元素前面和元素后面添加元素

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });
});
</script>

通过 after() 和 before() 方法添加若干新元素

<script>
function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建元素
var txt3=document.createElement("big");  // 通过 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}
</script>

删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

举个栗子:
删除id为div1的元素
删除id为div2的元素中的子元素

$("#div1").remove();
$("#div2").empty();

过滤被删除的元素
添加参数即可
删除 class=”italic” 的所有

元素

$("p").remove(".italic");

获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

addClass()
向元素添加css样式
也可向多个元素添加同一个css样式

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

removeClass()
移除一个或者多个类的css样式

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

toggleClass()
该方法对被选元素进行添加/删除类的切换操作
先添加blue样式 后删除blue样式

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

返回 CSS 属性
css()
设置或返回被选元素的一个或多个样式属性

$(“p”).css(“background-color”);
如果有多个p则返回首个匹配元素的 background-color 值

设置 CSS 属性
所有匹配元素设置 background-color 值为yellow

$("p").css("background-color","yellow");

设置多个 CSS 属性
为所有匹配元素设置 background-color 和 font-size

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery 提供多个处理尺寸的重要方法：

width()不包括内边距、边框或外边距
height()不包括内边距、边框或外边距
innerWidth()包括内边距
innerHeight()包括内边距
outerWidth()包括内边距和边框
outerHeight()包括内边距和边框
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

设置指定的 <div >元素的宽度和高度

$("button").click(function(){
  $("#div1").width(500).height(500);
});

返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

遍历:
向上遍历 DOM 树
parent()
返回被选元素的直接父元素
返回span元素的直接父类

  $("span").parent();

parents()
方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
所有的span的祖先元素的css元素都设置为红色

$("span").parents().css("color":"red");

返回所有 元素的所有祖先，并且它是 <ul>>元素

$(document).ready(function(){
  $("span").parents("ul");
});

span的所有祖先父类 但是低于div元素父类 就是介于span和div之间的所有元素

$(document).ready(function(){
  $("span").parentsUntil("div");
});

向下遍历 DOM 树
children() 方法返回被选元素的所有直接子元素
返回每个 <div>元素的所有直接子元素

$(document).ready(function(){
  $("div").children();
});

可以使用可选参数来过滤对子元素的搜索
比如:
返回类名为 “1” 的所有 <p> 元素，并且它们是 <div>的直接子元素

$("div").children("p.1");

find()
返回被选元素的后代元素，一路向下直到最后一个后代。
比如:
<div> 后代的所有 <span> 元素

$(document).ready(function(){
  $("div").find("span");
});

返回 <div>>的所有后代:

$(document).ready(function(){
  $("div").find("*");
});

同胞遍历:

siblings() 返回被选元素的所有同胞元素
next()    返回被选元素的下一个同胞元素 只有一个
nextAll()  返回被选元素的所有跟随的同胞元素
nextUntil()  回介于两个给定参数之间的所有跟随的同胞元素
prev()
prevAll()
prevUntil()

prev(), prevAll() & prevUntil() 跟前面的一样 不过是向前而已

siblings() 返回被选元素的所有同胞元素
也可以使用可选参数来过滤对同胞元素的搜索。

 $("h2").siblings();  所有同胞
 $("h2").siblings("p"); 是p类型的同胞

nextUntil()
举例:
返回介于 <h2>与 <h6>元素之间的所有同胞元素 不包括h2和h6

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

过滤

  1. first() 第一个元素
  2. last() 最后一个元素
  3. eq() 根据指定索引找元素
  4. filter() 匹配元素
  5. not() 返回不匹配的元素
    它们允许您基于其在一组元素中的位置来选择一个特定的元素

first()
返回被选元素的首个元素。
选取首个 <div>元素内部的第一个 <p>元素

$(document).ready(function(){
  $("div p").first();
});

last()
相反:
选择最后一个 <div> 元素中的最后一个 <p> 元素

$(document).ready(function(){
  $("div p").last();
});

eq()
返回被选元素中带有指定索引号的元素
从0开始
举例:选取第二个 <p> 元素

$(document).ready(function(){
  $("p").eq(1);
});

filter()
返回匹配的元素
举例:
返回带有类名 “intro” 的所有 <p>元素

$(document).ready(function(){
  $("p").filter(".intro");
});

not()
回不匹配标准的所有元素
not() 方法与 filter() 相反。
返回不带有类名 “intro” 的所有<p>元素

$(document).ready(function(){
  $("p").not(".intro");
});
文章标签：
JavaScript
前端开发
索引
关键词：
dom操作
HTML元素
dom元素
dom树
dom jquery
codingcoge
目录
相关文章
Goodluck-dys
|
21天前
|
存储 JavaScript 前端开发
理解DOM树的加载过程
理解DOM树的加载过程
Goodluck-dys
14 0
穆雄雄.
|
1月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
穆雄雄.
16 1
穆雄雄.
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
穆雄雄.
12 1
众所周知
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM？
如何使用 JavaScript 操作 DOM？
众所周知
13 0
明月看潮生
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
明月看潮生
33 1
1941623231718325
|
2天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术，包括使用`getElement*`方法和CSS选择器获取元素，借助`createElement`与`appendChild`动态创建及插入元素，修改元素内容、属性和样式，以及删除元素。通过掌握这些技术，开发者能实现页面动态交互，但应注意避免过度操作DOM以优化性能和用户体验。
1941623231718325
11 1
东方睿赢
|
9天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作：解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息，会随每个请求发送回服务器，适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据，关闭浏览器后清除，适合临时存储如登录状态。LocalStorage则持久保存数据，即使关闭浏览器也不会清除，适用于存储长期设置。三种方式各有侧重，应按需求选择。
东方睿赢
15 0
龙大吉
|
9天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作：解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石，它阻止脚本跨不同协议、域名或端口访问资源，防止恶意行为。例如，HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求，但需服务器配合设置，通过`document.domain`属性可配置，但仍受限于服务器配置。
龙大吉
14 4
泡芙-草莓
|
20天前
|
JavaScript
理解DOM树的加载过程（js的问题）
理解DOM树的加载过程（js的问题）
泡芙-草莓
10 0
N..
|
30天前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
14 1

热门文章

最新文章

  • 1
    组态软件之万维组态介绍（web组态、html组态、vue2/vue3组态）
  • 2
    uni-app使用v-html输出富文本图片溢出解决
  • 3
    基于SpringBoot+HTML实现登录注册功能模块
  • 4
    HTML深度解析：更改文本颜色
  • 5
    【前端设计】HTML+CSS+JavaScript基本特性
  • 6
    有关Java发送邮件信息（支持附件、html文件模板发送）
  • 7
    黑色个人主页HTML源码
  • 8
    《HTML 简易速速上手小册》第4章：HTML 的表单与输入（2024 最新版）
  • 9
    《HTML 简易速速上手小册》第5章：HTML 高级布局技巧（2024 最新版）
  • 10
    如何使用HTML5的语义化标签来提高网站的可访问性？
  • 1
    jQuery方法小记
    12
  • 2
    jQuery手机号抽奖
    16
  • 3
    jquery的书写格式，简单的使用方法
    20
  • 4
    JQuery和JS的区别有哪些？
    12
  • 5
    用JQuery实现选中select里面的option显示对应的div
    14
  • 6
    jQuery 和 Zepto 的区别？ 各自的使用场景？
    10
  • 7
    jQuery会员中心安全修改表单特效
    14
  • 8
    jQuery中的DOM操作
    14
  • 9
    jQuery选择器
    14
  • 10
    jQuery事件处理
    11

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • jQuery开发教程
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）