工具-jQuery属性和CSS

jQuery属性

案例

jQuery属性

<script type="text/javascript"src="jquery-3.3.1.js"></script>
			<style>
			/* 改变后的颜色 */
			.a{
				background-color: green;
			}
			/* 偶数行颜色 */
			.b{
				background-color: yellow;
			}
			</style>
			<script type="text/javascript">
				$(function(){
					<!--
					// 			1.attr():
					// 			1.1获取id为sa的img元素的src属性值。
								// var a=$("#sa").attr("src")
								// console.info(a)
					// 			1.2动态的给a元素设置href属性值。
								// $("a").attr("href","http://www.baidu.com")
					// 			2.removeAttr():移除“百度”的超链接属性。
								// $("a").removeAttr("href")
					//			3.addClass()：给a标签添加一个sb类名。
								// $("a").addClass("sb")
					// 			4.removeClass()：删除a标签的sb类名。
								// $("a").removeClass("sb")
					// 			5.prop()：给a标签添加一个name属性。
								// $("a").prop("name","na")
					// 			6.案例：全选和取消全选。
								//给全选按钮添加事件
								// $("#qx").click(function(){
								// 	var cas=$(".ca")
								// 	$.each(cas,function(i,v){
								// 		$(v).prop("checked",true)
								// 	})
								// })
								//给反选按钮添加事件
								// $("#fx").click(function(){
								// 	var cas=$(".ca")
								// 	$.each(cas,function(i,v){
								// 		$(v).prop("checked",false)
								// 	})
								// })
					// 			7.html()、text()、val()： 
								// var a=$("#da").val()
								// console.info(a)
					// 				7.1通过text()属性获取span标签里的内容。
									// var sa=$("#sa").text()
									// console.info(sa)
					//				7.2通过text()重新设置span标签里的内容。
										// $("#sa").text("这是新的内容")
					// 				7.3通过html()属性获取body标签里的内容。
									// var a=$("#sa").html()
									// console.info(a)
					// 			8.案例：使用jQuery属性优化表格隔行换色案例。
					//				奇数行按钮
									$("#js").click(function(){
									$("table tr:even").attr("class","a")
									})
									// 行偶数按钮
										$("#os").click(function(){
										$("table tr:odd").attr("class","b")
										})
								
				})
			</script>

案例

$(function(){
				// 1)、$.each：遍历出字符串数组names里面的所有元素。
				// var name=["张三","男",27]
				// $.each(name,function(i,v){
				// 	console.info(i+"_____"+v)
				// })
				// 2)、$.each：遍历出对象person里面的所有属性。
				 // var person={"name":"张三","sex":"男","age":27}
				 // $.each(person,function(i,v){
					// console.info(i+"___"+v) 
				 // })
				// 3)、$.each：遍历出对象数组persons里面的所有对象的所有属性。
				// var person=[
				// 	{"name":"张三","sex":"男","age":17},
				// 	{"name":"李四","sex":"女","age":18},
				// 	{"name":"王五","sex":"男","age":19}
				// ]
				// $.each(person,function(i,v){
				// 	console.info(v.name+"__"+v.sex+"__"+v.age)
				// 	$.each(v,function(k,v){
				// 		console.info(k+"___"+v)
				// 	})
				
				// })
				// 4)、$.trim：打印出去除前后空格之后字符串str的长度。
					// var a=" aa "
					// console.info($.trim(a).length)
					
				// 5)、$.type(obj)：获取变量sb的数据类型。
				// var sb="s"
				// console.info($.type(sb))
				// 6)、$.isAarray(obj)：判断persons是不是数组。
				// var a=[12,5,6,3]
				// console.info($.isArray(a))
				// 7)、$.isFunction(obj)：判断sa和sb是不是函数。
				// var b={"name":"张三"}
				// console.info($.isFunction(b))
				// 8)、$.parseJSON(obj)：解析JSON字符串personJson，然后打印出解析后的对象的name
				// var a='{"sd":"asd"}'
				// var str=$.parseJSON(a)
				// console.info($.type(str))
			})