前端的那些事之Jquery篇模块的学习

最新推荐文章于 2024-10-18 17:51:23 发布

weixin_33888907

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量77

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/yongxinke/blog/811459

版权

2019独角兽企业重金招聘Python工程师标准>>>

Jquery模块的学习

-## 核心模块
    - $()	用来通过选择器检索dom对象(参考代码)

   1. 尽量减少操作dom的检索范围
    var $demo = $(".demo");
    $demo.html().children(".my-div");
    2.可以创建元素，创建以后没有在dom树里
    $demo.html().children(".my-div");
    $(document.body).append($div);
    3.入口涵数
    $(function(){}) 
    $(document).ready(function(){
    });
    jQuery(function(){

    });

each() 用来迭代数组、对象、Jquery对象 var $divs = $(".my-div"); var contentx = []; 1//迭代dom对象公有的方法 $.each($divs,function(){ contentx.push(this.innerHTML); }); //或者私有方法 $divs.each(function(){ // contentx.push(this.innerHTML); // }); 2.数组的遍历 $.each(contentx,function(i,o){ console.log(o); }); 3.对象的遍历 var star = { // name : "star", // sex : '男', // height : 188 // }; $.each(star,function(key,value){ // console.log(key+":"+value); // });
index() 用来获得当前代理了一个dom元素的代理对象，dom元素所在同级别dom中的索引 ```

<div class="my-div">my div 1</div> <div id="test" class="my-div">my div 2</div> <div class="my-div">my div 3</div> <script> alert($("#test").index()); </script> ``` - data() 用来缓存内存中的原生dom对象的某个属性 ``` $("#test").data("my-prop","123");//在内存中创建了my-prop属性且值等于123，但页面中没有显示 alert($("#test").data("my-prop"));//获取myprop的值：123 实现的原理如下： var myJquery = function(id){ var dom = document.getElementById(id); dom.data = function(key,value){ if(arguments.length==1){ return this[key]; }else{ this[key] = value; } } return dom; } ``` - extend() 用来扩展第一个对象的功能 ``` var star = { name : "star", sex : '男', height : 188 }; var action1 = { run : function(){}, work : function(){}, eat : function(){} }; var action2 = { jump : function(){}, read : function(){}, write : function(){} }; //$.extend(star,action1,action2);//star继承了action1和action2的功能实现原理如下： var myJquery = {}; myJquery.extend = function(target){ for(var i=1;i<arguments.length;i++){ var ext = arguments[i]; for(var prop in ext){ target[prop] = ext[prop]; } } } myJquery.extend(star,action1,action2); console.log(star); ``` ## 选择器 - $(selector) 所有css(css3)的语法实现 - css(css3)不认识的(通常都是伪类语法) ## 属性 - attr() 就是用来操作标签的属性：标签属性、自定义标签属性... - revmoeAttr() - prop() 就是用来操作标签的状态：比如checked、selected、disabled、readonly..一般为boolean值 - removeProp() ``` <form> <button disabled>button</button> <input readonly> <input type="checkbox" checked> </form> $("#btn1").attr("disabled","disabled"); $("#btn2").prop("disabled",true); ``` ## 样式(位置和尺寸) - addClass() 给目标对象添加类样式优先级高 - 用jquery操作dom样式的时候，尽量使用addClass，便于维护，显示和代码分离 ``` .myButton{ padding:10px 20px; font-family: Arial,"Microsoft Yahei"; margin:5px; border-radius: 5px; } $("button").addClass("myButton"); ``` - css() 给目标对象添加行内样式 - 当css样式属性的值是变量或者是动态计算的，我们只能用css ``` $("button").css({ // padding:"10px 20px", // color:"#abcdef", // "font-family":'Arial,"Microsoft Yahei"', // margin:"5px", // "border-radius": "5px", // border:"3px solid #abcdef" // }); ``` - width()获取元素的宽度 - height()获取元素的高度 - offset() 包含了top和left位置的对象，jquery动态帮你计算好了的当前目标dom在浏览器页面中的位置 - position() 指的是它相对于参照dom的位置实现一个让盒子垂直居中的方法 ``` #panel{ width: 500px; height: 300px; background-color: pink; } <script> $(function(){

            function center(){
		 	var $panel = $("#panel");
			$panel.offset({left:$(document.body).width()/2-         $panel.width()/2,top:$(document.body).height()/2-$panel.height()/2});
		 }
		 center();
	 window.onresize = function(){
		 	center();
	 }
                
    });
    </script>

## 文档处理
- 无论你想如何操作文档，jquery都有对应的方法
- wrap()相当于在元素外边嵌套一个元素,动态生成一个元素
- clone()深度克隆

wrap()的用法

<html> <div id="wrap">this is wrap text</div> </html> <script> $(function(){ $("#wrap").wrap("<div class='outer'></div>"); $("p").wrapInner("<b>this is b tag</b>");

</srcipt>```

clone()的简单用户
<html>
        <table id="scoreTable" border="1">
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>成绩</th>
		</tr>
		<tr class="template" style="display: none;" onclick="alert(1);">
			<td>id</td>
			<td>name</td>
			<td>score</td>
		</tr>
	</table>
</html>
<script>
    $(function(){
        var data = [{id:1,name:"star",score:90}
						,{id:2,name:"danny",score:91}
						,{id:3,name:"jason",score:92}
						,{id:4,name:"ricye",score:93}];
			var $scoreTable = $("#scoreTable");
			var $template = $scoreTable.find(".template");
			$.each(data,function(i,o){
				var $clone = $template.clone().show().removeClass("template").appendTo($scoreTable);
				$clone.find("td:first").text(o.id).next().text(o.name).next().text(o.score);
			});
            
    })
</script>