本文是学习廖老师的Javascript全栈教程后的一些笔记。

使用jQuery:

方法一：下载jQuery库，并在html页面中引入，方式如下：

 1 <html>

 2 <head>

 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 4 <title>jQuery Exe</title>

 5 <script src='\WEB-INF\lib\jquery.js'>

 7 </script>

 8 </head>

 9 <body>

10 </body>

11 </html>

其中src填入的是js文件在项目下的位置。

方法二：你可以不必下载jQuery，而是直接从网上引用。

jQuery官方引用地址：

<script

 src="http://code.jquery.com/jquery-latest.js"></script>

$符号：

jQuery的功能都被绑定在jQuery对象里，而$符号就是jQuery对象的别名。

window.jQuery; // jQuery(selector, context)

window.$; // jQuery(selector, context)

$ === jQuery; // true

typeof($); // 'function'

可以知道jQuery本质上是一个函数对象。

选择器：

我们可以通过jQuery很方便对DOM对象进行操作。但任何操作都是建立在获取到DOM对象之后。选择器可以帮助我们获取DOM对象,jQuery支持以下四种简单的查找方式。

按ID查找：$('#id-name');//查找出id=id-name的对象。

按tag查找：$('p');//查找出标签为p的全部对象。

按class查找：$('.class-name');//查找class=class-name的全部对象。

按属性查找：$('[prop_name=prop_val]');//查找属性prop_name=prop_val的全部对象，用[]括起，填入键值对，其中如果含有特殊字符，则需要用""。

复杂一点的按属性查找，支持前缀查找或是后缀查找;

前缀查找：$('[prop_name^=prop_val]');//查找出prop_name值是以prop_val开头的全部对象。

后缀查找：$('[prop_name$=prop_val]');//查找出prop_name值是以prop_val结尾的全部对象。

注意：其中的^和$符号均是跟着属性名写的。

示例：

 <div id="test-div">

 <p class="color-red">JavaScript</p>

 <p class="color-green">Python</p>

 <p class="color-red color-green">Erlang</p>

 <p class="color-black" name="haskell">Haskell</p>

 <form action="#0" target="_talent" method="post">

 <legend>注册新用户</legend>

 <fieldset>

 <p><label>名字</label><input type="text" name="name"></p>

 <p><label>邮箱</label><input type="text" name="email"></p>

 <p><label>口令</label><input type="password" name="password"></p>

 <p><button type="submit">注册</button></p>

 </fieldset>

 </form>

 </div>
<script>

var div = $('#test-div');

var hs = $('.color-black');

var email = $('[name=email]');

var langs = $('[class^=color]');

var p_arr = $('p');

</script>

值得注意的是：script需要放在DOM对象构建完成之后或是等待页面加载完成后再进行查找，否则获取到的jQuery对象是个长度为0的数组。

组合查找：就是将上述简单选择器组合使用，组合器之间是且的关系。

多项选择器：多项选择器就是把多个选择器用,组合起来一块选。

var input_email = $('input[name=email]');//组合查找，查找是input且name=email的DOM对象

var l = $('p.color-red,p.color-green');// 多项选择器，JavaScript,Python,Erlang

层级选择器：如果DOM对象存在着层级关系，则可以用层级选择器来获取，层级选择器中层级关系用空格隔开。

组选择器：子选择器和层级选择器类似，但是子选择只能筛选直接父子关系，父子关系用>表示。

 var form_p = $('from p');//层级选择器，选择form下的p标签的DOM对象

 var email = $('p>[name=emal]');//子选择器

过滤器：过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。

 var js = $('div p:first-child');//js

 var hk = $('div p:last-child');//haskell

 var py = $('div p:nth-child(2)');//下标从1开始，故选出python

 var odd = $('div p:nth-child(odd)');//选出奇数元素，同理参数为even时，选出偶数元素

还有些常用的过滤器：

  • :input：可以选择<input>，<textarea>，<select>和<button>；

  • :file：可以选择<input type="file">，和input[type=file]一样；

  • :checkbox：可以选择复选框，和input[type=checkbox]一样；

  • :radio：可以选择单选框，和input[type=radio]一样；

  • :focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；

  • :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；

  • :enabled：可以选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；

  • :disabled：和:enabled正好相反，选择那些不能输入的。

  • :hidden和:visible：用来选出隐藏和可见的元素。

