jquery封装

最新推荐文章于 2022-06-01 20:24:18 发布

sinat_36258298

最新推荐文章于 2022-06-01 20:24:18 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/sinat_36258298/article/details/53526760

版权

 
 Jquery 框架  

 
 选择器 

 
 导入 

 
 <script src="绝对路径"></script>、 

  <meta charset="UTF-8"> 

  <title></title> 

  <script src="js/jQuery-2.2.2-min.js"></script> 

  <script> 

  /*原生js方法获取到p元素*/ 

  /*window.onload = function(){ 

  var op = document.getElementById("p1"); 

  console.info(op); 

}*/

  /*通过jquery方式来实现的元素获取*/ 

  /*$(document).ready(function(){ 

  var op = $("#p1"); 

  console.info(op); 

  });*/ 

  $(function(){ 

  var op = $("#p1"); 

  console.info(op); 

});

 
 <body> 

 
 <p id="p1">this is p</p> 

 
 <p class="p1">this is p</p> 

 
 <div></div> 

 
 <input type="text" name="username"/> 

 
 <span name="username">this is span</span> 

 
 <ul id="ul1"> 

 
 <li>新闻</li> 

 
 <li>体育</li> 

 
 <li>更多</li> 

 
 </ul> 

 
 <table border="1" id="mytable"> 

 
 <tr> 

 
 <td>123</td> 

 
 <td>456</td> 

 
 </tr> 

 
 <tr> 

 
 <td>567</td> 

 
 <td>678</td> 

 
 </tr> 

 
 <tr> 

 
 <td>789</td> 

 
 <td>890</td> 

 
 </tr> 

 
 </table> 

 
 <script src="js/jQuery-2.2.2-min.js"></script> 

 
 <script> 

 
 /*获取到id*/ 

 
 var op1 = $("#p1"); 

 
 console.info(op1); 

 
 var jsop = document.getElementById("p1"); 

 
 console.info(jsop); 

 
 /*根据class获取到元素*/ 

 
 var op2 = $(".p1"); 

 
 console.info(op2); 

 
 /*通过name属性*/ 

 
 var oinp = $("[name=username]"); 

 
 console.info(oinp); 

 
 oinp.css("background-color","red"); 

 
 /*通过标签名字获取到元素*/ 

 
 var odiv = $("div"); 

 
 console.info(odiv); 

 
 /*选中元素的子元素*/ 

 
 $("#ul1 li:first-child").css("color","red"); 

 
 /*选中表格*/ 

 
 $("#mytable tr:even").css("background-color","red"); even偶数行从0开始计数 

 
 $("#mytable tr:odd").css("background-color","pink");odd基数行 

 
 </script> 

 
 </body> 

 
 </html> 

 
 属性 

 
 <title></title> 

 
 <style> 

 
 .as{ 

 
 color: red; 

}

 
 </style> 

 
 </head> 

 
 <body> 

 
 <p name="test" title="index-1">this is p</p> 

 
 <span id="span1">span <a href="">点我要死啊</a></span> 

 
 <ul id="ul1"> 

 
 <li class="as">首页</li> 

 
 <li>伟业</li> 

 
 <li>下一页</li> 

 
 </ul> 

 
 <input type="text" name="username"/> 

 
 <input type="button" id="btn"/> 

 
 <script src="js/jQuery-2.2.2-min.js"></script> 

 
 <script> 

 
 /*var op = document.getElementsByName("test")[0]; 

 
 /!*对象.属性 op["下标"]*!/ 

 
 console.info(op.title); 

 
 console.info(op["title"]);*/ 

 
 /*attr()一个参数获取属性值，两个参数这是属性值*/ 

 
 var value = $("[name=test]").attr("title"); 

 
 console.info(value); 

 
 $("[name=test]").attr("title","test1"); 

 
 /*移除属性*/ 

 
 $("[name=test]").removeAttr("title"); 

 
 /*动态添加class属性*/ 

 
 /*$("#span1").attr("class","as");*/ 

 
 $("#span1").addClass("as"); 

 
 /*将class设置为“”，removeAttr()直接移除属性;*/ 

 
 $("#span1").removeClass("as"); 这个只是将as更改为空字符串 

 
 /*addClass方法设置class属性，调用方法的时候可以传递一个函数，最后返回一个值*/ 

 
 $("#ul1 li").addClass(function(){ 

 
 var res = "index"+$(this).index(); 

 
 return res; 

});

 
 /*toggleClass()*/ /*反向设置*/ 

 
 $("#ul1 li").toggleClass("as"); 

 
 /*var value = document.getElementById("ul1").innerHTML; 

 
 获取这个ul里面所有元素的信息  

 
 console.info(value);*/ 

 
 /*html(),封装了js里面innerHTML属性*/ 

 
 console.info($("#ul1").html()); 

 
 $("#ul1").html("<li>123</li>");/*替换id为ul1下面所有的l*/ 

 
 /*text();获取到元素内部的文本内容*/ 

 
 console.info($("#span1").text()); 

 
 /*val()获取到文本框的值，js里面value属性*/ 

 
 $("#btn").on("click",function(){ 

 
 var value = $("input[name=username]").val(); 

 
 console.info(value); 

})

 
 筛选  

 
 不推荐js和jquery混合使用 

 
 jquery特点：获取到一个集合，取出集合中的类容，默认返回集合中的第一个元素！ 

 
 div{ 

 
 width: 100px; 

 
 height: 100px;background-color: #ffa24a; 

 
 margin-bottom: 20px; 

}

 
 </style> 

 
 </head> 

 
 <body> 

 
 <ul> 

 
 <li>黄焖鸡</li> 

 
 <li>面条</li> 

 
 <li>空盘子</li> 

 
 </ul> 

 
 <div class="box"> 

 
 <span class="span">span</span> 

 
 </div> 

 
 <div class="box1"> 

 
 <span>span</span> 

 
 </div> 

 
 <script src="js/jQuery-2.2.2-min.js"></script> 

 
 <script> 

 
 /*不推荐：js和jquery混合使用*/ 

 
 console.info($("li")[0]); 

 
 console.info($("li").html()); 

 
 /*获取到集合中指定下标的元素*/ 

 
 console.info($("li").eq(-1)); 

 
 /*first()*/ 

 
 console.info($("li").first()); 

 
 /*last()*/ 

 
 console.info($("li").last()) 

 
 /*hasClass()判断当前元素是否有指定class属性,jquery,获取到一个集合，取出集合中的所有内容，默认返回第一个元素的内容*/ 

 
 var res = $("li").hasClass("li"); 

 
 /*html();*/ 

 
 $("li").addClass("as"); 

 
 console.info(res); 

 
 /*each()循环取出内容*/ 

 
 $("li").each(function(){ 

 
 console.info($(this).html()); 

});

 
 /*filter()从集合中筛选出符合指定条件的元素*/ 

 
 var odiv = $("div").filter(".div"); 

 
 console.info(odiv); 

 
 /*has()包含：获取的元素内部的条件是否符合要求*/ 

 
 //$("div").has(".span").css("background-color","red");/*前面div指的是操作的是div如果要操作li，就修改为li*/ 

 
 /*find():针对的是子类*/ 

 
 //链式表达 

 
 $("div").find(".span").css("background-color","red"); 

 
 /*is():用来判断释放满足指定条件*/ 

 
 var boo =$(".span").parent().is(".box"); 

 
 console.info(boo); 

 
 boo = $(".box").children().is(".span"); 

 
 console.info(boo); 

关注