1.工具下的类方法使用
1.1js与jQuery转换
<head> <script src="js/jquery-3.6.4.js"></script> </head> <script> $(function(){ $("#obtn").click(function(){ //jquery转化为原生态js对象处理 //根据数组下标获取 //var val=$("#oInput")[0].value; //根据get方法来转换 var val=$("#oInput").get(0).value; console.log(val); }) }) $(function(){ $("#obtn").click(function(){ //原生态js对象转换成jQuery对象处理 var oInput=document.getElementById("oInput"); //将一个原生态js对象传入$()内直接可以转换 console.log($("oInput").val()); }) }) }) </script> <input type="text" id="oInput"> <button id="obtn">点击</button>
1.2.$对象中的类方法
1.2.1.each()方法 遍历元素的方法
<script> $(function(){ $("#obtn").click(function(){ //使用方法：直接调用或通过$()返回的对象调用 //使用$.each(obj,function(){})方法的形式来遍历输出 对象 对象数组 //数组的定义 var arr=["aa","bb","cc","dd"]; $.each(arr,function(a,b){ console.log(a,b,arr[a]); }) }) $(function(){ $("#obtn").click(function(){ //对象的定义 var stu={ "name":"李永安", "sex":"男", "age":18 }; }) $(function(){ $("#obtn").click(function(){ //a代表属性名称 b代表属性值 $.each(stu,function(a,b){ console.log(a,b); }); }) $(function(){ $("#obtn").click(function(){ //对象数组 var stus=[ { "name":"李永安", "sex":"男", "age":18 }, { "name":"aa", "sex":"男", "age":18 }, { "name":"bb", "sex":"男", "age":18 } ]; }) $(function(){ $("#obtn").click(function(){ $.each(stu,function(index,obj){ // conloge.log(index,obj) //name 属性名称 value 属性值 $.each(obj,function(name,vlue){}) console.log(index,name,value,obj[name]) }); }) </script>
1.2.2.type()方法 获取属性类型
console.log($.type(123)); nsole.log($.type(new Date())); console.log($.isFunction(method)); console.log($.isArray(arr));
1.2.3.trim()方法 去除左右空格
var str=" a bc "; console.log(str.length); console.log($.trim(str).length);
1.2.4.paeseJSON 用户后台查到的数据传输给客户端，客户拿到数据进行解析，是否满足JSON格式；AJAS 无刷新技术
$(function(){ $("#obtn").click(function(){ var mystul={"name":"张三"}; console.log($.type(mystul)); var mystu2="{\"name\":\"张三\"}"; console.log($.type(mystul2)); //作用：将一个满足JSON字符串的数据转成对应的对象或者对象数组 var newstu=$.parseJSON(mystu2); console.log($.type(newstu)) })
2.css属性和样式设置
2.1.attr():获取某个标签属性的值，或设置某个标签属性的值
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> <body> $("#btn1").click(function(){ console.log($("img").arrt("src")); $("img").attr("src","img/羽绒服.jpg"); <script> <img src="img/登山鞋.jpg" alt="" title="服装"> <button id="btn1">btn1</button> </script> </body>
2.2.removeAttr():删除某个标签属性
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> <body> $("#btn1").click(function(){ console.log($("img").arrt("src")); $("img").removeAttr("title"); <script> <img src="img/登山鞋.jpg" alt="" title="服装"> <button id="btn1">btn1</button> </script> </body>
2.3.addClass():给某个标签添加class属性值
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> $("#btn1").click(function(){ $("img").addClass("abc"); }) <img src="img/登山鞋.jpg" alt="" title="服装"> <button id="btn1">btn1</button>
2.4.removeClass():删除某个标签class属性值
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> <script> $(function(){ $("#obtn").click(function(){ $("img").removeClass("abc"); }) </script> <input type="text" id="oInput"> <button id="obtn">点击</button>
2.5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> <script> $(function(){ $("#obtn").click(function(){ $("img").prop("src","img/羽绒服.jpg"); $("input:checkbox").prop("checked",true); $("input:checkbox").attr("checked",true); }) </script> <input type="text" id="oInput"> <button id="obtn">点击</button>
2.6.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> <script> $(function(){ $("#obtn").click(function(){ console.log($("odiv").html()); }) </script> <input type="text" id="oInput"> <button id="obtn">点击</button> <div id="odiv" style="width: 100%; height:100px; border: 1px solid red;"></div>
2.7.text():获取某一个标签体内容(注意:该标签体不能包含子标签)
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> <script> $(function(){ $("#obtn").click(function(){ console.log($("odiv").text()); }) </script> <input type="text" id="oInput"> <button id="obtn">点击</button> <div id="odiv" style="width: 100%; height:100px; border: 1px solid red;"></div>
2.8.val():主要用户获取/设置输入框的值
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> <script> $(function(){ $("#obtn").click(function(){ // console.log($("odiv").val()); // 获取值 console.log($("#username").val()); // 设置值 $("#username").val("你好"); }) </script> <input type="text" id="oInput"> <button id="obtn">点击</button> <div id="odiv" style="width: 100%; height:100px; border: 1px solid red;"></div> <input type="text" id="username" value="1232432">
3.样式设置
<head> <script src="js/jquery-3.6.4.js"></script> <style> .abc{ border: 10px solid red; </style> </head> <body> <script> $(function(){ $("#btn1").click(function(){ //console.log($("img").css("width")); //设置一个属性 $("img").css("width","50px"); //设置多个属性 $("img").css({"width":"50px","height":"300px"}); }) <img src="img/登山鞋.jpg" alt="" title="服装"> <button id="btn1">btn1</button>
