zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    洛谷—— P2234 [HNOI2002]营业额统计
    BZOJ——3555: [Ctsc2014]企鹅QQ
    CodeVs——T 4919 线段树练习4
    python(35)- 异常处理
    August 29th 2016 Week 36th Monday
    August 28th 2016 Week 36th Sunday
    August 27th 2016 Week 35th Saturday
    August 26th 2016 Week 35th Friday
    August 25th 2016 Week 35th Thursday
    August 24th 2016 Week 35th Wednesday
  • 原文地址:https://www.cnblogs.com/jeffjoy/p/9242623.html
Copyright © 2011-2022 走看看