jQuery学习笔记(—)
1 1.window.onload和$(document).ready(function(){})区别:加载方式和执行个数 2 2.jQuery简写为$,$(function(){})=$(document).ready(function(){}) 3 3.jQuery对象和DOM对象: 4 1.DOM对象:元素节点,使用js方法获取 5 var dom = document.getElementById("id"); 6 var domhtml = dom.innerHTML; 7 jQuery对象:DOM对象封装后 8 var $jquery = $("#id").html(); 9 2.jQuery与DOM对象转换 10 jQuery转DOM:get(index)和[index] 11 DOM转jQuery:var $cr = $(dom对象) 12 if(cr.checked(){}) 13 if($cr.is(:checked){}) 14 15 4.CSS选择器分类 16 标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配符(全局)选择器 17 伪类选择器、子选择器、属性选择器 18 5.jQuery过滤器分类 19 基本过滤器,内容过滤器,可见性过滤器,属性过滤器、表单属性过滤器、子元素选择过滤器 20 6. $(.test :hidden) y有空格时获取class为test里面的隐藏元素; 21 $(.test:hidden) 没有空格时获取的是隐藏的class为test的元素 22 7. querySelector() CSSa选择器 23 8. :even偶数 :odd奇数 索引从0开始 24 :eq() 索引从0开始 25 :nth-child() 索引从1开始 :nth-child(n+3) 从第三个开始选中 26 在不指定类型时,nth-child(n)选中的是父元素下的第N个子元素。nth-of-type(n)选中的是父元素下的不同类型标签的第N个。 27 9. jQuery操作DOM 节点操作 28 删除节点:remove() detach() empty(); 29 remove():删除节点和后代节点 30 detach():绑定的事件和附加的数据不会删除 31 empty(): 清空节点,清空元素中所有后代节点 32 33 10. html(),text(),val()区别? 34 html():读取和html内容(标签) 35 text():读取和设置文本内容 36 val() :设置和获取元素的值 37 11. CSS-DOM 38 1. $("p").css("opacity","0.5").css("height").css({"background:red","font-size:14px"}) 39 2. 位置:width(),height(),offset(),position(),scrollTop(),scrollLeft() 40 41 12. jQuery事件和动画 42 1.停止事件冒泡 function(event)中传参event,event.stopPropagation();停止冒泡 43 2.组织默认行为 function(event)中传参event,event.preventDefault();阻止元素默认行为 44 3.event.type;event.target;event.relatedTarget;event.pageX;event.PageY;event.which; 45 4.事件模拟 trigger();事件移除 unbind(); 46 5.动画 show();hide();SlideDown();SlideUp();FadeIn();FadeOut(); 47 6.animate(params,speed,callback) params{property1:"val1",property2:"val2"} 48 animate({left:"+=500px"},300)//当前位置累加500px,在300ms内 49 animate方法中应用多个属性,动画同时发生;链式写法,按顺序发生 50 7.stop();stop(true);delay(); 51 8. toggle()//切换元素可见状态 52 slideToggle()//通过高度变化切换匹配元素的可见性 53 fadeToggle(),fadeTo//改变透明度 54 55 13.jQuery对表单表格的操作 56 1.获取对象属性:attr()和prop() 57 (1).只添加属性名称该属性就会生效用 prop() 58 (2).只存在 true/false 的属性应该用 prop();例如设置disabled和checked属性 59 2.append(),appendTo(),prepend(),prependTo(),before(),after() 60 append():添加到元素内部 61 appendTo():前面添加到后面元素的尾部 62 $("#checkedall").click(function(){ 63 $('[name=items]:checkbox').attr("checked",this.checked); 64 }); 65 3. hasClass();has(); 66 14.jQuery中Ajax 67 1.load()方法 68 载入文档 load(url,data,callback) //data:key/value 69 //无data,GET方法传送数据,有data,POST方法传送数据 70 //callback:function() 71 function(responseText,textStatus,XMLHttpRequest){ 72 responseText:请求返回的内容 73 textStatus:请求状态 :success/error/notmodified/timeout 74 XMLHttpRequest:XMLHttpRequest对象 75 } 76 2. $.get() $.get(url [,data] [,callback] [,type]) 77 function(data,textStatus) 78 //data 返回的内容,可以是xml文档,json文件,html 79 //textStatus请求状态 80 3. $.post() 81 4. $.getJSON() 用于加载JSON文件,$.getScript() 82 5. $.ajax({ 83 type:"GET/POST", 84 url:".json/.xml/.js...", 85 dataType:"json", 86 success:function(data){ 87 $('#resText').empty(); 88 var html=''; 89 $.each(data,function()){ //$.each()函数对数据迭代输出 90 91 } 92 } 93 }) 94 6. serialize():DOM元素内容序列化为字符串,用于ajax请求 95 serializeArray():DOM元素内容序列化为JSON格式数据 96 $.param()方法 对数组或对象按照key/value进行序列化 97 例:var obj={a:1,b:2,c:3} var k=$.param(obj); alert(k);// a=1&b=2&c=3 98 7. .ajaxStart(),.ajaxStop(); 99 ajaxComplete(callback),ajaxError(callback),ajaxSend(callback),ajaxSuccess(callback) 100 15.get 与post:1.参数传递 2.数据大小 3.数据缓存 101 16.jQuery性能优化 102 1.id最快 find() 103 2.缓存对象:一个对象用多次就可以把这个对象定义为一个变量 104 $(#tarr input .on).bind(); 105 $(#tarr input .on).css(); 106 $(#tarr input .on).FadeIn(); 107 就可以定义为var $acton=$(#tarr input .on); 108 3. 链式写法 109 4.减少DOM操作 110 5.数组方式使用jQuery对象 111 6.事件代理 112 7.原生js 113 8.压缩js 114 16.浮动和清除浮动 115 17.web:结构层html,表现层css,行为层js