您要知道!!

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

初识jQuery(适合初学者哟.........)相关推荐

  1. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  2. 适合初学者的数据结构_数据结构101:数组-初学者的直观介绍

    适合初学者的数据结构 了解您每天使用的数据结构. (Get to know the data structures that you use every day. ) Welcome! Let's S ...

  3. 适合初学者的数据结构_数据结构101:图-初学者的直观介绍

    适合初学者的数据结构 了解您每天使用的数据结构 (Get to know the data structures that you use every day) Welcome! Let's Star ...

  4. Python适合初学者或者0基础学习吗?

    Python适合初学者或者0基础小白学习吗?很多人都比较关注这个问题,因为近几年Python在互联网行业的发展显而易见,它的就业几率也非常高,具体来看看下面的详细介绍吧. Python适合初学者或者0 ...

  5. 适合初学者的java书籍

    学习java技术除了报Java培训班还有自学,书本知识一定不能忘了,书本知识带来的价值更直观,也方便记录,下面小编就为大家详细的介绍一下适合初学者的java书籍. java培训分享适合初学者的java ...

  6. 适合初学者学java技术的书籍推荐!

    想要学会java技术,光靠听课是不够的,看书也是非常重要的一步,以下小编为大家推荐的是适合初学者学java技术的书籍,希望能够给初学者们带来帮助. 适合初学者学java技术的书籍推荐! 1. Java ...

  7. 适合初学者对Yaf框架的学习(一)

    前言 最近接触到Yaf框架,从最初按照鸟哥惠新宸的写的关于Yaf手册,到自己写一个hello world 程序,对于我这个新手来说还是蛮曲折的,大家都知道yaf框架是用C写的,所以自身的效率和性能,还 ...

  8. python项目实例初学者-适合初学者练手的 10 个 有趣Python项目

    Python Python开发 Python语言 适合初学者练手的 10 个 有趣Python项目 想成为一个优秀的开发者,没有捷径可走,势必要花费大量时间在键盘后. 而不断地进行各种小项目开发,可以 ...

  9. 自学python的书籍逐级推荐-适合初学者和经验的十大最佳Python书籍-2018

    1,最佳Python书籍清单 在这篇文章中,我收集了一些适合初学者和经验丰富的最佳Python书籍的信息.我们还提到了每本书的简要介绍.这将帮助您根据您的要求选择最好的python书籍.此外,它还涵盖 ...

最新文章

  1. 【SqlServer】SqlServer中的更新锁(UPDLOCK)
  2. PermissionError: [Errno 13] Permission denied: ‘name.pdf‘
  3. 用python解析html[SGMLParser]
  4. Spring Cloud系列:不重启eureka,清除down掉的服务
  5. 框架:HTTP请求的表单提交的几种方式
  6. android realmax sdk,RealMax推出全新开源AR SDK 框架ARToolKit
  7. 搜索引擎web spam类型及防治策略(version 0.9)
  8. Liferay 用PortletSession 实现不同Liferay之间通讯
  9. 【HDU - 1266 】Reverse Number(模拟,数字分位数处理)
  10. MySQL千万级别大表如何优化?
  11. java jtable导出txt_如何将jtable中的文本数据保存到文件中
  12. ECMAScript:客户端脚本语言的标准
  13. 蔡司数码视疲劳测试软件_居家办公期间,频繁使用电子数码产品小心患上这种眼病...
  14. 要想不被套,学会这八招
  15. 10以内逆向运算题_加减法启蒙系列 | 实战篇二(10以内减法)
  16. Mac彻底卸载搜狗输入法
  17. 连接服务器成功获取角色信息,客户端 获取 服务器 角色属性
  18. 2023年山东大学社会工作考研成功上岸经验分享
  19. matlab编程求20的阶乘和,matlab编程求20的阶乘
  20. 惠普打印机墨盒更换教程_hp打印机墨盒怎么安装 hp打印机墨盒安装方法【详解】...

热门文章

  1. 图形学教程Lecture 14: RayTracing1(Acceleration Radiometry)知识点总结
  2. GPU Gems2 - 7 带位移映射的细分表面自适应镶嵌
  3. matlab程序中,如何解决矢量长度必须相同的问题
  4. 将sublime text3添加到右键菜单中(可执行)
  5. bzoj 1232: [Usaco2008Nov]安慰奶牛cheer【最小生成树】
  6. 201521123004《软件工程》个人阅读作业1
  7. Jenkins 安装与使用--实例
  8. 【Win10 应用开发】自定义应用标题栏
  9. yo angualr-fullstatck 项目打包部署
  10. 好消息:VS 2008 and .NET 3.5 Beta 2 发布了