美文网首页JQuery让前端飞jquery极简教程
jQuery学习笔记——简介、选择器

jQuery学习笔记——简介、选择器

作者: 远远暖暖 | 来源:发表于2017-07-18 14:47 被阅读26次

    由于时间紧任务急,我必须马上把前端这套东西流程走通,为了第一步能先看懂师兄们写的项目代码,我开始了jQuery的学习。。。


    jQuery简单介绍

    简介

    jQuery是继Prototype后的又一个优秀的JavaScript库,是一个创建于2006年的开源项目。它凭借简洁的语法、跨平台的兼容性,极大简化了开发人员遍历dom文档、html文档、操作dom、处理事件、执行动画和开发ajax的操作。
    jQuery强调写得少,做得多。它独特的选择器、链式操作、事件处理机制和封装完善的ajax都是其他js库望尘莫及的。

    优势
    轻量级、强大的选择器、出色的DOM封装、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式操作方法、丰富的插件支持、隐式迭代。

    配置环境
    不需要特别安装,只要在页面<head>标签内写一行标签引入即可,此方法是在百度上调用jquery。
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    或者采用本地存放jquery方法:在jquery官网下载一个jquery.js文件,放在本地项目所在webroot的js文件夹内,再在<head>标签内写一行标签:
    <script type="text/javascript" src="jquery.js"></script>

    代码风格
    链式操作风格

    • 对于同一个对象不超过3个操作的,可以写在一行
    • 对于同一个对象较多操作,建议每一行写一个操作
    • 对于多个对象少量操作,可以每个对象写一行,如果涉及子元素,可以适当缩进
    jQuery对象和DOM对象

    DOM:document object model 文档对象模型
    jQuery对象:通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,jQuery对象可以使用jQuery里的方法。

    $("#foo").html();
    等同于
    document.getElementById("foo").innerHTML;
    

    在jQuery对象中无法使用DOM对象的任何方法。DOM对象也不能使用jQuery里的方法。

    jQuery对象和DOM对象的相互转换
    获取jQuery对象:var $variable = jQuery 对象;
    获取DOM对象:var variable = DOM 对象;

    1、 jQuery对象-->DOM对象
    [index]和get(index)

    • [index]方法
    var $cr = $("#cr");
    var cr = $cr[0];
    ```-
    
    - get(index)方法
    

    var $cr = $("#cr");
    var cr = $cr.get(0);

    
    2、DOM对象--> jQuery对象
    

    var cr = document.getElementById("cr");
    var $cr = $(cr);

    - 平时用到的jQuery对象都是通过$()函数制造出来的,$()函数是jQuery对象的制造工厂。
    
    #### jQuery选择器
    选择器是jQuery的根基,对事件处理、遍历DOM、Ajax操作都依赖于选择器。
    ##### 一、CSS选择器
    要使某个样式应用于特定的HTML元素,需要找到该元素,在CSS中,执行这一任务的表现规则称为CSS选择器。
    
    |选择器|语法|描述|示例|
    |:--|:--|:--|:--|
    |标签选择器|E{<br/>  CSS规则<br/>}<br/>|以文档元素作为选择符|a{<br/> font-size:14px;<br/>}|
    |ID选择器|#{<br/>  CSS规则<br/>}|以文档元素的唯一标识符ID作为选择符|#note{<br/> font-size:14px;<br/>}|
    |类选择器|E.className{<br/>  CSS规则<br/>}|以文档元素的class作为选择符|div.note{<br/> font-size:14px;<br/>}|
    |群组选择器|E1,E2,E3{<br/>  CSS规则<br/>}|多个选择符应用同样的样式规则|td,p,a{<br/> font-size:14px;<br/>}|
    |后代选择器|E F{<br/>  CSS规则<br/>}|元素E的任意后代元素F|#links a{<br/> font-size:14px;<br/>}|
    |通配选择器|*{<br/>  CSS规则<br/>}|以文档的所有元素作为选择符|*{<br/> font-size:14px;<br/>}|
    
    这就尴尬了,回车的代码都显示出来了,下次还是粘贴表格图片好了。br是回车的意思。
    
    几乎所有主流浏览器都支持上面这些选择器。此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器,但主流浏览器并不支持所有CSS选择器~~
    
    ##### 二、jQuery选择器
    jQuery选择器完全继承了CSS风格,可以便捷迅速的找出特定的DOM元素,无需担心浏览器是否支持这一选择器,jQuery的行为都必须在获取到元素后才能生效。
    
    **jQuery选择器的优势**
    - 简洁的写法
    `比如:用$("#ID")代替document.getElementById()函数`
    - 支持CSS1到CSS3选择器
    - 完善的处理机制
    即使用jQuery获取网页中不存在的元素也不会报错~
    
    **jQuery选择器**
    - 基本选择器
    最常用、最简单的选择器。通过id、class、标签名等来查找DOM元素。在网页中,每个id只能用一次,class可以重复使用。
    ![基本选择器.png](http:https://img.haomeiwen.com/i3194437/e65454196c993553.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    - 层次选择器
    如果想通过DOM元素之间的层次关系来获取特定元素,如后代元素、子元素、相邻元素和同辈元素等,那么需要用层次选择器。
    ![层次选择器.png](http:https://img.haomeiwen.com/i3194437/d22423bdc2d380fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    - 过滤选择器(基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象过滤选择器)
    过滤选择器是通过特定过滤规则来筛选所需的DOM元素,选择器以:开头。
    1、基本过滤选择器
    
    ![基本过滤选择器.png](http:https://img.haomeiwen.com/i3194437/ddb6a1bd9854e375.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    2、内容过滤选择器
    
    ![内容过滤选择器.png](http:https://img.haomeiwen.com/i3194437/117e3b25c6291c89.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    3、可见性过滤选择器
    
    ![可见性过滤选择器.png](http:https://img.haomeiwen.com/i3194437/5ae089bd11d57148.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    4、属性过滤选择器
    它的过滤规则是通过元素的属性来获取相应的元素。
    
    ![属性过滤选择器.png](http:https://img.haomeiwen.com/i3194437/79e6394dd6d46f67.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    5、子元素过滤选择器
    需要注意父元素和子元素的区分。
    
    ![子元素过滤选择器.png](http:https://img.haomeiwen.com/i3194437/5d32d3712baf3bed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    6、表单对象属性过滤选择器
    此属性主要对所选择的表单元素进行过滤。.
    
    ![表单对象过滤选择器.png](http:https://img.haomeiwen.com/i3194437/4495001092c17929.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    - 表单选择器
    它可以方便的获取到表单的某个或某类型的元素。
    ![表单选择器.png](http:https://img.haomeiwen.com/i3194437/880d30f3f0ca61b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ##### 三、jQuery选择器注意事项
    1、选择器中含有特殊符号
    - 含有"·"、"#"、"("、"]"等特殊字符:
    在特殊符号前加"\\"
    - 属性选择器的@符号问题:
    由于jQuery版本问题,如果属性选择器前面有@,则去掉
    
    2、选择器中含有空格的注意事项
    多一个少一个空格会得到不同结果,这点需要注意

    相关文章

      网友评论

        本文标题:jQuery学习笔记——简介、选择器

        本文链接:https://www.haomeiwen.com/subject/xbgwhxtx.html