jQuery02.$工具方法&属性&css-CSDN博客

本文链接：https://blog.csdn.net/github_67177094/article/details/123542567

这篇博客介绍了jQuery的基础用法，包括$工具方法如$.each()、$.trim()等，以及jQuery属性的设置与获取，如attr()、removeAttr()等。此外，还详细讲解了如何通过jQuery改变CSS样式，如css()方法以及位置和尺寸的调整。最后，展示了如何使用jQuery实现全选功能。

摘要由CSDN通过智能技术生成

回顾:jQuery01.入门&选择器

目录

$工具方法

         1. $.each() 遍历数组、对象、对象数组中的数据

         2. $.trim() 去除字符串两边的空格

         3. $.type(obj) 得到数据类型

         4. $.isArray(obj) 判断是否为数组

         5. $.isFunction(obj) 判断是否为函数

         6. $.parseJSON(obj) 解析json字符串转换成js对象/数组

jQuery属性

通过jQuery改变css

        1. css() 设置标签的css样式

         2. 位置

         3. 尺寸

使用jQuery实现全选

$工具方法

1. $.each() 遍历数组、对象、对象数组中的数据

<script>
    var arr=[1,2,3,4,5,6]
        $.each(arr,function(i,e){
            //第一个参数是下标  第二个参数是内容
            console.log(i,e)
        })
</script>

2. $.trim() 去除字符串两边的空格

<script type="text/javascript">
	var str=' 123 '
	console.log(str.length)
    //控制台打印结果为：5
	console.log($.trim(str).length)
    //控制台打印结果为：3
</script>

3. $.type(obj) 得到数据类型

<script type="text/javascript">
	var str='123'
   	var num=123
	var arr=[1,2,3]
	function fn(){
	
    }
    console.log($.type(str),$.type(num),$.type(arr),$.type(fn))
    //结果为：string number array function
</script>

4. $.isArray(obj) 判断是否为数组

<script type="text/javascript">
	var str='123'
	var arr=[1,2,3]
	console.log($.isArray(str),$.isArray(arr))
    //控制台打印结果为:false true
</script>

5. $.isFunction(obj) 判断是否为函数

<script type="text/javascript">
	var str='123'
    function fn(){
    }
	console.log($.isFunction(str),$.isFunction(fn))
    //控制台打印结果为:false true
</script>

6. $.parseJSON(obj) 解析json字符串转换成js对象/数组

<script type="text/javascript">
	var student='{"sno":1,"sname":"小明","sage":18}'
	console.log(student)
	console.log($.parseJSON(student))
</script>

jQuery属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="jquery-3.5.1.js"></script>
    </style>
    <p title="123">我是p</p>
    <script>
        //读取p标签中定义的title属性
        console.log($("p").attr("title"))
        //设置p标签中定义的title属性
        $("p").attr("title","456")
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="jquery-3.5.1.js"></script>
    <p title="123">我是p</p>
    <script>
        //移除p标签中定义的title属性
        $("p").removeAttr("title")
    </script>
</body>
</html>

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

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

5. prop() 和attr()类似,区别在于prop用于属性值为Boolean类型的情况,比如多选

6. html() 获取某一个标签内容 (注意:改标签体可以包含子标签)

7. text() 获取某一标签内容 (注意:该标签体不能包含子标签)

8. val() 主要用于获取/设置输入框的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="jquery-3.5.1.js"></script>
    <style> 
        .a{
            box-shadow: 0px 0px 10px red;
        }
    </style>
    <p title="123">我是p</p>
    <script>
        $("p").mouseover(function(){
            // $(this) 当前触发的标签
            $(this).addClass("a")
        })
        
         $("p").mouseout(function(){
            // $(this) 当前触发的标签
            $(this).removeClass("a")
        })
        //$("p").html()  相当于  p.innerHTML
        //$("p").text()  相当于  p.textContent
        //$("input").val()  相当于  input.value
        $("p").html("我是ppppp")
    </script>
</body>
</html>

通过jQuery改变css

1. css() 设置标签的css样式

获取样式值: css("样式名")

设置单个样式: css("样式名","样式值")

设置多个样式: css({"样式名":"样式值","样式名":"样式值"})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Blog</title>
		<script src="./js/jquery-3.5.1.js"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<script type="text/javascript">
			console.log($('#d1').css('width'))
            //控制台打印d1的宽
			$('div').css('width','400px')
            //将div的宽设置为400px
			console.log($('#d1').css('width'))
            //控制台打印d1的宽
			$('div').css({'width':'600px','height':'600px'})
            //设置d1的宽高
			console.log($('#d1').css('width'),$('#d1').css('height'))
            //控制台打印d1的宽高
		</script>
	</body>
</html>

2. 位置

offset() 相对整个大容器的相对位置

position() 相对父容器的相对位置

scrollXX() scrollTop()是滚动条到顶部距离

3. 尺寸

内容尺寸

width() 容器宽

height() 容器高

内部尺寸

innerWidth() 宽+内边距

innerHeight() 高+内边距

外部尺寸

outerWidth() 宽+内边距+边框

outerHeight() 高+内边距+边框

注意:参数为true,加上margin(外边距)

使用jQuery实现全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.5.1.js"></script>
</head>
<body>
    <input type="checkbox" id="all">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="text">
    <script>
    
        $("#all").click(function(){
            //设置界面的所有复选框和all的状态一致
            //$(this).prop("checked") all的状态
            $(":checkbox").prop("checked",all.checked)
        })
    
    </script>
</body>
</html>

你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。