注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

jQuery 选择器总结 事件与事件对象  

2014-07-28 10:14:01|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
jQuery 选择器总结 事件与事件对象
欢迎学习交流----
梦幻雪冰
【1】jQuery ready()方法与原生onload()方法的讲解
【语法讲解】
$(document).ready(function(){
alert('ready第一次-梦幻雪冰');
});
进行缩写
$(function(){
alert('进行缩写了');
})
这样缩写实现的功能跟上面写法实现功能等同,推荐使用缩写来编写代码
【两者比较】然后进行跟onload进行比较
$(document).ready(function(){
alert('ready第一次-梦幻雪冰');
});
$(document).ready(function(){
alert('ready第二次-梦幻雪冰');
});
window.onload = function(){
alert('onload第一次-梦幻雪冰');
}
window.onload = function(){
alert('onload第二次-梦幻雪冰');
}
【结果】ready()方法先进行弹窗,然后弹两次;onload()方法只有弹窗一次,并且显示"onload第二次-梦幻雪冰"
【两者区别】onload与ready的区别
 onload():需要全部加载完成;只能出现一次,后面的覆盖前面的;
 ready():只需要文档加载完成,意思是节点元素加载完成;可以出现多次,不发生覆盖
欢迎学习交流----梦幻雪冰

【2】选择器 
【基本选择器】
   $('#ID名');        用ID选取元素
   $('.类名');     用类名选取元素
   $('标签名');     用标签选取元素
   $('*');    选取所有元素
   $('#con ul');     用后代选择器选取元素
   $('.main, .box');     用群组选择器选取元素
   $('.box > div');            用子代选择器选取元素
   $('ul+div');                  获取ul下的第一个兄弟
   $('ul ~ div');                兄弟
  
【基本过滤选择器】(假设结构为ul>li)
    $('li:first');               选取所有li中的第一个元素
    $('li:last');               选取所有li中的最后一个元素 
    $('li:even');             li为条件基础,选取索引值偶数的所有元素,索引值从0开始【必须会说】
    $('li:odd');              li为条件基础,选取索引值奇数数的所有元素,索引值从0开始【必须会说】
    $('li:not(ul)');          去掉所有与给定选择器匹配的元素 去掉ul标签
    $('li:eq(index)');      选取索引值等于index的元素,索引值从0开始【必须会说】
    $('li:lt(index)');        选取索引值小于index的元素,索引值从0开始【必须会说】
    $('li:gt(index)');       选取索引值大于index的元素,索引值从0开始【必须会说】
  
【内容过滤选择器】
    $('li:contains(text)');  选取文本当中有text的li元素  注意应当是文本
    $('div:empty');           选择不包含元素也不包含文本的空元素【必须会说】
    $('div:has(p)');           选择含有选择器匹配的元素的元素,即选择含有p标签的div元素
    $('div:parent');          选取拥有子元素或者文本元素的div元素
  
【属性选择器】(为了方便理解以下假设属性为id的情况下)
    $('div[id]')                 拥有这种id属性的div
    $('div[id][class]')        拥有这种id、class属性的div
    $('div[id=test]')         拥有这种id属性值为test的div
    $('div[id!=test]')        拥有这种id属性值不等于test的div
    $('div[id$=test]')       拥有这种id属性值以test结束的div 例如:-test
    $('div[id^=test]')       拥有这种id属性值以test开始的div 例如:test-
    $('div[id*=test]')        拥有这种id属性值包含test的div   例如:mengtexthuan
  
【子元素过滤选择器】
    $('div:nth-child(index)');   index从1开始也可以是even、odd、2n  
    $('div:first-child');             选取div元素的第一个元素  
    $('ul li:first-child');            选取ul中的第一个li 
    $('div p:only-child');          选中div只有包含p的标签的选择器,选中p标签
  
【 表单属性选择器】
    $('input:enable')         查找所有可用的input元素
    $('input:disable')         查找所有不可用的input元素
    $('input:checked')       选中(单选框、多选框)
    $('input:selected')       选中状态(下拉列表)   

  【3】事件绑定
  【语法讲解】
    bind('第一个参数',第二个参数);第一个参数说明事件类型,第二个参数是你定义的事件处理函数
    $('.wrap li').bind('click',show);
    function show(){
     alert('绑定函数');
    }
    或者
    $('.wrap li').bind('click',function(){
     alert('绑定函数');
    });
   【方法如下】(因为方法用法都是一样,就不一一详解)
    $('div').bind('click', function(alert("jQuery事件绑定-梦幻雪冰")){});       添加一个或者多个的事件处理器
    $('div').unbind('click', function(){alert("jQuery事件绑定-梦幻雪冰")});   删除一个或者多个的事件处理器
    $('div').on('click', function(){alert("jQuery事件绑定-梦幻雪冰")});          添加一个或者多个的事件处理器【1.7版本】
    $('div').off('click', function(){alert("jQuery事件绑定-梦幻雪冰")});          删除一个或者多个的事件处理器【1.7版本】
    $('div').live('click', function(){alert("jQuery事件绑定-梦幻雪冰")}); 
    给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效【不支持了,1.7版本过时  1.9版本删除】

  【4】事件对象(跟原生的事件对象一样,知识jQuery已经把你做好了兼容问题)
    $(".con").click(show);
    function show(e){
     console.log(e.target);     target属性规定哪个 DOM 元素触发了该事件。
     console.log(e.type);        type属性描述触发哪种事件类型。
     console.log(e.pageX);   属性是鼠标指针的位置,相对于文档的左边缘。
     console.log(e.pageY);    属性是鼠标指针的位置,相对于文档的上边缘。
        e.stopPropagation();     阻止事件冒泡
        e.preventDefault();         阻止事件默认
    }


  评论这张
 
阅读(111)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017