jQuery的$工具方法和属性

一、思维导图

一、jQuery的$工具方法

二、jQuery属性和CSS

一、思维导图

我是小陽，欢迎大家来看我的文章。我们先看一下思维导图来理一下思路，然后在进入方法讲解

一、jQuery的$工具方法

1.1$each()：遍历数组，对象，对象数组中的数据

对象：

                //定义对象var stu={"name":"张小凡","age":38};//遍历对象/* $.each(stu,function(k,v){console.info(v);}) */console.info(stu.name,stu.age);

结果如下：

两种遍历都是可以运行的

数组：

                 //定义数组var names=["张小凡","张大凡","白大纯","沈以诚","白小纯"];//遍历数组$.each(names,function(i,n){console.info(n);})

结果如下：

对象数组：

                //定义对象数组[{}]var stus=[{"name":"张小凡","age":30},{"name":"白小纯","age":20}];//遍历对象数组$.each(stus, function(i, stu) {// console.info(stu.name,stu.age);$.each(stu, function(a, b) {console.info(b);})})

结果如下：

由此可见$.each 遍历对象、数组 {一个键对应一个值，用:隔开，键与键之间用','隔开}

1.2 $.trim 去除前后空格

                   var str="   abc   ";// alert(str.length);console.info($.trim(str).length);

结果：

1.3 $.type(obj) 得到变量的数据类型

            var str =12.6;//numbervar stu={"name":"张小凡","age":38};//objectvar stus=[{"name":"张小凡","age":30},{"name":"张大凡","age":38}];//arrayconsole.info($.type(stus));

结果如下：

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

             var stu={"name":"白小纯","age":20};//falsevar stus=[{"name":"白小纯","age":25},{"name":"白大纯","age":30}];//trueconsole.info($.isArray(stus));

结果如下：

1.5 $isFunction()判断是否是函数

注意：这里要代入函数的时候带括号为false，不带为true

           var stus=[{"name":"张小凡","age":16},{"name":"张大凡","age":20}];// console.info($.isFunction(myf));//trueconsole.info($.isFunction(myf()));//false function myf(){alert(1);}

结果为：false;

1.6 $.parseJSON()将json格式的字符串-->js的对象或者数组（这里是重点！）

              var stus='{"name":"张小凡","age":19}';console.info($.type(stus));//stringvar stu = $.parseJSON(stus);//not availableconsole.info($.type(stu));//object       json格式的字符串-->js对象//遍历console.info(stu.name,stu.age);$.each(stu,function(k,v){console.info(v);})

结果如下：

将json格式的字符串-->js的对象数组（这里是重点！）

             var stusStr = '[{"name":"张小凡","age":38},{"name":"白小纯","age":39}]';console.info($.type(stusStr));//stringvar stus = $.parseJSON(stusStr);console.info($.type(stus));//array//遍历$.each(stus,function(a,b){// console.info(b.name,b.age);$.each(b,function(k,v){console.info(v);})})

结果入下：

二、jQuery属性和CSS

2.1 attr() 拿属性值和设置属性值

<head><meta charset="utf-8"><title></title><!-- 引入jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个script块 --><script type="text/javascript">$(function() { //相当于window.onload//2.1 attr() 拿属性值和设置属性值var mpath = $("#aa").attr("src");//拿值console.info(mpath);//给某个属性设置值$("#aa").attr("src","img/5.jpg");//设值$("#aa").attr("width","100px");})</script></head><body><img src="img/1.png" width="200px" id="aa"></body>

2.3 addClass() 增加样式值

<head><meta charset="utf-8"><title></title><style type="text/css">.xx {border: 1px solid red;}</style><!-- 引入jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个script块 --><script type="text/javascript">$(function() { //相当于window.onload//2.3 addClass()  增加样式值$("#aa").addClass("xx");})</script></head><body><img src="img/1.png" width="200px" id="aa"></body>

2.4 removeClass() 删除某个标签属性值

<head><meta charset="utf-8"><title></title><style type="text/css">.xx {border: 1px solid red;}</style><!-- 引入jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个script块 --><script type="text/javascript">$(function() { //相当于window.onload//2.3 addClass()  增加样式值$("#aa").removeClass("xx");//class仍然在 值会被移除掉})</script></head><body><img src="img/1.png" width="200px" id="aa"></body>

2.5 prop() 和attr类似 prop与attr的区别

<head><meta charset="utf-8"><title></title><!-- 引入jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个script块 --><script type="text/javascript">$(function() { //相当于window.onload//2.5 prop() 和attr类似  prop与attr的区别//给img标签增加name值$("#aa").attr("name","abc");$("#aa").prop("name","abc");$("#ok").click(function(){$(".aaa").prop("checked",true);})$("#nook").click(function(){$(".aaa").prop("checked",false);}) //注意:在为Boolean时 attr会进入之前的状态 但是prop不会//attr和addClass的区别//attr:会覆盖之前的样式//addClass:会前调用原来的样式 再调用加的样式})</script></head><body><img src="img/1.png" width="200px" id="aa"><input type="checkbox" class="aaa" value="凡人修仙传" />凡人修仙传<input type="checkbox" class="aaa" value="写CSDN" />写CSDN<input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩手机<input type="button" value="全选" id="ok" /><input type="button" value="取消全选" id="nook" /><br /></body>

2.6 val() 拿值设值

 <head><meta charset="utf-8"><title></title><!-- 引入jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个script块 --><script type="text/javascript">$(function() { //相当于window.onload//2.6 val()  拿值 设值var aa = $("#bb").val();//拿值console.info(aa);$("#cc").val("你好，世界");//设值})</script></head><body><input type="text" id="bb" value="你好" /><input type="text" id="cc" /></body>

结果如下：

2.7 html() 和text() 的区别

 <head><meta charset="utf-8"><title></title><!-- 引入jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个script块 --><script type="text/javascript">$(function() { //相当于window.onload//2.7 html() 和text() 的区别var a = $("p").html();//会拿到子标签console.info(a);var b = $("p").text();//不会拿到子标签 只会打印纯文本console.info(b);})</script></head><body><p>张小凡和<span>白小纯</span>的修仙故事</p></body>

如图：

优化隔行换色：

.使用[addClass()]属性；

 <head><meta charset="utf-8"><title></title><style type="text/css">.cc {background-color: azure;}.dd {background-color: beige;}</style><!-- 引入jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个script块 --><script type="text/javascript">$(function() { //相当于window.onload//优化隔行换色$("table tr:even").addClass("cc");$("table tr:odd").addClass("dd");})</script></head><body><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></body>

如图：

好了，我的讲解已经结束了，愿大家能健康的生活，一起通过论坛来进步，加油！我是小陽，欢迎大家来看我的文章。