jQuery学习之路(1)-选择器

▓▓▓▓▓▓ 大致介绍

  终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery

  jQuery是什么?

  jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设 计和Ajax交互。

  jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。(来自百度-_-)

▓▓▓▓▓▓ jQuery对象和DOM对象

  我们在编写脚本时,可能会同时用到原生JavaScript和jQuery,那么这时就会存在一些问题。要解决这些问题就先得认识jQuery对象和DOM对象

    DOM对象:通过例如getElementById方法获取到DOM树中的元素就是DOM对象

    jQuery对象:通过jQuery包装DOM对象后产生的对象

  注意:jQuery对象和DOM对象不能使用对方的任何方法

        // 错误
        $(‘div‘).innerHTML;

        // 错误
        document.getELementsByTagName(‘div‘)[0].html();

  

  jQuery对象和DOM对象是可以互相转化的

  jQuery对象转成DOM对象有两种方法:

    1、[index]

        var $div = $(‘div‘);//jQuery对象
        var div = $div[0];//DOM对象

    2、get(index)

        var $div = $(‘div‘);//jQuery对象
        var div = $div.get(0);//DOM对象

  

  DOM对象转成jQuery对象有一种方法:$(DOM对象)

        var div = document.getELementsByTagName(‘div‘)[0];//DOM对象
        var $div = $(div);//jQuery对象

▓▓▓▓▓▓ jQuery选择器

  jQuery中的选择器完全继承了CSS的风格

  逐一来看

▓▓▓▓▓▓ 基本选择器

  改变id为div1的所有div的背景色

        $(‘#div1‘).css(‘background‘,‘#bbffaa‘);

  

  改变所有p标签和class为one的div的背景色

1         $(‘p,.one‘).css(‘background‘,‘#bbffaa‘);

▓▓▓▓▓▓ 层次选择器

  选取div里的所有span元素

1         $(‘div span‘);

  选取div下元素名是span的子元素

1         $(‘div > span‘);

  选取class是one的下一个<div>同辈元素

        $(‘.one + div‘);

  选取class是one的后面的所有的<div>同辈元素

        $(‘.one ~ div‘);

▓▓▓▓▓▓ 过滤选择器

  1、基本过滤选择器

    选取所有<div>元素中第一个<div>元素

1         $(‘div:first‘);

    选取class不是one的<div>元素

        $(‘div:not(.one)‘);

    选取索引是偶数的的<div>元素

        $(‘div:even‘);

    选取索引等于2的<div>元素

        $(‘div:eq(2)‘);

    选取索引大于2的<div>元素

1         $(‘div:gt(2)‘);

    选取所有标题元素,例如h1、h2等

        $(‘:header‘);

    选取当前正在执行动画的所有元素

        $(‘:animated‘);

    选取获取当前焦点的元素

        $(‘:focus‘);

  2、内容过滤选择器

    选取含有文本“坚持”的<div>元素

        $(‘div:contains(‘坚持‘)‘);

    选取不包含子元素或者文本的<div>元素

        $(‘div:empty‘);

    选取含有<p>元素的<div>元素

        $(‘div:has(p)‘);

    选取含有子元素或者文本的元素

        $(‘div:parent‘);

  3、可见性过滤选择器

    选取所有不可见的元素。包括<input type="hidden" />,<div style="display:none">和<div style="overflow:hidden">

        $(‘:hidden‘);

    选取所有可见的<div>元素

        $(‘div:visible‘);

  4、属性过滤选择器

    选取有id属性的元素

        $(‘div[id]‘);

    选取id等于myId的<div>元素

        $(‘div[id="myId"]‘);

    选取id值不等于myId的<div>元素

        $(‘div[id!="myId"]‘);

    选取id值以my开头的<div>元素

        $(‘div[id^="my"]‘);

    选取id值以my结尾的<div>元素

        $(‘div[id$="my"]‘);

    选取id值含有my的<div>元素

        $(‘div[id*="my"]‘);

    选取属性title等于en或者以en为前缀(en后跟一个连字符‘-‘)的元素

        $(‘div[title|="en"]‘);

    选取属性title中用空格分隔的值中包含字符en的<div>元素

        $(‘div[title~="en"]‘);

    选取拥有属性id并且属性title以en为前缀的<p>元素

        $(‘p[id][title|="en"]‘);

  5、子元素过滤器

    选取每个class为one的<div>父元素下的第2个子元素

        $(‘div.one :nth-child(2)‘);

    选取每个class为one的<div>父元素下的第1个子元素

        $(‘div.one :first-child‘);

    选取<ul>中是唯一子元素的<li>元素

        $(‘ul li:only-child‘);

  6、表单对象属性过滤选择器

    选取id为"form1"表单内的所有可用元素

        $(‘#form1:enabled‘);

    选取id为"form1"表单内的所有不可用元素

        $(‘#form1:disabled‘);

    选取所有被选中的<input>元素

        $(‘input:checked‘);

    选取所有被选中的选项元素

        $(‘select option:selector‘);

▓▓▓▓▓▓ 表单选择器

    选取所有的<input>、<textarea>、<select>和<button>元素

        $(‘:input‘);

    选取所有的单行文本框

        $(‘:text‘);

    选取所有的不可见的元素

        $(‘:hidden‘);

    其余的选择方法都可以通过单词了解到意思(例如 :submit 就是选择所有的提交按钮)就不再赘述。

    

  参考资料:锋利的jQuery(第二版)

       http://www.jquery123.com/

  

时间: 2024-09-29 00:23:23

jQuery学习之路(1)-选择器的相关文章

jQuery学习之路(四)之过滤选择器

今天是第四课主要学习过滤选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson4 过滤选择器</title> <link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; width: 100%; height: 100%; backgroun

jQuery 学习之路(4):事件

一.文档载入事件 二.事件绑定 三.事件对象 四.浏览器事件 五.表单事件 六.键盘事件 七.鼠标事件 jQuery 学习之路(4):事件,布布扣,bubuko.com

jQuery 学习之路(5):表单

处理表单中的元素 jQuery 学习之路(5):表单,布布扣,bubuko.com

Jquery 学习之路(四)高大上的图片轮换

网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦.一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单.不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok. 反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件.一个网站要不了几个这种效果,先实现了再说吧.最后的效果还是很高大上的. 下载地址:http://files.cnblogs.c

jQuery学习之路-A

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="D:/jquery2.0/jquery-2.0.0.js"></scr

jQuery 学习之路(1):引子

一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面很棒但需要商业授权,MooTools 也是值得学习的一个 js 库,Dojo 有一些特殊功能,也可以考虑学习,YUI 的文档很完备,语法也规范.对我个人而言,选择性依次为 jQuery > MooTools > ExtJS > Dojo > YUI > Prototype. jQ

jQuery学习之路(2)-DOM操作

▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li>

jquery学习(一)-选择器

参考锋利的jquery第二版 1.基本的选择器 Id选择器 $(“#Id”) class类选择器 $(“.class”) Element元素选择器 $(“element”) *匹配所有元素 $(“*”) Selector1....n 组合选择器 $(“selector1 selector2 ..n”) 2.层次选择题 $(“ancester descendant ”) 选取ancestor元素里面的所有descendant(后代)元素 $(“parent>child”) 选取parent元素下面