jQuery的工具&&属性

jQuery的工具&&属性

今天小编给大家带来了一些jQuery的工具及其方法，还有一些属性，就跟着小编的步伐来学习一下吧！

一.jQuery的工具方法

1简化的遍历数组

// 遍历数组
			let arr = [1, 23, 34, 54, 66, 7, 87, 8]
			// $.each(array);/
			$.each(arr, (a, b) => {
				console.log(a, b)
			})
			// 输出下标与元素
			// a 下标 b 元素

2.遍历对象

	let person = {
				name: "李四",
				sex: "女",
				age: 18
			}
			$.each(person, (a, b) => {
				console.log(a, b)
			})
			// 这里的a 代表属性名 B代码属性值

3.去除空格

// $.trim()去空格
			console.log($.trim("  a  s  a").length)//7
			console.log($.trim("  a  s  a").replaceAll(" ", ""))//asa

4.得到数据类型，

// $.type 相当于typeof  数组array
			console.log(typeof arr) //拿到object
			console.log($.type(arr)) // 拿到array，因为jQuery区分严格
		

5.判断是否为数组

console.log($.isArray(arr)) //判断是否是数组 true

5.判断是否为函数

			console.log($.isFunction(f1)) //判断是否是函数true

6.序列化和反序列化

// $.JSON json是一段文字 json 就是字符串的对象
			// $.parseJSON把字符串变成js中的对象
			// JSON.stringify() 将对象变成字符串
			let str = '{"name":"李四","age":"28"}'
			console.log($.parseJSON(str));
			console.log(JSON.stringify(person))

二，jQuery的属性

1.attr更改获取属性，remove移除属性

<a href="https://www.qq.com">点我 </a>
<button type="button" onclick="fn1()">点我更改</button>
		<button type="button" onclick="fn2()">点我移除</button>
<script>
function fn1() {
				// 使用jQuery修改标签属性的值
				$("a").attr("href", "https://cn.bing.com")

			}
//-------------------------------------------
	function fn2() {
				$("a").removeAttr("href")
			}
</script>

2.复选框的全选

<div>
			<input type="checkbox" onclick="fn04(this.checked)" 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="checkbox" />
		</div>
		<script>
			// 拿到大于0的所有复选框
			$(":checkbox:gt(0)").click(function() { //拿到自己
			// console.log(this)
				// 这里this 是js对象
				let status = this.checked
				// $(this).prop("checkde")
				if (!status) {
					// 这里只要状为假 ，全选就为假
					return $(":checkbox").eq(0).prop("checked", status)
				}
				//选中了
				let f = true
				$.each($(":checkbox:gt(0)"), (a, b) => {
					f=f&&b.checked
				})
				$(":checkbox").eq(0).prop("checked", f)
			})
        </script>

3.html，tex，val的使用

       <input type="text"id="d2"/>
		<p id="d1">
			你好，世界
		</p>
		<script>
            $("#d1").html()//读取
			$("#d1").html("<b>hello world</b>")//修改
			$("#d1").text("<b>hello world</b>")//修改
			$("#d2").val("你好，世界世界，你好")//修改
        </script>
			

三，css

1： .css

<button type="button" onclick="fn1()">点我更改</button>
		<button type="button" onclick="fn2()">点我移除</button>
// css设置样式
			$("button").css("color","red","background","red");

2. offsetparent相对整个大容器的位置

<div style="width:70%;position:absolute;left:100px;top:100px">
		  <div style="margin:50px;background-color:yellow">
		     <p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>
		   <div>
		</div>

// 位置
			$("button").click(function(){
			    $("p").offsetParent().css("background-color","red");
			});
			

3.position获取第一段的偏移

		<p>Hello</p><p>2nd Paragraph</p>

// 获取匹配元素相对父元素的偏移。
			var p = $("p:first");
			var position = p.position();
			$("p:last").html( "left: " + position.left + ", top: " + position.top );

4.scrollTop

<p>Hello</p><p>2nd Paragraph</p>
// 获取匹配元素相对滚动条顶部的偏移
			var p = $("p:first");
			$("p:last").text( "scrollTop:" + p.scrollTop() );
			

5.尺寸

	// .尺寸/
					// 内容尺寸
					console.log($("div").height())

					console.log($("div").width())
					// 内部尺寸
					var p = $("p:first");
					$("p:last").text("innerHeight:" + p.innerHeight());
					
					$("p:last").text("innerWidth:" + p.innerWidth());
					// 外部尺寸。。参数为true +margin
					var p = $("p:first");
					$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
					
					var p = $("p:first");
					$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

好了，以上就是小编今天给大家分享的内容了，都看到这了，不点个关注和赞在走？