jQuery相关方法10

 ???<script> ???????//构造函数 ???????function Person(age){ ???????????this.age=age; ???????????this.sayHi=function(txt){ ???????????????if(txt){ ???????????????console.log("你好"+txt); ???????????????return this;//返回的是这个对象，就可以链式编程 ???????????????}else{ ???????????????????consle.log("hello"); ???????????????} ???????????} ???????????this.eat=function(){ ???????????????console.log("吃大餐"); ???????????????return this; ???????????} ???????} ???????//实例对象 ???????var per=new Person(10); ???????per.sayHi("谢谢").eat();//你好谢谢 ??吃大餐 ???</script>

 ???<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> ???<script> ???????//每个元素需要做不同的操作的时候，使用each方法，遍历jQuery的对象 ???????//语法$(selector).each(function(index,element)) ???????//each方法就是用来遍历jQuery对象的，但是里面的每个元素最开始是DOM对象，如果要使用jQuery的方法，必须转换为jQuery对象 ???????//例：分别把十个li设置成不一样的透明度 ???????$(function(){ ???????????$("#uu>li").each(function(index,ele){ ???????????????var opacity=(index+1)/10; ???????????????$(ele).css("opacity",opacity); ???????????}); ???????}); ???</script> ???<ul id="uu"> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???????<li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li> ???</ul>

 ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.comment li{ ???????????list-style: none; ???????????float: left; ???????????font-size: 50px; ???????}

 ???<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> ???<script> ???????$(function(){ ???????????$(".comment>li").mouseenter(function(){//进入事件 ???????????????//当前的li是实心的,前面的li也是实心的,鼠标后面的里li是空心的 ???????????????$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆"); ???????????}).click(function(){//点击事件 ???????????????//做一个记录:为当前点击的五角星添加一个自定义属性和值,并且移除兄弟li的这个属性 ???????????????$(this).attr("index","1").siblings("li").removeAttr("index"); ???????????}).mouseleave(function(){//离开事件 ???????????????//鼠标离开先把所有的五角星变成空心的 ???????????????$(".comment>li").text("☆"); ???????????????//如果有其中一个li是有index这个属性,则改变这个li和他前面的li变成实心五角星 ???????????????$(".comment>li[index=1]").text("★").prevAll("li").text("★"); ???????????}); ???????}); ???</script> ???<ul class="comment"> ???????<li>☆</li> ???????<li>☆</li> ???????<li>☆</li> ???????<li>☆</li> ???????<li>☆</li> ???</ul>

 ???<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> ???<script> ??????var n=$.noConflict();//把$的权利让给了n,$可以在其他变量或者库使用,而n就是jQuery的新的符号了 ???????var $=10; ???????console.log($);//10 ???????//页面加载事件 ???????n(function(){ ???????????n("#btn").click(function(){ ???????????????console.log("n是新的jQuery符号!!!!"); ???????????}); ???????}); ???</script> ???<input type="button" value="点击" id="btn">

 ???<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> ???????$(function(){ ???????????$("#btn").click(function(){ ???????????????if($("#p1").length==0){ ???????????????????$("<p id=p1>这个一个p</p>").appendTo($("#dv")); ???????????????????console.log($("#p1")[0]);//<p id=p1>这个一个p</p> ???????????????????console.log($("#p1")[1]);//undefined ???????????????????console.log($("#p1").get(0));//<p id=p1>这个一个p</p> ???????????????????console.log($("#p1").get(1));//undefined ???????????????} ???????????}); ???????}); ???</script> ???<input type="button" value="点击" id="btn"> ???<div id="dv" style="width: 200px;height: 200px;background: #ccc;"></div>

 ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????#dv{ ???????????width: 200px; ???????????height: 200px; ???????????border: 10px solid #000; ???????????margin: 30px; ???????????padding: 20px; ???????????background: #ccc; ???????}

 ???<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> ???<script> ???????$(function(){ ???????????//innerWidth和innerHeight返回元素的宽高,包括内边距 ???????????console.log($("#dv").innerWidth()+"========"+$("#dv").innerHeight());//240========240 ???????????//outerWidth和outerHeight返回元素的宽高,包括内边距和边框 ???????????console.log($("#dv").outerWidth()+"========"+$("#dv").outerHeight());//260========260 ???????????//outerHeight(true)和outerHeight(true)返回元素的宽高,包括内外边距和边框 ???????????console.log($("#dv").outerHeight(true)+"========"+$("#dv").outerHeight(true));//320========320 ???????}); ???</script> ???<div id="dv">这个div宽高200,边框10,内边距20,外边距30</div>