jQuery$工具方法及其属性_jquery $方法-CSDN博客

本文链接：https://blog.csdn.net/qq_63492318/article/details/123557912

---目录---

1.jQuery工具方法；

2.jQuery属性；

3.jQuery隔行换色案例；

4.jQuery全选功能案例；

一、$工具方法

1.1 我们来看看用$工具方法【$.each()】如何遍历数组、对象、以及对象数组中的数据？

第一步我们需要定义几个对象、数组以及对象数组；

后面代码如下：

      <!--第一步：引入jQuery类库-->
      <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

	  <!-- 另起一个js -->
      <script type="text/javascript">
			 工具方法$.each():
          $(function(){//自动调用
                //1.1 $.each 遍历对象、数组
				//定义一个对象
				var stu = {"name":"颜忠祺","age":18};
				//遍历此对象
				$.each(stu,function(i,n){//i指下标/n指元素
					alert(n);
				})
                //利用控制台打印一下
				console.info(stu.name,stu.age);//可以直接用对象点出值

				//定义一个数组
				var names=["颜忠祺","邓正威","刘好","王思梦"];
				//遍历数组
				$.each(names,function(i,n){
				 	console.info(i,n);
				  })

				//定义对象数组
				var stus = [{"name":"颜忠祺","age":18},{"name":"邓正威","age":19}];
				$.each(stus,function(i,stu){
					//方式1
					//console.info(stu.name,stus.age);
					//方式2
					$.each(stu,function(i,n){
						console.info(n);
					})
				})
          })
		</script>

1.2 用【$.trim()】去除字符串两边的空格；

<script type="text/javascript">
    //定义一个字符串
    var str = "   leaf   ";
    console.info($.trim(str).length);//通过打印字符串长度来测试
</script>

1.3 用【$.type()】得到数据的类型；

<script type="text/javascript">
    //定义一个数据
    var str = "Leaf";
    console.info($.type(str));//打印测试
</script>

1.4 用【$.isAttay()】判断是否是否是数组？

<script type="text/javascript">
    //定义一个数组
    var names=["颜忠祺","邓正威","刘好","王思梦"];
    console.info($.isArray(names));//打印测试
</script>

1.5 用【$.isFunction()】判断是否是函数？

注：这里要注意代入函数的时候不要带括号！

<script type="text/javascript">
	 //定义一个数组
     var names=["颜忠祺","邓正威","刘好","王思梦"];
     //定义一个函数
     function myf(){
 	    alert(Leaf);
     }
     console.info($.isFunction(myf));//测试打印
</script>

1.6 用【$.parseJSON()】把json字符串转换为js对象/数组；

（这里敲重点噢！）

<script type="text/javascript">
    //先定义一个对象
    var stuStr='{"name":"颜忠祺","age":18}';
    //数据类型
    console.info($.type(stuStr));//测试是json字符串
    //转为数组
    var stu = $.parseJSON(stuStr);//json格式的字符串--->js数组
    //遍历
    $.each(stu,function(i,n){
	    console.info(n);//打印测试
    })	
</script>

二、jQuery属性

2.1 【attr()】：拿到/设置--->标签的值；

<script type="text/javascript">
    //拿值
    var tp = $("#aa").attr("src");
    console.info(tp);//打印测试
    //给某个属性设置值
    $("#aa").attr("src","img/1.jpg");
    $("#aa").attr("width","300px");
</script>

//身体部分
<body>
    <!--定义一个图片-->
    <img src="img/1.jpg" id="aa">
</body>

2.2 【removeAttr()】：删除某个标签属性；

<script type="text/javascript">
    //移除
    //$("#aa").removeAttr("width");			
</script>

2.3 【addClass()】：给标签添加class属性值；

<script type="text/javascript">
    //增加样式
    $("#aa").addClass("ss");
</script>

案例一：使用jQuery优化隔行换色：

1.设定头部样式表；

2.设置表格；

3.使用【addClass()】属性；

<!--头部样式表-->
<style type="text/css">
	.dh{
		background-color: #FFC0CB;
	}
	.sh{
		background-color: aquamarine;
	}
</style>

<script type="text/javascript">
    $("table tr:even").addClass("dh");
	$("table tr:odd").addClass("sh");			
</script>

<!--身体部分-->
<h4>表格隔行换色</h4>
		<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>

2.4 【removeClass()】：删除某个标签Class样式值；

注：只移除值，Class依然在！

<script type="text/javascript">
    //删除样式值
    $("#aa").removeClass("ss");//Class依然在
</script>

2.5 【prop()】与【attr()】的区别？

区别就是在于prop()多用于boolean类型的情况；

例如：全选/取消全选；

代码运用对比：

<script type="text/javascript">
    //给img添加name值
    $("#aa").attr("name","leaf");
	$("#aa").prop("name","leaf");			
</script>

2.6 【attr()】和【addClass()】的区别？

attr()是样式的替换；

addClass()是样式的叠加；

案例一：全选功能的实现：

1.给按钮添加点击事件；

2.给各个复选框设置class值；

3.用prop()设置选中；

<script type="text/javascript">
    //点击事件
    $("#ok").click(function(){
		$(".aaa").prop("checked",true);//设置选中
	})
    //点击事件
	$("#nook").click(function(){
		$(".aaa").prop("checked",false);//设置选中
	})	
</script>

2.7 用【val()】拿值/设值；

<script type="text/javascript">
    //拿值
    var str = $("#bb").val();
	console.info(str);//打印测试	
    //设值
    $("#bb").val("Leaf");
</script>

2.8 【html()】和【text()】的区别？

text()--->返回纯文本内容；

html()--->返回文本内容包括其所选HTML标签；

代码如下：

<script type="text/javascript">
	var a = $("p").html();//拿所有属性
    //打印测试
	console.info(a);
	var b = $("p").text();//只拿纯文本
    //打印测试
	console.info(b);
</script>