由于去实习过后,发现真正的后台也要懂前端啊,感觉javascript不懂,但是之前用过jQuery感觉不错,很方便,省去了一些内部函数的实现。

看了这一本《深入PHP与jQuery开发》,感觉深入浅出,值得推荐。

Chapter1.jQuery简介

1.jQuery工作方式本质

先创建一个jQuery对象实例,然后对传递给该实例的参数表达式求值,最后根据这个值作出相应的响应或者修改自身。

2.利用CSS语法选择dom元素(基本选择器)

我们知道,jQuery说白了就是对网页上的内容进行选择器的新建与操作。

  • 通过标签类型选择元素

直接选用标签的元素来作为选择器:

$("p")
  • 通过class选择元素

通用格式:.class

$(".foo")
  • 通过ID选择元素

通用格式:#id

$("#bar")
  • 使用组合选择题

只要元素匹配组合选择器中任意一个选择器,都会被选中并出现在返回结果中:

$("p.foo,#bar")

3.层次选择器

  • 选择后代元素

祖先元素  后代元素

例:选择body下的span元素

>>>$("body span")
  • 选择子元素

父元素>子元素(只匹配直接子元素)

>>>$("body>span")
>>>[]
  • 选择下一个兄弟(next)元素

起始元素标识+下一个兄弟元素标识

注意是在DOM中选择一个元素之后紧跟的下一个兄弟元素!!

>>>$(".foo+p");
  • 选择兄弟元素

兄弟元素(sibling elements)是指被同一个元素包裹的同一级的全部元素。选择兄弟元素非常类似于选择下一个元素,只是它返回起始元素之后匹配的全部兄弟元素,而不是只返回下一个。

起始元素标识~匹配兄弟元素

>>>$(".foo~p");

4.基本过滤器

  • 选择第一个或最后一个元素

只要在任意选择器之后追加:first或:last即可:

>>>$("p:first");
>>>$("p:last");
  • 选择不匹配某个选择器的元素

使用:not()过滤器。

>>>$("p:not(.foo)");
  • 选择索引为奇数或偶数的元素

:even 和 :odd

>>>$("p:odd");
>>>$("p:even");
  • 选择特定索引的元素

:eq()过滤器。

>>>$("p:eq(3)");

5.内容过滤器

  • 匹配包含特定文本的元素

要匹配包含特定文本的元素,使用:contains()过滤器。(仅匹配标签内的文本)

>>>$("p:contains(Another)");
  • 匹配包含特定元素的元素

:has()过滤器用来匹配包含特定元素的元素。

>>>$("p:has(span)");
  • 选择空元素

:empty()选择出那些不包含任何文本也不包含任何其他元素的空元素。

>>>$(":empty");
  • 选择父元素

与:empty相反,:parent只匹配那些拥有子元素的元素,不管它包含的是其他元素,还是文本内容,或者兼而有之。

>>>$("p:parent");

6.可见性过滤器

利用:hidden和:visible,分别用来选择被隐藏的元素和可看到的元素。

>>>$("p:visible");  //可见的
>>>$("p:hidden"); //隐藏的

7.属性过滤器

  • 根据属性及属性的值选择元素:

[属性名=属性值]

>>>$("[class=foo]");
  • 选择没有某个属性的元素或属性值不匹配的元素

[属性名!=属性值]

$("[class!=foo]");

8.子元素过滤器

  • 匹配奇数索引值/偶数索引值/特定索引值的元素

:nth-child()在匹配元素时提供了4个参数:even,odd,index和equation。

>>>$("p:nth-child(odd)");
>>>$("p:nth-child(even)");
  • 选择第一个或最后一个子元素

使用:first-child;last-child

>>>$("p span:last-child");

关于选择器:last()和:last-child()的区别:

这两个选择器都是匹配集合中的最后一个元素,差别在于 :last 将匹配所有的集合中的最后一个元素。而 :last-child 将匹配集合中的所有位置为最后一个的子元素。:last 将永远返回一个元素,而 :last-child可能返回一批元素。

9.表单过滤器

目前可用的表单选择器(暗含对input框内type的选择)有:button,:checkbox,:file,:image,:input,:password,:radio,:submit,:text.

如:

>>>$("input:radio");
  • 匹配可用或禁用的表单元素
>>>$(":enabled");
>>>$(":disabled");
  • 匹配选中或未选中的表单元素

过滤器:checked和:selected分别用于获取checked为真和selected为真的表单元素。

>>>$(":checked");
>>>$(":selected");

就这样吧。

