jQuery基础 - 经常使用基本属性

时间 2019-11-05

原文原文链接

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>