文档章节

《Jquery基础教程》读书笔记

浮躁的码农
 浮躁的码农
发布于 2015/07/17 21:44
字数 1757
阅读 8
收藏 0

前言

JQuery是功能强大却又简洁明快的轻量级JavaScript库,在DOM操作、事件处理、Ajax特性以及动画特效等方面表现出色。

一、选择符--取得你想要的一切

JQuery最强大的方面之一就是它能简化DOM遍历任务,$()函数实际上是JQuery对象的一个制造工厂,放在圆括号中的任何元素都将自动执行循环遍历(隐式迭代),并且会被保存到一个JQuery对象中(JQuery对象中会封装零个或多个DOM元素),JQuery利用CSS的优势,查找页面元素的机制构建于CSS选择符之上。

  • 标签名:$('p')会取得文档中所有的段落。
  • ID:$('#some-id')会取得文档中具有对应的some-id ID的一个元素。
  • 类:$('.some-class')会取得文档中带有some-class类的所有元素。
  • 以下列举一些CSS和XPath选择符,以及jQuery独有的自定义选择符:
    • $('#selected-plays > li')  查找ID为selected-plays的元素的子元素(不包括孙元素)中所有的列表项(li)。
    • $('#selected-plays li:not(.horizontal)')   查找ID为selected-plays的元素的后代元素中没有horizontal类的列表项(li)。
    • $('a[@title]')  选择所有带有title属性的链接
    • $('a[@href ^="mailto:"]')  所有带有href属性且以mailto开头的锚元素(a)
    • $('a[@href$=".pdf"]')   所有带有href属性且以.pdf结尾的锚元素(a)
    • $('a[@href*="mysite.com"]')  所有带有href属性且属性值包含mysite.com的锚元素(a)
    • $('div[ol]')  包含ol元素的所有div元素
    • $('div.horizontal:eq(1)')  带有horizontal类的div集合中,选择第2项
    • $('li:nth-child(3n)')  第3、第6、第9、…、所有3的倍数的li
    • $('tr:odd')  表格中奇数行编号的tr(:nth-child(odd) 与(2n+1)结果一样)
    • $('td:contains("Henry")')  包含Henry的td
    • $('tr').parent() 取得父元素,.next()取得最接近下一个的同辈元素,.find()查找满足条件的元素,.end()回溯到上一次筛选结果的DOM元素。

    二、事件--扣动扳机

    $(document).ready(function() {
      //这里是代码... ...(保证当前文档中DOM树加载完成后执行代码,以免无法定位DOM元素)
    });

    1. 希望用户单击按钮时执行,引入.bind()方法

    $(document).ready(function() { 
        $('#some-id').bind('click', function() { 
            $(this).addClass('selected'); //关键字this引用的就是#some-id 
            alert("you have clicked some-id"); 
            $(this).removeClass('selected'); //去除class 
    }); 
    });       

    补充说明:

    • .removeClass()方法的参数是可选的,即当省略参数时,该方法会移除元素中所有的类。例如:$('body').removeClass()

    • .bind('click', function() {})的简写是.click(),.unbind()移除绑定。

    • 对于只需触发一次,随后要立即解除绑定的情况也有一种简写方法为.one()。

    2. 显示和隐藏高级特性

    • .toggle()方法接受两个参数,而且这两个参数都是函数。第一次在元素上单击会调用第一个函数,第2次单击会触发第2个函数。
    • .hover()控制鼠标指针进入元素和离开元素时执行任意操作,IE浏览器对:hover伪类选择符支持不好,开发时要注意。
    • .trigger()方法可以完成模拟事件的操作,比如$('#some-id').trigger('click')

    三、效果--为操作添加艺术性

    内联CSS:

    • .css('property', 'value')  可以修改内联的CSS属性
    • var $speech = $('div.speech'); var currentSize = $speech.css('fontSize');  获取文字大小
    • .hide()和.show()方法控制隐藏与展示
    • .animate()该方法可以创建包含多重效果的自定义动画
    • .animate({param1: 'value1', param2: 'value2'},speed,function() {})

    四、DOM操作--基于命令改变页面

    • 要在每个匹配的元素中插入新元素,使用:
      • .append()
      • .appendTo()
      • .prepend()
      • .prependTo()
    • 要在每个匹配的元素响铃的位置上插入新元素,使用:
      • .after()
      • .insertAfter()
      • .before()
      • .insertBefore()
    • 要在每个匹配的元素外部插入新元素,使用:
      • .wrap()   比如:$(this).wrap('<li></li>'),效果是<li>$this</li>
    • 要用新元素或文本替换每个匹配的元素,使用:
      • .html()   比如:.html('&hellip;')  p.s.这里是省略号
      • .text()
    • 要移除每个匹配的元素中的元素,使用:
      • .empty()
    • 要从文档中移除每个匹配的元素及后代元素,但不实际删除它们,使用:
      • .remove()
    • 复制元素:
      • .clone(),.clone(false)只复制匹配的元素,不会复制其所有的后代元素。

    五、AJAX--让网站与时俱进

    • AJAX用XMLHttpRequest对象,通过这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。
    • 对于服务器的提供的文件格式,主要有JSON和XML两种选择,在性能和文件大小方面具有优势的JSON通常是不错的选择。而当远程应用程序未知时,XML则能够为良好的互操作性提供最可靠的保证。
    • GET或者POST,决定使用哪种办法的唯一理由就是遵照服务器端的代码的约定,或者是要传输大量的数据---GET方法对传输的数据量有更严格的限制。从视觉上来看,它们之间一个最大的区别就是GET请求把参数放在作为URL一部分的查询字符串中,而POST请求则不是。

    六、表格操作

    • 主要介绍用js在客户端完成表格内的排序,分页,交替行显示,扩展和折叠表格

    七、构建功能型表单

    • 主要介绍表单的验证,客户端验证不能取代服务端的验证,不能依赖用户启用了JavaScript
    • 电子邮件的正则表达式验证:!/.+@+\.[a-zA-Z]{2,4}$/.test(this.value)
    • $.unique()方法可以去掉数组中重复的字符串
    • javaScript的本地函数join把数组转换成字符串
    • 字段的占位符文本(推荐仔细看)比如在搜索框中默认写"search the site",相当于给用户提示。.focus()捕捉鼠标焦点,.blur()失去焦点时,执行响应操作。
    • 自动完成与实时搜索(推荐仔细看)这边是基于一个常用词的搜索词典,用js实现实时搜索
    • 一个订单网页的编写,应用了渐进增强原则:首先确保页面在没有JavaScript的情况下可以正常运行,然后使用jQuery在可能的情况下更优雅地完成相同的任务

    八、滑移和翻转效果

    • 标题与图片的一些效果,有插件可以直接实现,等需要时候可以再看这部分内容。
    • jCarousel插件实现了循环滚动一组图像的机制。
    • Thickbox插件提供了在页面上显示叠放信息的方式。

    九、插件

    • 有一个可用的插件列表,持续更新中http://plugins.jquery.com/
    • 编写方法时,方法应该返回jQuery对象以保持连缀能力,如果匹配的对象集合被修改,那么应该通过调用.pushStack()创建一个新的jQuery对象,而且应该返回这个新对象。比如:return this.pushStack(some-var)
    • String.constructor == Number可以做类型检查

    本文转载自:

    浮躁的码农

    浮躁的码农

    粉丝 71
    博文 855
    码字总数 156176
    作品 0
    松江
    程序员
    私信 提问
    jQuery学习笔记--选择器和事件

    以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

    codingcoge
    2018/05/17
    0
    0
    【每天一个JQuery特效】淡入淡出显示或隐藏窗口

    我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

    Rhymo-Wu
    2018/06/18
    0
    0
    《Jquery基础教程》读书笔记

    前言 JQuery是功能强大却又简洁明快的轻量级JavaScript库,在DOM操作、事件处理、Ajax特性以及动画特效等方面表现出色。 一、选择符--取得你想要的一切 JQuery最强大的方面之一就是它能简化D...

    陶邦仁
    2012/10/25
    0
    0
    分享26本关于Jquery的学习书籍(免费下载)

    分享26本关于Jquery的学习书籍(免费下载) 1、精通JavaScript+jQuery 2、网友small6分享锋利的jQuery实例源码 3、网友small6分享jQuery权威指南配套源代码 4、犀利开发jQuery内核详解与实践...

    邓剑彬
    2012/11/30
    3.3K
    8
    18 个 jQuery Mobile 开发贴士和教程

    jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。 Hardbo...

    红薯
    2011/12/11
    3.7K
    2

    没有更多内容

    加载失败,请刷新页面

    加载更多

    AOP的学习(1)

    AOP 理解AOP编程思想(面向方法、面向切面) spring AOP的概念 方面 -- 功能 目标 -- 原有方法 通知 -- 对原有方法增强的方法 连接点 -- 可以用来连接通知的地方(方法) 切入点 -- 将用来插入...

    太猪-YJ
    37分钟前
    2
    0
    一张图看懂亮度、明度、光度、光亮度、明亮度

    亮度、明度、光亮度,Luminance和Brightness、lightness其实都是一个意思,只是起名字太难了。 提出一个颜色模型后,由于明度的取值与别人的不同,为了表示区别所以就另想一个词而已。 因此在...

    linsk1998
    昨天
    5
    0
    Python应用:python链表示例

    前言 python链表应用源码示例,需要用到python os模块方法、函数和类的应用。 首先,先简单的来了解下什么是链表?链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是...

    python小白1
    昨天
    3
    0
    Source Insight加载源码

    Source Insight是一个图形化的源代码查看工具(当然也可以作为编译工具)。如果一个项目的源代码较多,此工具可以很方便地查找到源代码自建的依赖关系。 1.创建工程 下图为Snort源代码的文件...

    天王盖地虎626
    昨天
    3
    0
    nginx-rtmp-module的缺陷分析(二)

    nginx-rtmp-module使用指令push和pull来relay媒体流数据,以便分布式部署服务。 当nginx-rtmp-module作为边缘服务器(一般不会向边缘服务器推流)时,使用pull从源服务器获取媒体流数据,俗称...

    YoungSagit
    昨天
    2
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    返回顶部
    顶部