jquery.工具.属性.css

最新推荐文章于 2024-07-23 16:18:27 发布

liwangdeng

最新推荐文章于 2024-07-23 16:18:27 发布

阅读量463

点赞数

文章标签： jquery css javascript

本文链接：https://blog.csdn.net/liwangdeng/article/details/123548490

版权

今天来学习jquery的工具方法,属性和css

一.首先来学习jquery$的工具方法

1.了解一些简单的单词

let aa=[]定义数组

$.each(aa,(a,b)=>{})循环 a为下标 b为元素

let aa{}定义对象

trim去两边空格

replaceAll替换

得到数据类型$.type()

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

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

$.parseJSON()字符串转js对象

2.代码展示用法

<body>
		<script src="./jquery-3.5.1.js"></script>
		<script>
		//let aa=[]定义数组
			let aa=[1,2,3,4,5]
			//$.each(aa,(a,b)=>{})循环  a为下标  b为元素
			$.each(aa,(a,b)=>{
				console.log(a,b)
			})
			//定义对象
			let obj={
				name:"as",
				age:23,
			}
			//逗号必须有
			console.log(obj)
			//trim去两边空格
			console.log($.trim(" 1 2 3 ").length)
			//replaceAll替换
			console.log("a b c".replaceAll(" ","").length)
			//得到数据类型$.type()
			console.log($.type(1)) //number
			console.log($.type("a")) //string
			console.log($.type(aa))  //array
			console.log($.type(obj)) //object
			//$.isArray()判断是否为数组
			console.log($.isArray(aa))  //true
			//$.isFunction()判断是否为函数
			console.log($.isFunction(obj))
			//$.parseJSON()字符串转js对象
			let str='{"name":"name","age":23}'
			console.log(str)
			console.log($.parseJSON(str))
		</script>
	</body>

注：在定义对象时，对象属性之间一定要用逗号分隔

二.学习jquery的属性和css

1.了解部分属性

attr()获得标签某元素的值或设置值

removeAtr()删除标签某一个属性

addClass()设置标签class属性

removeclass()删除标签class属性

prop()与attr()类似多用于属性为boolean类型，例如多选

html()获取和设置标签体内容(该标签体能包涵子标签)

text()获取和设置标签体内容(该标签体能不包涵子标签)

val()获取和设置输入框的内容

2.css的作用

css设置标签样式

css()获得样式值

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

css("样式名","样式值"，"样式名","样式值")设置多个

3.代码展示用法

<body>
		<img src="../imgs/a1.jpeg">
		<p>aa</p>
		<div id="">
			<input type="" name="" id="" value="32" />
		</div>
		<script src="./jquery-3.5.1.js"></script>
		<script>
//attr获取或设置属性值
			console.log($("img").attr("src"))
			$("img").attr("src","../imgs/a2.jpeg")
			console.log($("img").attr("src"))
			//removeAttr删除某一标签属性
			$("img").remove("src")
			console.log($("img").remove("src"))
			//addClass设置class属性
			$("img").addClass(".aa")
			console.log($("img"))
			//removeClass删除class属性
			$("img").removeClass(".aa")
			console.log($("img"))
			//html获得和设置标签体内容
			// $("p").html()
			console.log($("p").html())
			$("p").html("hi")
			console.log($("p").html())
			$("div input").html("hello");
			console.log($('input').text())
			//val
			console.log($("input").val())
			$("input").val("33")
			console.log($("input").val())
		</script>
	</body>

注：html只拿标签内的值，例：<p>aa</p>拿aa

text可拿value，例<input value="33">

三.我们来完成一个表格隔行换色的功能

<body>
    <style>
        .a {
            background: red;
            color: blue;
            text-align: left;
        }

        .b {
            background: blue;
            color: red;
            text-align: right;
        }
    </style>
    <table width="600px" border>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>香蕉</td>
            <td>香蕉</td>
        </tr>
    </table>
    <script src="jquery-3.5.1.js"></script>
    <script>
    
        //奇数a
        //偶数b
        $("tr:odd").addClass("a")
        $("tr:even").addClass("b")
    
    </script>
</bady>

四.完成一个多选功能

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">
    <script src="jquery-3.5.1.js"></script>
    <script>
    
        $("#all").click(function(){
            //设置界面的所有复选框和all的状态一致
            //$(this).prop("checked") all的状态
            $(":checkbox").prop("checked",all.checked)
        })
    
    </script>
</body>

总结：这章很多东西都是换词不换方，就是稍微记记单词，谨记我提示的注，其他没问题，今天的学习就这些了

liwangdeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.工具.属性.css

今天来学习jquery的工具方法,属性和css一.首先来学习jquery$的工具方法 1.了解一些简单的单词let aa=[]定义数组$.each(aa,(a,b)=>{})循环 a为下标 b为元素let aa{}定义对象trim去两边空格replaceAll替换得到数据类型$.type()$.isArray()判断是否为数组$.isFunction()判断是否为函数$.parseJSON()字符串转js对象2.代码展示用法<bo
复制链接

扫一扫