《深入PHP与jQuery开发》读书笔记——Chapter1的更多相关文章

  1. Flask Web开发读书笔记

    开篇:目前想自学Flask Web开发--基于Python,找了几本书准备啃啃,同时也会分享读书笔记.希望和大家一起进步. Flask是小型框架,可以算是微框架,但是他的功能还是比较多 Flask有三 ...

  2. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  3. jQuery开发技术笔记

    HTML DOM 加载步骤    1. 解析 HTML 结构     2.加载外部脚本和样式表文件     3.解析并执行脚本代码     4.构造 HTML DOM 模型     5.加载图片等外部 ...

  4. 《锋利的jQuery》读书笔记(DOM+事件)

    前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了. 1.DOM加载后执行JS $(document).ready(function(){ //.... ...

  5. 《锋利的jQuery》读书笔记

    jQuery理念:write less, do more! 第 一 章一:jQuery简介 a:轻量级 b:强大选择器 c:DOM封装 d:ajax封装 e:不污染顶级变量 只建立一个jQuery对象 ...

  6. <<敏捷开发>>读书笔记

    1.走进敏捷 * 组织成功 增加业务专家,较少bug和测试的交流成本,即使取消不好的技术 首先发布最有价值的特性,时常发布新的版本,即使改进软件 * 技术成功 结对编程,代码审核,确保同一份代码有不同 ...

  7. 【锋利的Jquery】读书笔记十一

    项目进度太赶,天天公司加班12小时,没时间看书充电.2016年再更新一篇吧.现在凌晨2点36分. 2017加油哦 jquery合适的选择器 $("#id") 无疑是最佳提高性能的方 ...

  8. 【锋利的Jquery】读书笔记七

    第七章  jquery插件 管理cookie的插件--cookie jquery插件太多没什么好讲的,百度太多 说以下 cookie插件 <!DOCTYPE html> <html& ...

  9. 【锋利的Jquery】读书笔记六

    ajax优点缺点 json格式的严格 { "people": [ { "firstName": "Brett", "lastNam ...

随机推荐

  1. Expectation maximization - EM算法学习总结

    原创博客,转载请注明出处 Leavingseason http://www.cnblogs.com/sylvanas2012/p/5053798.html EM框架是一种求解最大似然概率估计的方法.往 ...

  2. Jenkins进阶系列之——03parameterized-trigger插件

    说明:这个插件可以根据已经完成构建的结果,触发新Job或者传递参数. 官方说明:Parameterized Trigger Plugin 安装步骤: 系统管理→管理插件→可选插件→Build Trig ...

  3. 学习笔记——Maven实战(六)Gradle,构建工具的未来?

    Maven面临的挑战 软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你就会发现曾经大红大紫的技术已经成为了昨日黄花,当然,Maven也不会例外.虽然目前它基本上是Java构建的事实标准,但我们 ...

  4. .NET Web开发初学者必知的四个网站

    No.1 W3school 链接: http://www.w3school.com.cn/ 预览: 介绍: 全球最大Web前端技术教程网站.内容涵盖从基础的 HTML 到 CSS到进阶的XML.SQL ...

  5. WCF Data Service 使用小结 (一)—— 了解OData协议

    最近做了一个小项目,其中用到了 WCF Data Service,之前是叫 ADO.NET Data Service 的.关于WCF Data Service,博客园里的介绍并不多,但它确实是个很好的 ...

  6. 大数据:从开源告诉你身边的IT故事

    最近我们Team利用Dream分布式计算平台,做了这样一件事情,将Github的大量数据通过爬虫抓取下来,通过分析后,我们抽取最近一年中部分的开发者和项目信息,得到了如下有趣的信息,故分享之,数据原汁 ...

  7. jQuery使用之(四)处理页面的表单元素

    表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作. 1.获取表单元素的值. 直接调用val()方法时可以获取选择器的 中的第一个元素的val ...

  8. 传智168期JavaEE就业班 day03-js

    * 课程回顾: * CSS * CSS的简介 * 层叠样式表. * CSS与HTML的结合(4种) * HTML的标签提供了属性 style="CSS的代码" * HTML提供了标 ...

  9. C#中相对路径转换为绝对路径的方法

    第一种方法:使用System.Web类,System.Web.HttpContext.Current.Server.MapPath('相对路径');它还可以写成下面这种先声明空间,然后再使用函数的方式 ...

  10. 缓存插件 EHCache 对象缓存(Spring)

    对象缓存就是将查询的数据,添加到缓存中,下次再次查询的时候直接从缓存中获取,而不去数据库中查询. 对象缓存一般是针对方法.类而来的,结合Spring的Aop对象.方法缓存就很简单.这里需要用到切面编程 ...