jQuery基礎 - 經常使用基本屬性
jQuery簡介
jQuery 是一個 JavaScript 庫，極大地簡化了 JavaScript 編程css
jQuery 對象是經過jQuery包裝DOM對象後產生的對象，jQuery對象是jQuery獨有的，若是一個對象就是jQuery對象，那麼它就能夠使用jQuery裏的方法html
jQuery 內部實際使用的 JavaScript 的 XMLHttpRequest 對象jquery
基本語法
$(選擇器).動做()
jQuery 對比 與 JavaScript 對比編程
| 寫法 | 代碼 | 釋義 |
|---|---|---|
| jQuery | $("#test").html() | 獲取 ID 爲 test的元素內 html代碼。其中html()是 jQuery 中的方法 |
| JavaScript | document.getElementById("test").innerHTML | 獲取 ID 爲 test的元素內 html代碼 |
jQuery 基本示例app
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div>hello jQuery</div>
<script>
jQuery("div").css("color","red")
</script>
</body>
</html>
標籤屬性操做
| 用法 | 釋義 |
|---|---|
| $("標籤").html() | 標籤HTML內容 |
| $("標籤").attr("標籤屬性") | 獲取標籤屬性(屬性值) |
| $("標籤").removeAttr("標籤屬性") | 移除指定標籤屬性 |
| $("標籤").attr("標籤屬性","增長/變動屬性") | 增長或變動屬性 |
| $("標籤").prop("標籤屬性") | 獲取標籤屬性(布爾值) |
| $("標籤").removeProp("標籤屬性") | 移除指定標籤屬性 |
| $("標籤").prop("標籤屬性","增長/變動屬性") | 獲取標籤屬性,並新增或變動屬性 |
| $(this) | 獲取的標籤自己 |
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div id="div_sty" con="111" >測試 div 標籤</div>
<script>
//獲取標籤屬性(屬性值)
console.log($("div").attr("con")); //獲取指定屬性值
console.log($("div").removeAttr("con")); //移除指定屬性
console.log($("div").attr("Newcon","NewText")); //獲取並變動指定屬性值,不存在則添加，存在則變動
//獲取標籤屬性(布爾值)
console.log($("div").prop("id")); //判斷指定屬性是否存在
console.log($("div").removeProp("id")); //移除指定屬性
console.log($("div").prop("class","test")); //判斷指定屬性是否存在,不存在則添加，存在則變動
$("div")
</script>
標籤位置和尺寸
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
*{margin: 0px;}
.outer{position: absolute;left:50px;top:10px;background-color: yellow;height: 300px;width: 400px;}
.con{position: relative; background-color: pink;height:200px;width:300px;left:20px;top:30px;padding-top:1px;padding-left:2px;margin: 3px auto auto 4px;}
</style>
<body>
<div class="outer">
<p class="con"></p>
</div>
</body>
<script>
//獲取位置
console.log($(".con").position().left); //相對於上層標籤的偏移量
console.log($(".con").offset().left); //相對於視圖標籤的偏移量
//獲取高度
console.log($(".con").height()); //獲取標籤高度
console.log($(".con").innerHeight()); //獲取內部區域高度
console.log($(".con").outerHeight(true)); //獲取標籤高度(設置爲 true 時，計算邊距在內)
//獲取寬度
console.log($(".con").width()); //獲取標籤寬度
console.log($(".con").innerWidth()); //獲取內部區域段杜
console.log($(".con").outerWidth(true)); //獲取標籤寬度(設置爲 true 時，計算邊距在內)
</script>
</html>
jQuery 綁定事件
爲每一個匹配元素的特定事件綁定事件處理函數，能夠同時綁定多個事件類型函數
- 和 js 中的 onclick 綁定方式不一樣，但由於jQuery自己是基於js寫的運行庫，因此onclick綁定方式也能夠在jQuery中使用
this 使用測試
- onclick(this)，獲取當前標籤，在函數中js用this，jQuery用$(this)
- 其它綁定方式不用在方法中傳遞this參數，能夠直接使用this
JavaScript綁定方式：this
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
<button onclick="showtime()">這是一個測試標籤，點擊觸發事件</button>
<script>
function showtime() //定義方法
{
alert("hello world") //事件方法內容
};
</script>
</body>
</html>
jQuery綁定方法一：code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
<button>這是一個測試標籤，點擊觸發事件</button>
<script>
$("button").click(function () //選定標籤綁定事件方法
{
alert("hello world") //事件方法內容
alert($(this).html()) //標籤自己的HTML內容
});
</script>
</body>
</html>
jQuery綁定方法二：orm
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
<button>這是一個測試標籤，點擊觸發事件</button>
<script>
$("button").bind("click",function () //選定標籤綁定事件方法
{
alert("hello world"); //事件方法內容
alert($(this).html()) //標籤自己的HTML內容
});
//$("button").unbind("click"); //解除綁定
</script>
</body>
</html>
jQuery綁定方法三：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
<button>這是一個測試標籤，點擊觸發事件</button>
<script>
$("button").on("click",function () //選定標籤綁定事件方法,提供綁定事件處理程序所需的全部功能
{
alert("hello world"); //事件方法內容
alert($(this).html()) //標籤自己的HTML內容
});
//$("button").off("click"); //刪除事件綁定
</script>
</body>
</html>
進度條控制
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
body{height: 2000px;}
.Go_Top{position: fixed;height: 50px;width: 100px; bottom: 50px;right: 50px;background-color: #ccc;text-align: center;line-height: 50px;}
</style>
<body>
<div class="Go_Top" onclick="returnTop()">返回頂部</div>
<script>
function returnTop()
{
$(window).scrollTop(0) //滾動條與視窗間距爲0，即窗口返回頂部
}
</script>
</body>
</html>
標籤內容操做
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div id="div_sty">
<div>測試標籤1</div>
<p>測試標籤2</p>
</div>
<script>
console.log($("#div_sty").html()); //獲取標籤內容(包含子標籤和標籤內容)
$("#div_sty").html("<h1>新標籤</h1>"); //修改標籤
</script>
</body>
</html>
標籤文本操做
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div id="div_sty">
<div>測試標籤1</div>
<p>測試標籤2</p>
</div>
<script>
console.log($("#div_sty").text()); //獲取標籤內容(只含標籤裏的內容)
$("#div_sty").text("新文本"); //修改標籤內容
</script>
</body>
</html>
表單標籤value值操做
非value固有屬性的標籤不生效
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<input type="text" value="test">
<script>
console.log($(":text").val()); //獲取標籤 value 屬性值
$(":text").val("New_test"); //變動 value 屬性值
</script>
</body>
</html>
form標籤內容獲取
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<form id="TestID">
用戶<input name="user" type="text">
密碼<input name="passwd" type="password">
<div onclick="aaa()">點擊顯示獲取數據</div>
</form>
<script>
function aaa(){
var data = $("#TestID").serialize();
//獲取form中標籤內容方法
alert(data);
}
</script>
</body>
</html>
jQuery遍歷
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class="test">第一個標籤</div>
<p class="test">第二個標籤</p>
<strong class="test">第三個標籤</strong>
<script>
array=["a","b","c"];
//循環遍歷-方式一
$.each(array,function(x,y) {
console.log(x); //遍歷值的下標序列號
console.log(y); //遍歷的值
})
//循環遍歷-方式二
$(".test").each(function(){
console.log($(this)); //遍歷全部標籤
})
</script>
</body>
</html>
0 a 1 b 2 c [div.test] [p.test] [strong.test]
jQuery標籤的增刪改
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<style>
.div1 { width: 300px;height: 100%;color: #000;float: left;text-align: center;background-color: #FFCCCC; }
div p { background-color: #fff;}
</style>
</head>
<body>
<div class="div1">
<h3>jQuery的增刪改查</h3>
<button att="add">添加標籤</button>
<button att="del">刪除標籤</button>
<button att="replace">替換標籤</button>
</div>
<script>
//添加節點標籤函數
$("[att='add']").click(function(){
var $ele=$("<p>"); //建立標籤,聲明變量爲 ele
$ele.html("新增的 p 標籤"); //設定新增標籤中元素
$(".div1").append($ele); //把設定好的標籤和標籤內元素添加到指定位置
});
//刪除節點標籤函數
$("[att='del']").click(function(){
$(".div1 > p").last().remove(); //選定要刪除的標籤進行刪除操做
});
//修改節點標籤函數
$("[att='replace']").click(function(){
$(".div1 > h3").replaceWith("<h2>替換後的新標題</h2>");
});
</script>
</body>
</html>
jQuery類樣式的增刪改
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
.div_sty{color: red;}
.New_sty{text-align: center;}
</style>
<body>
<div class="div_sty">測試 div 標籤</div>
<script>
$("div").addClass("New_sty"); //添加指定標籤類樣式
$("div").removeClass("div_sty"); //刪除指定標籤類樣式
$("div").css("backgroundColor","blue"); //修改指定標籤類樣式
</script>
</body>
</html>
jQuery克隆標籤元素
一個布爾值（true 或者 false）指示事件處理函數是否會被複制。V1.5以上版本默認值是：false
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class="outer">
<div>
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script>
//克隆元素
function add(self) {
var $clone_obj=$(self).parent().clone(true); //定義克隆元素
$clone_obj.children("button").html("-").attr("onclick","remove_obj(this)"); //變動克隆元素子級內容
$(".outer").append($clone_obj); //添加克隆修改後的元素
}
//刪除元素
function remove_obj(self) {
$(self).parent().remove(); //刪除當前級父級標籤元素
}
</script>
</body>
</html>
擴展方法
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<script>
var settings = { validate: false, a:1, b:"2" };
var options = { validate: true, c: "3" };
jQuery.extend(settings, options);
console.log(settings)
</script>
</body>
</html>
相關文章
- 1. jQuery經常使用函數（一）：基礎
- 2. jQuery經常使用屬性和方法
- 3. Jquery mobile div經常使用屬性
- 4. Thymeleaf 經常使用屬性
- 5. ios基礎篇（四）——UILabel的經常使用屬性及方法
- 6. IOS5基礎教程之三-----經常使用控件屬性
- 7. Html5和Css3的基礎標籤及經常使用屬性
- 8. Spring基本屬性經常使用注入寫法
- 9. UITableView 和 UITableViewCell 的基本配置和經常使用屬性
- 10. HTML的基本內容,經常使用標籤及屬性
- 更多相關文章...
- • Redis基本安裝和使用 - Redis教程
- • Kotlin 基礎語法 - Kotlin 教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
