初识jQuery(适合初学者哟.........)

 您要知道!!

  jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。

   微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,

   为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。

 

 

我们先来学习一下jQuery的语法结构:

$(selector).action();

1.工厂函数$()

在jQuery中,"$"美元符号等价于jQuery,即$()=jQuery(),$()的作用是将DOM对象转化为jQuery对象,只有将DOM对象装化为jQuery对象后,才能使用jQuery的方法

注意!!!!!!:

当$()参数是DOM对象时,该对象不需要使用双引号包裹起来,如果获取的是document对象,则写作$(document)

2.选择器

jQuery几乎支持CSS中的所有选择器,如:标签选择器,类选择器,ID选择器,后代选择器

语法:

$(selector)

选择表达式可以是CSS选择器:

1 $(document)//选择整个文档对象
2 $('#myId')//选择ID为myId的网页元素
3 $('div.myClass')//选择class为myClass的div元素
4 $('input[name=first]')//选择name属性等于first的input元素

(1).首先我们来学习jQuery的第一个方法addClass();

addClass()方法是jQuery中用于进行CSS操作的方法之一,它的作用是向被选元素添加一个或多个样式,它的语法结构如下

语法
jQuery 对象.addClass([样式名])
其中,样式名可以是一个也可以是多个,多个样式名需要用空格隔开

实现的功能:

增加一条样式规则: .addClass(‘myClass’)

增加多条样式规则: .addClass(‘myClass yourClass’)

(2).jQuery的css方法

语法:
css(
"属性","属性值");

 定义和用法

  css() 方法返回或设置匹配的元素的一个或多个样式属性。

实例 1

将所有段落的颜色设为红色:

$("button").click(function(){$("p").css("color",function(){return "red";});});

实例 2

逐渐增加 div 的宽度:

$("div").click(function() {$(this).css("width", function(index, value) {return parseFloat(value) * 1.2;});
});

(3).jQuery对象和DOM对象的相互转换

jQuery对象转成DOM对象: 
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); 
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。 
如:var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象 
如:var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 
DOM对象转成jQuery对象: 
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象) 
如:var v=document.getElementById("v"); //DOM对象 
var $v=$(v); //jQuery对象 
转换后,就可以任意使用jQuery的方法了。 
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。 

下面是其它的相关使用方法:
1、DOM对象转jQuery对象 
普通的Dom对象一般可以通过$()转换成jQuery对象。 

如:$(document.getElementById("msg")) 
返回的就是jQuery对象,可以使用jQuery的方法。 

2、jQuery对象转DOM对象 
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。 
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5] 

这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。 

以下几种写法都是正确的: 
$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;

 

转载于:https://www.cnblogs.com/fanziyang/p/5511604.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261256.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java方法区对象类型_浅谈Java内存区域与对象创建过程

一、java内存区域Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域。这些区域都有各自的用途,以及创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有的区域则依赖用户线程的启动和结束而建立和销毁。根…

Week1 Team Homework #2 Introduction of team member with photos

小组成员介绍 组长:黄剑锟 11061164 组员:顾泽鹏 11061160 组员:周辰光 11061154 组员:龚少波 11061167 组员:赵骞 11061155 组员:孙时 11061146 组员&am…

TextView控件

下面我们将比较一下Android中的TextView和C#Winform中TextBox的不同。 当我们要获取一个文本框控件时。 C#:TextBox1                      //直接输入控件的名称即可 Android:TextView tv (TextView) this.findViewById(R.id.tv); // 获取…

[Silverlight入门系列]使用MVVM模式(3):Model的INotifyPropertyChanged接口实现

当客户端绑定一个数据模型以后,数据模型变化以后可以自动通知客户端更新界面显示,这就是INotifyPropertyChanged接口要做的工作。INotifyPropertyChanged 接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知。例…

inttostr java_Delphi和Java实现webservice架构

Webservice现在已经不是什么新技术了,用java建立webservice是快捷的,但是用java在制作客户端的感觉上总是不如 Delphi的(个人感觉,java高手们不要笑话我),那我们就用java实现webservice的服务端程序,delphi制作客户端。…

XML DOM 节点

来自:w3cschool菜鸟教程 在 DOM 中,XML 文档中的每个成分都是一个节点。 DOM 节点 根据 DOM,XML 文档中的每个成分都是一个节点。 DOM 是这样规定的: 整个文档是一个文档节点每个 XML 元素是一个元素节点包含在 XML 元素中的文本是…

