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

 

posted @ 2018-06-29 11:34  东篱下  阅读(131)  评论(0编辑  收藏  举报