jQuery學習筆記02--讀取和操作屬性，讀取和操作屬性節點，新增、刪除、改變類，操作html、css、value，操作事件，事件冒泡及阻止事件冒泡，預設行為及阻止預設行為，自動觸發事件
1、讀取和操作屬性
<script type="text/javascript">
$(function (){
function Person(){
}
var person1=new Person();
person1.name="zhangsan";
console.log(person1.name);
person1["hometown"]="beijing";
console.log(person1.hometown);
//操作屬性
//設定節點屬性值
var myspan=document.getElementsByTagName("span")[0];
myspan.setAttribute("name","urspan")
//獲取節點屬性值
var str=myspan.getAttribute("name");
console.log(str);
});
</script>
2、jQuery的attr方法讀取和操作屬性節點
1、attr（name|pro|key，val|fn）
作用獲取或者設定屬性節點的值
可以傳遞一個引數，也可以傳遞兩個引數
如傳遞一個引數，代表獲取屬性節點的值
如傳遞兩個引數，代表設定屬性節點的值
ps：不管找到多少個元素，都只返回第一個元素指定的屬性節點的值
2、removeAttr（name）
作用：刪除指定屬性節點
<html>
<style type="text/css">
div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
//找到多個，讀取第1個
console.log($("span").attr("class"));
//找到多個，設定多個，
$("span").attr("class","box");
console.log($("span").attr("class"));
//如果屬性節點不存在你，系統會自動新增該屬性
$("span").attr("newcla","added");
console.log($("span").attr("newcla"));
//刪除一個或多個屬性節點，多個屬性節點名可以用空格隔開
$("span").removeAttr("newcla name");
});
</script>
<head>
</head>
<body>
<span class="span1" name="myname1"></span>
<span class="span2" name="myname2"></span>
</script>
</body>
</html>
3、jQuery的prop方法讀取和操作屬性節點
1、prop方法
官方建議，在操作屬性節點時，具有true和false兩個屬性的屬性節點，如checked，selected或者disabled使用prop（），其他的使用attr（）
2、removeProp方法
刪除屬性節點
<html>
<style type="text/css">
div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
//找到所有span元素的第1個元素（下標為0）
$("span").eq(0).prop("demo","myname3");
console.log($("span").prop("demo"));
$("span").removeProp("demo");
console.log($("span").prop("demo"));
$("input").prop("checked","true");
});
</script>
<head>
</head>
<body>
<span class="span1" name="myname1">第一個span</span><br/>
<span class="span2" name="myname2">第二個span</span><br/>
<input type="checkbox">
</script>
</body>
</html>
另一則操作屬性節點例項
<html>
<style type="text/css">
div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
//給按鈕新增點選事件
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
var input=document.getElementsByTagName("input")[0];
var text=input.value;
console.log(text);
var img=document.getElementsByTagName("img")[0];
//$("img").eq(0).prop("src","images/gril01.jpg")
img.prop("src","images/gril01.jpg");
}
});
</script>
<head>
</head>
<body>
<input type="text">
<button>changeimg</button><br/>
<img src="images/gril04.jpg">
</script>
</body>
</html>
4、jQuery新增刪除類（class）刪除類，改變類
1、addClass（class|fn）
新增類屬性
2、removeClass（class|fn）
刪除類屬性
3、toggleClass（class|fn[,sw]）
有就刪除，沒有就新增
<html>
<style type="text/css">
div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;}
.class1{ background-color: green;}
.class2{ background-color: red;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
var btn=document.getElementsByTagName("button");
btn[0].onclick=function(){
$("div").addClass("class1");
}
btn[1].onclick=function(){
$("div").removeClass("class1");
}
btn[2].onclick=function(){
$("div").toggle("class1");
}
});
</script>
<head>
</head>
<body>
<button>新增類</button><br/>
<button>刪除類</button><br/>
<button>切換類</button><br/>
<div ></div>
</script>
</body>
</html>
5、jQuery操作html
1、html（[val | fn]）
2、text（[val | fn]）
3、val（[val | fn|arr]）
<html>
<style type="text/css">
div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;}
.class1{ background-color: green;}
.class2{ background-color: red;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
var btn=document.getElementsByTagName("button");
btn[0].onclick=function(){
//和原生的innerHTML一致
$("div").html("<p>我是一些段落<span>我是一個span</span></P>");
}
btn[1].onclick=function(){
console.log($("div").html());
}
btn[2].onclick=function(){
//和原生的innerText一致
$("div").text("<p>我是一些段落<span>我是一個span</span></P>");
}
btn[3].onclick=function(){
//和原生的innerText一致
console.log($("div").text());
}
btn[4].onclick=function(){
//和原生的value屬性一致
$("input").val("請輸入內容");
}
btn[5].onclick=function(){
//和原生的value屬性一致
console.log($("input").val());
}
});
</script>
<head>
</head>
<body>
<button>設定html</button><br/>
<button>獲取html</button><br/>
<button>設定text</button><br/>
<button>獲取text</button><br/>
<button>設定value</button><br/>
<button>獲取value</button><br/>
<div ></div>
<input type="text">
</script>
</body>
</html>
6、jQuery操作css
<html>
<style type="text/css">
.father{width:200px; height: 200px; background-color: green; border: 1px solid gray;
position: relative;}
.son{width:100px; height: 100px; background-color: blue; position: absolute; left:50;top:50px}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
var btns=document.getElementsByTagName("button");
btns[0].onclick=function(){
console.log($(".father").width());
console.log($(".son").offset().top);
}
btns[1].onclick=function(){
console.log($(".father").width("500px"));
}
});
</script>
<head>
</head>
<body>
<button>獲取樣式</button><br/>
<button>設定樣式</button><br/>
<div class="father" >
<div class="son"></div>
</div>
</script>
</body>
</html>
另一案例：
<html>
<style type="text/css">
div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;}
.class1{ background-color: green;}
.class2{ background-color: red;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
$("div").css("width","200px")
$("div").css("backgroundColor","blue")
//批量設定css
$("div").css({
height:"300px",
border:"5px solid red"
});
//獲取css樣式值
console.log($("div").css("width"));
});
</script>
<head>
</head>
<body>
<button>設定html</button><br/>
<button>獲取html</button><br/>
<button>設定text</button><br/>
<button>獲取text</button><br/>
<button>設定value</button><br/>
<button>獲取value</button><br/>
<div ></div>
<input type="text">
</script>
</body>
</html>
再一例
<html>
<style type="text/css">
div{ overflow:scroll; margin:5px 0; border:1px solid gray;width: 110px; height: 400px;}
.class1{ background-color: green;}
.class2{ background-color: red;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
var btns=document.getElementsByTagName("button");
btns[0].onclick=function(){
console.log($(".scroll").scrollTop());
}
btns[1].onclick=function(){
$(".scroll").scrollTop(200);
}
});
</script>
<head>
</head>
<body>
<div class="scroll">這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字</div>
<button>設定</button>
<button>獲取</button>
</script>
</body>
</html>
7、jQuery操作事件
jQuery有兩種繫結事件方式
1、eventName（fn）//推薦方法
2、on（eventName，fn）//有些方法只能通過on的方法來實現
<html>
<style type="text/css">
div{ overflow:scroll; margin:5px 0; border:1px solid gray;width: 110px; height: 400px;}
.class1{ background-color: green;}
.class2{ background-color: red;}
</style>
<script type="text/javascript">
$(function (){
//eventName（fn）方法。推薦方法
$("button").eq(0).click(function(){
console.log("這是jQuery的事件回撥函式");
})
//on（eventName，fn）
$("button").eq(1).on("click",function(){
console.log("這是jQuery的事件回撥的另一種方式函式");
});
//新增多個事件在 一個按鈕上
$("button").eq(0).mouseenter(function(){
console.log("滑鼠進入時函式");
})
function test(){
alert("hello world");
}
//移除載入在指定button上的所有事件
$("button").eq(1).off();
//移除載入在指定button上的指定事件
$("button").eq(0).off("click");
//移除指定型別的指定事件（需要傳入兩個引數）
$("button").eq(0).off("click",test());
});
</script>
<head>
</head>
<body>
<button>設定</button>
<button>獲取</button>
</script>
</body>
</html>
8、關於事件冒泡及阻止冒泡
1、return false;
2、event.stopPropagation();
<html>
<style type="text/css">
.father{ width: 200px; height: 200px; background-color: green;}
.son{ width: 100px; height: 100px; background-color: yellow;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
//以下會產生事件冒泡
$(".father").click(function (){
console.log("this is father div");
});
$(".son").click(function (){
console.log("this is son div");
//返回false會阻止事件冒泡,即事件不再向下傳導
return false;
});
$(".son").click(function (event){
console.log("this is son div");
//以下也可以阻止冒泡
event.stopPropagation();
});
});
</script>
<head>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.sina.com">我是百度</a>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
9、預設行為及阻止預設行為
1、return false;
2、event.preventDefault();
<html>
<style type="text/css">
.father{ width: 200px; height: 200px; background-color: green;}
.son{ width: 100px; height: 100px; background-color: yellow;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
$("a").click(function(){
alert("彈出註冊框");
//阻止預設行為,不再前往連線
return false;
});
//或者另一種方式阻止預設行為
$("a").click(function(event){
alert("彈出註冊框");
//阻止預設行為,不再前往連線
event.preventDefault();
})
});
</script>
<head>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.sina.com">我是百度</a>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
10、自動觸發事件
1、trigger
會自動觸發冒泡
自動觸發事件的時候，會觸發預設行為
2、triggerHandler
不會自動觸發冒泡
自動觸發事件的時候，不會觸發預設行為
<html>
<style type="text/css">
.father{ width: 200px; height: 200px; background-color: green;}
.son{ width: 100px; height: 100px; background-color: yellow;}
</style>
<script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
<script type="text/javascript">
$(function (){
//或者另一種方式阻止預設行為
$(".father").click(function(){
console.log("father");
});
//自動觸發了father的click事件
//$(".father").trigger("click");
$(".father").triggerHandler("click");
});
</script>
<head>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.sina.com">我是百度</a>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
相關文章
- jQuery阻止事件冒泡和預設行為程式碼jQuery事件
- JavaScript阻止冒泡和取消事件預設行為JavaScript事件
- JavaScript事件冒泡、事件捕獲和阻止預設事件JavaScript事件
- 阻止事件冒泡（stopPropagation和cancelBubble）和阻止預設行為(preventDefault和returnValue)事件
- 阻止冒泡和阻止預設事件的相容寫法事件
- jquery阻止事件冒泡jQuery事件
- jQuery如何阻止事件冒泡jQuery事件
- JavaScript阻止事件冒泡JavaScript事件
- stopPropagation() 阻止事件冒泡事件
- jQuery阻止事件冒泡程式碼例項jQuery事件
- jQuery阻止事件冒泡簡單介紹jQuery事件
- 阻止jquery事件冒泡程式碼例項jQuery事件
- jQuery阻止事件冒泡例項程式碼jQuery事件
- 原生js如何阻止事件冒泡JS事件
- javascript阻止事件冒泡程式碼JavaScript事件
- 阻止游標預設事件事件
- jQuery阻止事件冒泡現象程式碼例項jQuery事件
- 前端學習程式碼例項-JavaScript阻止事件冒泡前端JavaScript事件
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- js阻止事件冒泡例項程式碼JS事件
- 阻止瀏覽器冒泡事件，相容firefox和ie瀏覽器事件Firefox
- jQuery 事件冒泡jQuery事件
- JavaScript高階程式設計筆記 事件冒泡和事件捕獲JavaScript程式設計筆記事件
- 事件冒泡 和 事件捕獲事件
- JS事件（事件冒泡和事件捕獲）JS事件
- zepto繫結事件改變冒泡事件流事件
- 前端與移動開發----webAPI----文字框事件，滑鼠事件，標籤屬性操作方式前端移動開發WebAPI事件
- jquery 操作HTML data全域性屬性快取的坑jQueryHTML快取
- 阻止a標籤預設跳轉事件事件
- 【JS基礎】阻止預設操作JS
- jquery的冒泡事件jQuery事件
- (JavaScript學習記錄)：jQuery 屬性操作JavaScriptjQuery
- 原生javascript的return false並不能阻止事件冒泡JavaScriptFalse事件
- jQuery事件物件event的屬性和方法jQuery事件物件
- JQuery6：事件冒泡jQuery事件
- 相容所有瀏覽器的阻止事件冒泡程式碼瀏覽器事件
- 相容所有瀏覽器的阻止事件冒泡封裝瀏覽器事件封裝
- 關於js事件冒泡和事件捕獲JS事件