查找和过滤

     查找：我们可以在获取到某一个jQuery对象后，以此对象为基准进行查找。

 <ul class="lang">

     <li class="js dy">JavaScript</li>

     <li class="dy">Python</li>

     <li id="swift">Swift</li>

     <li class="dy">Scheme</li>

     <li name="haskell">Haskell</li>

 </ul>

 <script>

 var ul = $('ul.lang'); // 获得<ul>

 var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme

 var swf = ul.find('#swift'); // 获得Swift

 var hsk = ul.find('[name=haskell]'); // 获得Haskell

 </script>

同理可以用parent(),prev(),next()方法来查找当前对象的父元素，前一个和后一个。

过滤：filter()方法可以过滤掉不符合选择器条件的节点。

 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell

 var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

或者给filter()方法传入一个函数，fliter将根据返回值的true和false来进行过滤。

 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell

 langs.filter(function () {

     return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点

 }); //

map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell

var arr = langs.map(function () {

    return this.innerHTML;

}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

此外，一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉。

JQuery学习(一)的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  6. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  7. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  8. jquery学习以及下载链接

    jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...

  9. 转载最佳JQuery学习网站

    转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript    ...

  10. JQuery学习笔记--01

    JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...

随机推荐

  1. JAVA中的==和queals()的区别

    一.先来说说Java的基本数据类型和引用类型 八大基本数据类型:Byte,short,int,long,double,folat,boolean,char,其中占一个字节的是byte,short和ch ...

  2. ConcurrentHashMap中节点数目并发统计的实现原理

    前言: 前段时间又看了一遍ConcurrentHashMap的源码,对该并发容器的底层实现原理有了更进一步的了解,本想写一篇关于ConcurrentHashMap的put方法所涉及的初始化以及扩容操作 ...

  3. Property [*****] not found on type [com.erp.pojo.ErpSupplier]

    我实体类里用的是 springboot 里@Slf4j   @Data  注解式写的  这样可以减少代码量 ,但是遇到一个问题影响我好长时间 出现了这个错误  Property [*****] not ...

  4. AJ学IOS 之控制器view显示中view的父子关系及controller的父子关系_解决屏幕旋转不能传递事件问题

    AJ分享,必须精品 一:效果 二:项目代码 这个Demo用的几个控制器分别画了不通的xib,随便拖拽了几个空间,主要是几个按钮的切换,主要代码展示下: // // NYViewController.m ...

  5. 做一个通过dockerfile从零构建centos7.4

    今天做一个dockerfile从零构建centos7.4镜像 废话不多说,很简单. 需要的软件包:centos7.4的rootfs 链接:提取码:usnu 下载以后我们打开看看里面是什么呢: 可以看的 ...

  6. Python 变量详解[学习 Python 必备基础知识][看此一篇就够了]

    您的"关注"和"点赞",是信任,是认可,是支持,是动力...... 如意见相佐,可留言. 本人必将竭尽全力试图做到准确和全面,终其一生进行修改补充更新. 目录 ...

  7. Windows下如何将一个程序设为开机自启

    1.放在  开始-启动(C:\Users\Qi\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup)2.修改注册表[HKEY_L ...

  8. python与excel的关系；铁打的python流水的excel

    现在很多行业,都离不开用Excel: 做财务的,要用Excel做报表:做物流的,会用Excel来跟踪订单情况:做HR的,会用Excel算工资:做分析的,会用Excel计算数据做报表.不知道你有没有这样 ...

  9. 基于 HTML5 WebGL 的高炉炼铁厂可视化系统

    前言       在当今 工业4.0 新时代的推动下,不仅迎来了 工业互联网 的发展,还开启了 5G 时代的新次元.而伴随着带宽的提升,网络信息飞速发展,能源管控上与实时预警在工业互联网中也占着举足轻 ...

  10. 蒲公英 · JELLY技术周刊 Vol.03

    蒲公英 · JELLY技术周刊 Vol.03 「蒲公英」期刊全新升级--JELLY技术周刊!深度挖掘业界热点动态,来自团队大咖的专业点评,带你深入了解团队研究的技术方向. 登高远眺 天高地迥,觉宇宙之 ...