<!--方式一:下载到本地,引入路径--> <script src="jquery-3.1.1.min.js"></script> <!--方式二:cdnjs线上引入--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//第一种 $(document).ready(function(){}) //第二种 $().ready(function(){}) //第三种 $(function(){})
js的加载函数:
window.onload=function(){ }
注:与jquery的区别:
html代码
<div id = "box"></div>
js代码
$(“#box”).css(“width”,”200px”);
$(“#box”).css({ “width”:”200px”, “height”:”200px”, })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .red{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"></div> <script src="jquery-3.1.1.min.js"></script> <script> $("#box").addClass("red");//设置样式 $("#box").removeClass("red");//移除样式 </script> </body> </html>
注:id,class,src,alt,checked等都是属性
<img src="" alt="" id="pic" width=""/> <input type="checkbox" id="check"/> <script src="jquery-3.1.1.min.js"></script> <script> $(function(){ //设置属性 $("#pic").attr("width","200"); $("#check").prop("checked",true); //获取属性 console.log($("#pic").attr("width"));//200 console.log($("#check").prop("checked"));//true }) </script>
注:prop() 方法应该用于检索属性值,如 DOM 属性或自定义的属性。若检索 HTML 属性,用 attr() 方法。
用于设置内容时,重写所有匹配元素的内容。
注:text() 设置或返回被选元素的文本内容,用于返回内容时,返回所有匹配元素的文本内容(会删除 HTML 标记)。
html() 设置或返回被选元素的 innerHTML,用于返回内容时,返回第一个匹配元素的内容。
<div id="box"></div> <script src="jquery-3.1.1.min.js"></script> <script> $(function(){ //设置内容 $("#box").html("<span>我是内部的span元素</span>"); $("#box").text("<span>我是span标签<span>"); //获取内容 console.log($("#box").html()); console.log($("#box").text()); }) </script>
<input type="text" id="text"/> <input type="button" id="btn" value="点击"/> <script src="jquery-3.1.1.min.js"></script> <script> $("#btn").click(function(){ console.log($("#text").val()); }) </script>
<div id="box">我是一个盒子</div> <script src="jquery-3.1.1.min.js"></script> <script> //$() 把js的dom对象转换成了jquery对象 $("#box").css("fontSize","24px"); //$(“#box”)[0]或$(“#box”).get(0) 把jquery对象转化成了dom对象 $("#box").get(0).style.fontSize = "30px"; $("#box")[0].style.fontSize = "40px"; </script>
<input type="button" id="btn1" value="显示"/> <input type="button" id="btn2" value="隐藏"/> <input type="button" id="btn3" value="切换"/> <div id="box" style="width: 200px;height: 200px;background: red;display: none;"> </div> <script src="jquery-3.1.1.min.js"></script> <script> $("#btn1").click(function(){ $("#box").show();//显示 }) $("#btn2").click(function(){ $("#box").hide();//隐藏 }) $("#btn3").click(function(){ $("#box").toggle(1000);//show()和 hide()之间切换 }) </script>
<input type="button" id="btn1" value="淡入"/> <input type="button" id="btn2" value="淡出"/> <input type="button" id="btn3" value="切换"/> <div id="box" style="width: 200px;height: 200px;background: red;"> </div> <script src="jquery-3.1.1.min.js"></script> <script> $("#btn1").click(function(){ $("#box").fadeIn(1000);//淡入 }) $("#btn2").click(function(){ $("#box").fadeOut(1000);//淡出 }) $("#btn3").click(function(){ $("#box").fadeToggle(1000);//淡入淡出切换 }) </script>
<input type="button" id="btn1" value="滑上"/> <input type="button" id="btn2" value="滑下"/> <input type="button" id="btn3" value="切换"/> <div id="box" style="width: 200px;height: 200px;background: red;"> </div> <script src="jquery-3.1.1.min.js"></script> <script> $("#btn1").click(function(){ $("#box").slideUp(1000);//滑上 }) $("#btn2").click(function(){ $("#box").slideDown(1000);//滑下 }) $("#btn3").click(function(){ $("#box").slideToggle(1000);//切换 }) </script>
注:该方法中属性名必须是驼峰写法,如:padding-left 写成 paddingLeft
<input type="button" id="btn" value="点击"/> <div id="box" style="width: 200px;height: 200px;background: red;position: absolute"> </div> <script src="jquery-3.1.1.min.js"></script> <script> $("#btn").click(function(){ $("#box").animate({ "width":"400px", "height":"400px", "top":"200px", "left":"200px" }) }) </script>
backgroundPositionX | backgroundPositionY |
borderBottomWidth | borderLeftWidth | borderRightWidth | borderTopWidth | borderWidth | borderSpacing |
margin | marginBottom | marginLeft | marginRight | marginTop |
padding | paddingBottom | paddingLeft | paddingRight | paddingTop |
height | width | maxHeight | maxWidth | minHeight | minWidth |
bottom | left | right | top |
letterSpacing |
lineHeight |
textIndent |
fontSize |
outlineWidth |
<button id="start">开始</button> <button id="stop1">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止但完成</button> <div style="height: 100px;width: 200px;background-color: red;position: absolute;">HELLO</div> <script src="jquery-3.1.1.min.js"></script> <script> $(document).ready(function(){ $("#start").click(function(){//启动动画 $("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000); }); $("#stop1").click(function(){ $("div").stop();//停止当前活动的动画,但允许已排队动画向前执行 }); $("#stop2").click(function(){ $("div").stop(true);//停止当前活动的动画,并清空动画队列(该元素所有动画停止) }); $("#stop3").click(function(){ $("div").stop(true,true);//立即完成当前活动的动画,然后停止 }); });
</script>
DOM 树
- <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
- <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
- <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
- 两个 <li> 元素是同胞(拥有相同的父元素)。
- 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
- <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
注:祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
html 代码
<div style="width:400px;height:400px;background:lightblue">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span(子元素)</span> <span>span(子元素)</span> </li> <li>li (父元素) <b>b (子元素)</b> </li>
<li>li (父元素)
<i>i (子元素)</i>
</li> </ul> </div> <script src="jquery-3.1.1.min.js"></script>
$(function(){ $("span").parent().css("color","red"); });
$(function(){ $("span").parents().css("color","blue"); });
$(function(){ $("span").parentsUntil("div").css("color","green"); });
$(function(){ $("ul").children().css("color","white"); });
$(function(){ $("ul").find("*").css("color","white");//遍历所有后代 });
$(function(){ $("ul").find("span").css("color","yellow");//遍历后代中所有span 元素 });
$(function(){ $("li").siblings().css("color","orange"); });
$(function(){ $("li").next().css("color","grey"); });
$(function(){ $("li").nextAll().css("color","pink"); });
$(function(){ $("li").nextUntil("div").css("color","yellow"); });
html代码
<div id="box" style="width:200px;height:200px;border:1px solid black;"> <h4>我是h4标签</h4> </div> <script src="jquery-3.1.1.min.js"></script>
$(function () { //创建标签 var $p=$("<p>我是新创建的p元素</p>"); //放进父元素的内部的后面 $("#box").append($p);//相当于 $p.appendTo($("#box")); })
$(function () { //创建标签 var $p=$("<p>我是新创建的p元素</p>"); //放在父元素的内部的前面 $("#box").prepend($p);//相当于 $p.prependTo($("#box")); })
$("#box").remove();
$("#box").empty();
$("h4").replaceWith($("<a>我是a标签</a>"));//相当于 $("<a>我是a标签</a>").replaceAll($("h3"));
<button>点击</button>> <script src="jquery-3.1.1.min.js"></script> <script> $(function () { $("button").bind("click",function(){ alert("我是一个按钮");
}); })
</script>
$("button").on("click",function(){ alert("我是一个按钮"); });
(未完,晚点更新)
如对本文有疑问, 点击进行留言回复!!
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法(不用jQuery)
网友评论