jQuery基础学习笔记(1)

--------2.0以上版本体积更小。

--------CDN  内容分发网络Content delivery networkContent distribution network,常简写成CDN)可以减少带宽,但需要保证网络正常连接。

jQuery函数:jQuery()  或者写成 $()  ,使用方法:1.选择器;2.对象,如document;3.文本内容,注意这个文本内容里一定要包含至少一个 html 标签 … 不然 jQuery 会把没有 html 标签的文本内容当成是选择器来处理 …

size--------针对标签对象元素,比如数html页面有多少个段落元素<p></p>,那么此时的$("p").size() == $("p").length

length------计算一个字符串的长度或者计算一个数组元素的个数,那么此时只能用length而不能用size()

选择器:

1.支持css3选择器

2.选择器过滤,例如$(‘img:even‘)  注意:第一个是0,0 是偶数;$( ‘img:eq( 1 )’ )     $( ‘img:lt( 3 )‘ )

3.选择器里使用元素属性

例如:$( ‘li[data-album!="single"] > img‘ )

=包含的具体的值,也就是所选择的元素里面的这个属性的值里不能包含其它的东西

~ =号等于只会包含用空格分隔开的值

* 号等于不在乎有没有空格,只要属性的值里包含设置的字符就可以

选择表单元素:

选择不同的类型的表单元素,一般就是使用冒号加上元素的名称 ,或者元素类型的名称

$( ‘:input’ )

$( ‘:password’ )

$( ‘:checked’ )

跟表单相关的选择器,都有一个冒号 … :input 表示找到所有 input 类型的元素。

注意这里使用 button 标签的按钮也被看成是 input 类型的元素 。如果想单独选中按钮元素 ,可以使用 $( ‘:button’ )

另外我们还有一些根据表单元素的状态来选择的选择器,比如 :focus 会选择处在焦点状态的 input 元素 ,

:disabled 选择的是被禁用的表单元素,:enabled 选择是启用的表单元素。

子元素选择器

:nth-child 允许我们指定选择第几个子元素

$( ‘ul li:nth-child(1)‘ )

注意这个:nth-child 是从 1 开始的 … 也就是第一个子元素的索引号是1,eq() 是从 0 开始的 。

:nth-child 里可以指定子元素所在位置的关键词 … 比如可以使用 odd 或者 even … 选择奇数位置的子元素 … 或者偶数位置的子元素 …

$( ‘ul li:nth-child(odd)‘ )

:nth-child 还支持选择自己定义的成倍数位置上的子元素 …

比如我们要选择第 4 ,还有第 8 个 li 元素 …

$( ‘ul li:nth-child(4n)‘ )

选择的子元素就是,从1数到 4 ,第4个子元素 … 然后在从第4个子元素往后再数4个数 …

如果你想反过来做的话,可以把 :nth-child … 换成 :nth-last-child …

$( ‘ul li:nth-last-child(4n)‘ )

内容过滤

:contains 这个选择器可以找到包含指定文字内容的元素 … 比如我们想要选择带 Viva 这个词的 li 元素 …

$( ‘li:contains("Viva")‘ )

注意文字的大小写 … 还有文字是字符串形式 … 所以我们需要在文字周围添加一组引号,这里也要注意引号的类型 ,如果外面我们用了单引号 ,那这里就需要使用双引号。

过滤的方法

jQuery 里面提供了一些方法,可以对选择的结果进一步去过滤。

$( ‘li img‘ ).eq(1)

这个位置号,或者叫索引号,也可以是负数 。

我们可以试一下 -1 … 这样,会过滤出倒数第一个结果 …

$( ‘li img‘ ).eq(-1)

.first() 和 .last()

.first() 和 .last() 可以找到结果里的第一个,和最后一个结果 …

先看一下 .first() … 这两个方法都不支持参数,所以,直接在它们的后面输入一个括号就行了。

$( ‘li img‘ ).first()

选择结果里的某个范围,可以使用 .slice() 方法,比如我们想要的是页面上第7个图像到第12个图像 ,

$( ‘li img‘ ).slice(6, 12)

.slice() 这个方法里有两个参数,第一个参数是开始的值 ,第二个参数是结束的值。

使用文档树形里的关系过滤

例如:

$( ‘#christmas‘ ).nextAll()

时间: 2024-08-05 07:05:41

jQuery基础学习笔记(1)的相关文章

jQuery 基础学习笔记总结(一)

Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习

首页 头条 文章 频道                         设计频道 Web前端 Python开发 Java技术 Android应用 iOS应用 资源 小组 相亲 频道 首页 头条 文章 小组 相亲 资源 设计 前端 Python Java 安卓 iOS 登录 注册 首页 最新文章 经典回顾 开发 Web前端 Python Android iOS Java C/C++ PHP .NET Ruby Go 设计 UI设计 网页设计 交互设计 用户体验 设计教程 设计职场 极客 IT技术

JAVA基础学习笔记(2)

看了几天的视频了,都没时间来写下学习笔记,今天来写下第二次的学习笔记,前几天看的给忘记了,就写最新看到的吧 主要内容:1.类的变量与函数(方法) 2.对象的存储方式 3.新建一个对象及对象的赋值与调用 4.空对象 5.匿名对象 1.类的变量与函数(方法) class Dog      //类名 { String name;  //变量的声明 int age; String color; void bark()   //方法的定义(返回值为空,不带参数) { System.out.println(

ASP.Net MVC开发基础学习笔记:三、Razor视图引擎、控制器与路由机制学习

一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASPX引擎或者第三方的NVelocity模板引擎. Razor在减少代码冗余.增强代码可读性和Visual Studio智能感知方面,都有着突出的优势.Razor一经推出就深受广大ASP.Net开发者的喜爱. 1.2 Razor的语法 (1)Razor文件类型:Razor支持两种文件类型,分

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

JAVA基础学习笔记(1)

今天第一天开始学JAVA,时间:2014年6月17日 学习内容:1.java环境的架设 2.JAVA基本数据类型 1.JAVA环境的架设       1.要先去下载JDK,下载地址 2.安装完成后,设置环境变量 1.1环境变量的设置        1.右键-我的电脑-属性-高级-环境变量-系统变量,找到PATH,在里面加入jdk里bin目录的地址 如:c:\java\bin; 2.新建-名为classpath,值为. 1.2测试JAVA是否配置正确        1.在cmd里面输入javac.

java基础学习笔记day01

java基础学习笔记day01 1.软件开发: 软件:按照特定顺序组织的计算机数据和指令的集合 开发:软件的制作过程 软件开发:借助开发工具和计算机语言制作软件 2.java概述: java之父:詹姆斯·高斯林 JDK:java开发环境 jre:java运行环境 JVM:java虚拟机 java跨平台是因为,JVM能在不同的平台运行,JVM是跨平台的 JavaSE:标准版 JavaME:手机端,物联网 JavaEE:企业版,互联网项目 3.java语言特点: 简单性 解释性 面向对象 高性能 分