专栏首页我的博客Jquery学习第一天

Jquery学习第一天

1、jQuery优点

轻量级,强大的选择器,出色的DOM操作,可靠的事件处理,完善的Ajax,不污染的顶级变量,出色的浏览器兼容,链式操作,隐式迭代,行为层和结构层分离,丰富的插件,完善的文档,开源

2、类型说明

Jquery-*.js完整的版本,主要用于测试和学习开发

Jquery-*.min.js主要用于产品和项目

3、引入jquery开始学习

<script src=”jquery-1.7.2.js” type=”text/javascript”></script>

4、JQuery宗旨

用少量的代码实现复杂的功能

5、先体验一个简单的例子

代码如下:

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>

<script src=”jquery-1.7.2.js” type=”text/javascript”></script>

<style>

#menu{ width:200px;}

.has_children{ background:#555;color:#fff;cursor:pointer;}

.highlight{color:#fff; background:green;}

div{ padding:0; margin:10px 0px;}

div a{ background:#888; display:none; float:left; width:200px;}

</style>

<body>

<div id=”menu”>

<div class=”has_children”>

<span>认识Jquery</span>

<a>栏目名称</a>

<a>栏目名称</a>

<a>栏目名称</a>

<a>栏目名称</a>

<a>栏目名称</a>

<a>栏目名称</a>

</div>

<div class=”has_children”>

<span>认识Jquery2</span>

<a>栏目名称2</a>

<a>栏目名称2</a>

<a>栏目名称2</a>

<a>栏目名称2</a>

<a>栏目名称2</a>

<a>栏目名称2</a>

</div>

<div class=”has_children”>

<span>认识Jquery2</span>

<a>栏目名称2</a>

<a>栏目名称2</a>

<a>栏目名称2</a>

<a>栏目名称2</a>

<a>栏目名称2</a>

<a>栏目名称2</a>

</div>

</div>

<script type=”text/javascript” language=”javascript”>

$(“.has_children”).click(function(){

$(this).addClass(“highlight”)

.children(“a”).show().end()

.siblings().removeClass(“highlight”)

.children(“a”).hide();

});

</script>

</body>

PS:其中js代码必须在下部,还有就是如果代码复杂一定要做适量的注释

6、认识JQuery对象和DOM对象

通过javascript的getElementsByTagName或者getElementById得到的元素节点就是DOM对象,而其他都是JQuery对象。

$(“#footer”).html();//这是jquery对象

特别注意:两个对象的方法不要弄混淆了,不可以互用的

7、Jquery对象和dom对象转换

7.1Jquery转换成dom

使用[index]转换:

var $jq=$(“footer”);//jquery对象

Var do=$jq[0]//dom对象

使用get方法

Var do=$jq.get(0);//dom对象

7.2dom转换成jquery

对与dom对象只需要用$()把dom对象包含起来就可以

Var do=document.getElementById(“footer”);//dom对象

Var $jq=$(do);

8、Jquery开发工具

Dreamweaver、aptana、jquerywtp等

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mysql命令行操作教程【一】

    今天突然有人问我会不会用mysql控制台建立数据库?我犹豫了,您呢? 于是就打算好好研究下mysql控制台命令。平时我们使用phpmyadmin或者navica...

    苦咖啡
  • Mysql错误代码大全

    1016错误:文件无法打开,使用后台修复或者使用phpmyadmin进行修复。 1044错误:数据库用户权限不足,请联系空间商解决 1045错误:数据库服务器/...

    苦咖啡
  • Ubuntu初始化svn一系列脚本

    个人ubuntu服务器初始化svn脚本,虽然很烂,但是自己用起来很方便!(为何写ubuntu呢?因为centos的svn模块和ubuntu不一样!) #!/bi...

    苦咖啡
  • Python解惑之对象可变与不可变

    面向对象的语言,普遍存在的一个问题就是对象的可变(mutable),与对象的不可变(immuatable)。它是重要的,理解这个概念对于我们认识面向对象,避免掉...

    double
  • vagrant搭建centos环境前言环境准备安装修改配置文件启动与连接常用vagrant命令清空重新导入镜像配置文件 Vagrantfile填坑记录

    macos作为开发环境已经相当方便,有很丰富的工具,如homebrew类似于ubuntu的apt-get和centos的yum,很方便地安装各种开发工具。但终究...

    章鱼喵
  • Runtime在iOS开发中的实际应用

    运行时的文章一直被同学们热炒,当然现在面试中也都喜欢问道,当大伙说的头头是道时候,可到真正的项目中几乎局限只会关联对象或者MethodSwizzling奉为神剑...

    羊羽shine
  • 鼠标点击层以外的地方层隐藏

    根据去哪儿(http://www.qunar.com/)输入框点击按钮而写 实现功能效果: 1、点击按钮,相应层显示,点击层以外的部分层隐藏; 2、重复点击按钮...

    Porschev
  • KNN算法的Python实现

    #-----------------------------------------------------#

    py3study
  • 『高级篇』docker之课程管理dubbo入门操练(14)

    PS:dubbo的入门也就到这里,从spring 和springboot 对dubbo的整合。

    IT故事会
  • 微服务等于Spring Cloud?一文告诉你微服务到底是什么。

    首先微服务并没有一个官方的定义,想要直接描述微服务比较困难,我们可以通过对比传统WEB应用,来理解什么是微服务。

    黄泽杰

扫码关注云+社区

领取腾讯云代金券