本文是学习廖老师的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. 数据库学习 day2 检索数据

    上一节我们介绍了什么是数据库,以及一些基本的数据库术语 这一课介绍使用SELECT语句从表中检索一个或多个数据列. 关键字(Keyword) 作为SQL组成部分的保留字.关键字不能用作表和列的名字(类 ...

  2. 【php】字符串

    1.字符串的定义方式:1.单引号 ''2.双引号 ""3.定界符 <<<注意结束时的使用例:$str = <<<myStr字符串内容myStr; ...

  3. How to setup a Alpine Linux mirror

    How to setup a Alpine Linux mirror   Contents 1 Introduction 2 Setting up the cron job 3 Setting up ...

  4. Linux 磁盘管理篇,开机挂载

    设置开机挂载需要到 /etc/fstab 里设置 第一列:磁盘设备文件名或该设备的label 第二列:挂载点 第三列:磁盘分区文件系统 第四列:文件系统参数 第五列:能否被dump备份命令作用 第六列 ...

  5. C++_编程前奏

    计算机硬件系统 计算机操作系统的五大组成部分 计算机操作系统的组成部分 构成 控制器 指令寄存器(IR)/程序计数器(PC)/操作控制器(OC) 运算器 算数逻辑单元/累加器/状态寄存器/通用寄存器 ...

  6. 【Tool】IDEA配置Maven依赖管理

    IDEA配置Maven 打开IDEA,在项目界面打开[File] — [Settings] 找到构建工具,下面第一个就是Maven 主选项更换我们自己的主目录和设置目录与本地仓库 勾选[打印异常捕获信 ...

  7. 疲劳驾驶打瞌睡?python保障您的驾驶安全

    道路千万条,安全第一条!疲劳驾驶可谓交通事故几大罪魁祸首之一,根据美国一项研究显示,司机睡眠不足4小时,交通事故肇事几率等同于醉驾. 为了减少疲劳驾驶现象,驾驶员疲劳检测应运而生.这是一项安全技术,可 ...

  8. python高级特性之封包与解包

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:kwsy PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...

  9. VXLAN 基础教程:在 Linux 上配置 VXLAN 网络

    上篇文章结尾提到 Linux 是支持 VXLAN 的,我们可以使用 Linux 搭建基于 VXLAN 的 overlay 网络,以此来加深对 VXLAN 的理解,毕竟光说不练假把式. 1. 点对点的 ...

  10. Python生成一维码

    参考页面 https://pypi.org/project/python-barcode/ 利用python-barcode的库 一.安装python-barcode库 #安装前提条件库 pip in ...