Day72 自定义Js脚本库、jQuery
1.思维导图
2.代码部分
<head> <title>自定义myjs脚本库</title> <script> function fn1() { //获取div元素 var ele = document.getElementById("div1"); // 获取 div元素标签内容 console.log(ele.innerHTML); //设置div元素标签内容 ele.innerHTML = "this is a div1"; // 获取 div元素标签内容 console.log(ele.innerHTML); } function fn2() { //获取div元素 var ele = document.getElementById("div2"); // 获取 div元素标签内容 console.log(ele.innerHTML); //设置div元素标签内容 ele.innerHTML = "this is a div2"; // 获取 div元素标签内容 console.log(ele.innerHTML); } </script> </head> <body> <div id="div1"> 这是一个div1 </div> <div id="div2"> 这是一个div2 </div> <div id="div3"> 这是一个div3 </div> <button onclick="fn1()">操作1</button> <button onclick="fn2()">操作2</button> </body>
- myjs.js
function $(id) {
var ele = document.getElementById(id);
//给ele添加一个方法，方法名叫html，形参content
ele.html = function (content) {
if (content != null) { //如果content不为空，就将content设置到ele对象中
ele.innerHTML = content;
} else { // 如果content为空，就获取ele的内容
return ele.innerHTML;
}
}
return ele;
}
<head> <title>自定义myjs脚本库</title> <script src="${pageContext.request.contextPath}/js/myjs.js"></script> <script> function fn1() { var content = $("div1").html(); console.log(content); } function fn2() { // var ele = $("div1"); // ele.html("this is a Div"); $("div1").html("this is a div") } </script> </head> <body> <div id="div1"> 这是一个div1 </div> <button onclick="fn1()">获取</button> <button onclick="fn2()">设置</button> </body>
<head> <title>基本使用</title> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script> function fn1() { //$("选择器") -> 元素对应的jquery对象 var ele = $("#div1"); var content = ele.html(); console.log(content); } function fn2() { //ele不是js对象，而是一个jquery对象 var ele = $("#div1"); ele.html("this is a div"); } </script> </head> <body> <div id="div1"> 这是一个div </div> <button onclick="fn1()">获取</button> <button onclick="fn2()">设置</button> </body>
<head> <title>jQuery对象和js对象</title> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script> function fn1() { //获取js对象 var jsObject = document.getElementById("div1"); //js对象能否使用jquery对象的属性和方法？ jsObject.html("this is a div"); } function fn2() { var jqObject = $("#div1"); //jquery对象能否使用js对象的属性和方法? jqObject.innerHTML = "this is a div"; } //需求：已有js对象，让js对象调用jquery对象的属性和方法 //将js对象转换成jquery对象 function fn3() { //获取js对象 var jsObject = document.getElementById("div1"); //将js对象 -> jquery对象 var jqObject = $(jsObject); //调用jquery对象的属性和方法 jqObject.html("this is a div!!!"); } //需求：已有jquery对象，让jquery对象调用js对象的属性和方法， //将jquery对象转换成js对象 function fn4() { //获取jquery对象 var jqObject = $("#div1"); //jquery对象 -> js对象 // var jsObject = jqObject.get(0); var jsObject = jqObject[0]; //调用js对象的属性和方法 jsObject.innerHTML = "this is a div ???"; } </script> </head> <body> <div id="div1"> 这是一个div </div> <button onclick="fn1()">操作1</button> <button onclick="fn2()">操作2</button> <button onclick="fn3()">转换1</button> <button onclick="fn4()">转换2</button> </body>
<script> //选择id为one的元素 ID选择器 function fn1(){ $("#one").css("background-color","orange"); } //选择class为mini的所有元素 类选择器 function fn2(){ $(".mini").css("background-color","pink"); } //选择元素名是div的所有元素 标签选择器 function fn3(){ $("div").css("background-color","lightpink"); } //选择所有的元素 通配符选择器 function fn4(){ $("*").css("background-color","pink") } </script>
- 层次选择器
//选择body内的所有div元素 $("a b")
function fn1(){
$("body div").css("background-color","pink");
}
//在body内选择子元素是div的 $("a > b")
function fn2(){
$("body > div").css("background-color","pink");
}
//选择所有id为one的下一个兄弟div元素 $("a + b")
function fn3(){
$("#one + div").css("background-color","pink");
}
//选择id为two的元素后面的所有div兄弟元素 $("a ~ b")
function fn4(){
$("#one ~ div").css("background-color","pink");
}
//选择第一个DIV元素
function fn1(){
$("div:first").css("background-color","pink");
}
//选择最后一个div元素
function fn2(){
$("div:last").css("background-color","pink");
}
//选择class不为one的所有div元素 $('dom:not(.one)')
function fn3(){
$("div:not(.one)").css("background-color","pink");
}
//选择索引值为偶数的div元素 even:偶数 odd:奇数
function fn4(){
$("div:even").css("background-color","pink");
}
//选择索引值为奇数的div元素
function fn5(){
$("div:odd").css("background-color","pink");
}
//选择索引值等于3的元素
function fn6(){
$("div:eq(3)").css("background-color","pink");
}
//选择索引值大于3的元素
function fn7(){
$("div:gt(3)").css("background-color","pink");
}
//选择索引值小于3的元素
function fn8(){
$("div:lt(3)").css("background-color","pink");
}
//选取含有文本"di"的div元素 $("tagName:contains('str')")
function fn1(){
$("div:contains('di')").css("background-color","pink");
}
//选取不包含子元素(或者文本元素)的div空元素. $("tagName:empty");
function fn2(){
$("div:empty").css("background-color","pink");
}
//选取含有class为mini元素 的div元素. $("tagName:has(.mini)")
//1.选中的是DIV元素
//2.子元素中的class值为mini
function fn3(){
$("div:has(.mini)").css("background-color","pink");
}
//选取含有属性title的div元素. $("tagName[title]");
function fn1(){
$("div[title]").css("background-color","red");
}
//选取属性title值等于test的div元素. $("tagName[title='test']")
function fn2(){
$("div[title='test']").css("background-color","pink");
}
//选取属性title值不等于test的div元素. !=
function fn3(){
$("div[title!='test']").css("background-color","pink");
}
//选取属性title值以te开始 的div元素. ^=
function fn4(){
$("div[title^='te']").css("background-color","pink");
}
//选取属性title值以est结束的div元素. $=
function fn5(){
$("div[title$='est']").css("background-color","pink");
}
//选取属性title值含有es的div元素. *=
function fn6(){
$("div[title*='es']").css("background-color","pink");
}
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
function fn7(){
$("div[id][title*='es']").css("background-color","pink");
}
//选取class为one的div下的第2个子元素
function fn1(){
$("div[class='one'] :nth-child(2)").css("background-color","pink");
}
//选取class为one的div下的第1个子元素
function fn2(){
// $("div[class='one'] :nth-child(1)").css("background-color","pink");
$("div[class='one'] :first-child").css("background-color","pink");
}
//选取每个父元素下的最后一个子元素
function fn3(){
$("div :last-child").css("background-color","pink");
}
//如果父元素下的仅仅只有一个子元素,那么选中这个子元素
function fn4(){
$("div :only-child").css("background-color","pink");
}
<head> <title>jQuery的dom操作</title> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script> function fn1() { $("#div1").html("<font color='red'>红色</font>") } function fn2() { $("#div1").text("<font color='green'>绿色</font>") } function fn3() { // $("#username").val("设置"); console.log($("#username").val()) } function fn4() { $("#div1").attr("class","bbbb"); console.log($("#div1").attr("class")); } function fn5() { $("#div1").removeAttr("class"); console.log($("#div1").attr("class")); } </script> </head> <body> <div id="div1" class="aaaa"> 这是一个div </div> <input type="text" id="username"/> <button onclick="fn1()">html()</button> <button onclick="fn2()">text()</button> <button onclick="fn3()">val()</button> <button onclick="fn4()">attr()</button> <button onclick="fn5()">removeAttr()</button> </body>
