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
  • 相关阅读:
    .NET CF 枚举设备窗口
    .NET CF WM设备(手机)振动
    如何将 byte[] 转换为 IntPtr?
    Mobile 重启设备
    如何删除只读文件?
    随笔
    故乡的原风景
    岁月神偷
    opengl纹理映射
    bootstrap 学习笔记
  • 原文地址:https://www.cnblogs.com/jeffjoy/p/9242623.html
Copyright © 2011-2022 走看看