CentOS系列启动流程和内核原理(5系列,6系列,7系列)

前言,本来让我写博客我是拒绝的然而看见大家都在写,还能不能一起友好的玩耍了? 我要是不写怎能和同大神们一起ZB呢?遂开博客! 一、Linux启动内核文件 1.Linux系统组成 动态视角:内核根文件系统 静态视…

如何在CentOS 5.5上安装Kippo蜜罐

Kippo是一个可交互的SSH蜜罐,旨在记录暴力攻击行为,最重要的是可以记录攻击者的shell交互行为,如果你需要了解有关Kippo更多信息,请访问它的官方网站http://code.google.com/p/kippo/,本教程只教你如何在CentOS 5.5服务…

LSTM和GRU vs 循环神经网络RNN

1、考虑下列三种情况下,对比一下普通RNN的表现和LSTM和GRU表现: (1)早期观测值对预测未来观测者具有非常重要的意义。 考虑一个极端情况,其中第一个观测值包含一个校验和, 目标是在序列的末尾辨别校验和是…

uva10617 - Again Palindrome(dp)

再次回文 输入:标准输入 输出:标准输出 时间限制: 2秒 是palindorme的读取相同的从左边,因为它从右侧的一个或多个字符的序列。例如,Ž,TOT和女士的 回文,但是,ADAM是不是。 给定一个…

java ora-12505_Oracle SQL Developer连接报错(ORA-12505)的解决方案(两种)

用oracle数据库新建连接时遇到ora-12505,此问题解决后又出现ora-12519错误,郁闷的半天,经过一番折腾问题解决,下面小编把我的两种解决方案分享给大家,仅供参考。解决方案一:今天工作时在新建连接的时候遇到…

例题9-6 UVa11400 Lighting System Design(DP)

题意: 看白书 要点: 其他的白书上讲的比较清楚了,状态转移方程为:d[i] min(d[i], d[j] (s[i] - s[j])*bulb[i].c bulb[i].k),有点难以理解的是如果i到j之中有的不进行换比较合理怎么办?但其实这种情况是…

【Silverlight】解决DataTemplate绑定附加属性

本文 Silverlight 版本:4.0。 首先定义数据类型,此文始终使用此定义类型。public class SimpleData : ViewModelBase{private string _text;private int _column, _row;public string Text { get { return _text; } set { _text value; OnPropertyChang…

青春无悔

青春像是一座城,放纵的思想、禁锢的世界总让自己感到如履薄冰,只能踽踽独行在阡陌的途中,我喜欢世界是自由的,我喜欢生活是淡然的,淡然的境界早已挣脱时空的枷锁,穿行在历朝历代,如莲花般盛开在…

java中udi_Java读取.properties配置文件的方法

java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是 "键值"的格式,在properties文件中,可以用"#"来作注释&#…

android 中文 api (72) —— BluetoothSocket[蓝牙]

前言 本章内容是 android.bluetooth.BluetoothSocket,为Android蓝牙部分的章节翻译。蓝牙通讯套接字,代表了与远端设备的连接点,使用socket本地程序可以通过inputstream和outputstream与远端程序进行通讯。版本为 Android 2.3 r1,…

Linux常用命令(二)

19. 文件压缩命令 (1)。gzip [文件名]  压缩后的文件格式是.gz   只能压缩文件不能压缩目录 不保留源文件 (2)。gunzip [文件名]  解压缩命令 (3)。tar 选项[cvf] [目录]  打包目录  压缩后的文件…

五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题

这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代码如下,很简单,…

致年轻开发人员的一封信

我收到了很多年轻开发人员写给我的邮件,希望可以提升自己的编程能力。我肯定不是第一个讨论这个话题的人,所以我不确定还可以说出什么新意。然而,这里我认为还是非常值得列出我认为很重要的几点吧。 要跟其他开发者一起工作。我们正处在科技史…

笔记整理之 SHELL 变量

变量的类型:1.自定义变量定义变量: 变量名变量值 变量名必须以字母或下划线开头,区分大小写 url1test.3glong.com 引用变量: $变量名 或 ${变量名} 查看变量: echo $变量名 set(所有变量:包括自定…