JQuery&工具方法&属性&CSS

目录：一.工具方法二.jQuery属性三.CSS（一）工具方法：1.$.each()：遍历数组、对象、对象数组中的数据2.$.trim()：去除字符串两边的空格3.$.type(object)：得到数据的类型4.$.isArray(object)：判断是否是数组5.$.isFunction(obj)：判断是否函数6.$.parseJSON(object)：解析json字符串转换为js对象/数组源代

卡特琳同志

562人浏览 · 2022-03-17 20:13:37

卡特琳同志 · 2022-03-17 20:13:37 发布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部js -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script -->
		<script type="text/javascript">
			$(function() {
                //一、$工具方法
				//1.1 $.each 遍历对象 数组
				//定义对象
				//var stu={"name":"张三","age":38};
				//遍历对象 k指索引（键）  v指元素（值）
				/* $.each(stu,function(k,v){
					console.info(k,v);
				}) */
				//console.info(stu.name,stu.age);

				//定义数组
				//var names = ["哈哈","呵呵","嘻嘻","嘿嘿"];
				//遍历数组
				/* $.each(names,function(i,n){
					console.info(n);
				}) */

				//定义对象数组 [{}]
				//var stus = [{"name":"嘿嘿","age":38},{"name":"哈哈","age":39}];
				//遍历对象数组
				/* $.each(stus,function(i,stu){
					//console.info(stu.name,stu.age);
					$.each(stu,function(a,b){
						console.info(b);
					})
				}) */

				/* //1.2 $.trim 去除前后空格 
				var str = "   zking  ";
				alert(str.length);
				console.info($.trim(str).length); */

				//1.3 $.type(obj)  得到变量的数据类型
				//var str = 12.6;
				//var stu={"name":"张三","age":38};
				// var stus = [{"name":"嘿嘿","age":38},{"name":"哈哈","age":39}];
				// console.info($.type(stus));

				//1.4  $.isArray()  判断是否是数组
				// var stu={"name":"张三","age":38};
				//var stus = [{"name":"嘿嘿","age":38},{"name":"哈哈","age":39}];
				//console.info($.isArray(stu));

				//1.5 $.isFunction()  判断是否是函数
				// var stus = [{"name":"嘿嘿","age":38},{"name":"哈哈","age":39}];
				//console.info($.isFunction(myf));
				// 		
				// function myf(){
				// 			alert(123);
				//}

				//1.6 $.parseJSON() 将json格式的字符串-->js的对象或者数组
				var stuStr = '{"name":"张三","age":38}';
				//console.info($.type(stuStr));string
				var stu = $.parseJSON(stuStr);
				//console.info($.type(stu));//object  json格式的字符串-->js对象
				//console.info(stu.name,stu.age);
				// $.each(stu,function(k,v){
				// 			console.info(v);
				//})

				//将json格式的字符串-->js的对象数组
				//var stusStr = [{"name":"嘿嘿","age":38},{"name":"哈哈","age":39}];
				//console.info($.type(stusStr));string
				//var stus = $.parseJSON(stusStr);
				//console.info($.type(stus));array
				//遍历
				/* $.each(stus,function(a,b){
					//console.info(b.name,b.age);
					$.each(b,function(k,v){
						console.info(v);
					})
				}) */
				
			})
		</script>
	</head>
	<body>
		
	</body>
</html>

（二）属性

1.attr()：获取某个标签属性的值，或者设置某个标签属性的值

2.removeAttr()：删除某个标签属性

3.addClass()：给某个标签添加class属性值

4.removeClass()：删除某个标签class属性值

5.prop()与attr()的区别：全选/取消全选案例（prop多用于属性值Boolean类型的情况）

6.html()、text()、val()的区别

6.1 html()：设置返回所选元素的内容（包括HTML标记）

6.2 text()：设置或返回所选元素的文本内容

6.3 val()：设置或返回表单字段的值

源代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部js -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script -->
		<script type="text/javascript">
		
			$(function() {
				//2.1 attr() 拿属性值和设置属性值
				var mpath = $("#aa").attr("src"); //拿值
				//console.info(mpath);
				//给某个属性设置值
				//$("#aa").attr("src","img/动漫男头.jpeg");//设值
				//$("#aa").attr("width","100px");

				//2.2  removeAttr()  移除某个属性对应属性值
				//$("#aa").removeAttr("src");//无图片

				//2.3 addClass()  增加样式值
				//$("#aa").addClass("xx");

				//2.4 removeClass() 删除某个标签属性值
				//$("#aa").removeClass("xx");//class仍然在 值会被移除掉

				//2.5 prop() 和attr类似  prop与attr的区别
				//给img标签增加name值
				//$("#aa").attr("name","abc");
				//$("#aa").prop("name","abc");

                //全选功能
                /* $("#ok").click(function(){
					$(".aaa").prop("checked",true);
				})
				
				$("#nook").click(function(){
					$(".aaa").prop("checked",false);
				}) */
                //注意:在为Boolean时 attr会进入之前的状态 但是prop不会

				//attr和addClass的区别
				//attr:会覆盖之前的样式
				//addClass:会前调用原来的样式 再调用加的样式

				//2.6 val()  拿值 设值
				//var aa = $("#bb").val();//拿值
				//console.info(aa);
				//$("#cc").val("哈哈哈");//设值

				//2.7 html() 和text() 的区别
				//var a = $("p").html();//会拿到子标签
				//console.info(a);
				//var b = $("p").text();//不会拿到子标签 只会打印纯文本
				//console.info(b);

				//优化隔行换色
				// $("table tr:even").addClass("cc");
				// $("table tr:odd").addClass("dd");


			})
		</script>
	</head>
	<body>
		<p>小明和<span>孙尚香</span>的爱情故事</p>
		<img src="img/动漫头.jpeg" width="200px" id="aa">
		<input type="checkbox" class="aaa" value="喜欢敲代码" />喜欢敲代码
		<input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩游戏
		<input type="checkbox" class="aaa" value="喜欢听歌" />喜欢听歌
		<input type="button" value="全选" id="ok" />
		<input type="button" value="取消全选" id="nook" /><br />
        <input type="text" id="bb" value="你好" />
		<input type="text" id="cc" />
		<table border="1px" width="50%">
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</body>
</html>

（三）.CSS

1.单个属性和多个属性

        <head>
        <!-- 引入外部js -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
            $(function() {
                （单个属性）
				$("p").css("background", "red"); //一个键,一个值

                （多个属性）
                //{键:值,键:值} 多个用逗号隔开    
				//$("p").css({"background":"pink","color":"blue"})

				//拿值
				var a = $("p").css("background");
				console.info(a);
            });
        </script>
    </head>
    <body>
		<p>小明和<span>孙尚香</span>的爱情故事</p>
	</body>