`
pollyanna
  • 浏览: 8092 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论
  • pollyanna: css中clear的作用:clear 属性定义了元素的哪边上不 ...
    CSS学习

jQuery学习

阅读更多

         在学习jquery的之前,首先要知道什么是DOM。DOM(Document Object Model),它是由浏览器建立的一个树状结构,方面我们用js寻找html中的元素。

在Dom里,html元素以节点(<-我自己的翻译nodes)的形式相互关联起来。

当我们在浏览器中输入一个url的时候,浏览器会去寻找这个url所对应的html文件,然后把它加载到Dom中去,如果html中有引用Js文件,也需要把这些js文件传到浏览器中。在浏览器里,js文件和Dom交互。

(这里补充一点,江江告诉我,我们在写html的时候,最后把js文件的引用写在html的底部。这样我们就不用等到js文件全部加载完毕之后才能看的到页面。)

        我们为什么要使用jquery呢?

        是因为不同的浏览器在js的使用标准上有一些微小的差别。但是jquery,它可以很好的在大多数浏览器上运行。

 

开始学习jquery

在写jquery程序之前,也得现在html中引入jquery。一共有两种方法,一个是下载一个jquery文件,然后直接引用。如果不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。谷歌和微软的服务器都存有jQuery。

可以通过以下代码引用谷歌服务器的jquery:

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

 

 

 

在引入了jquery文件后,就开始了jquery程序编写的学习。

首先,我学习了下面这个代码:

 

$(document).ready(); 

 

这个代码的意思是,页面已经加载完毕。

我们一般这个样子使用这段代码:

$(document).ready(function(){
....jquery程序...
});

 

这样的话,就保证了我们的jquery可用性。因为如果html页面还没有加载完毕我们就对里面的内容进行操作,可能会粗线错误。

 

在确认html页面加载完了之后,我们要对html里面的元素进行操作了。那么,该怎么操作呢?

第一步,我们应该找到我们要进行操作的这个元素,jquery找元素的格式和css一样。

比如说我们有如下html代码:

<body>
<p>Pollyanna is a cute girl.</p>
</body>

那么,这个时候我们可以通过$('p')来找到这个paragraph这个元素。

再比如说,如果我们按照id来找html元素:

<body>
<p id='anna'>Pollyanna is a cute girl.</p>
</body> 

那么,我们可以通过$('#anna')来找到该元素。

再比如说,如果我们按照class来找html元素:

<body>
<p id='anna',class='cute'>Pollyanna is a cute girl.</p>
</body>

那么,我们可以通过$('.cute')来找到这个元素。

 

 

在jquery里面,有个叫做descendant selector的选择方法。

顾名思义,就是在一个元素里面寻找子元素的方法。

<ul class="Anna">
	<li>Anna is a girl.
		<ul>
			<li>Anna is a cute girl.</li>
			<li>Anna is a smart girl.</li>
		</ul>
	</li>
	<li>Anna is 22.</li>
</ul>

 

 

那么:

$(".Anna li");

这个语句是选定class为Anna列表里面所有的li元素。

$(".Anna > li");

这个语句是选定class为Anna列表里面所有的li元素。

 

 

添加一个新的<html>元素

 

举个例子:

var sentence = $('<p>Anna ist klein.</p>');//新建了一个html元素

$('.Anna').append(sentence);//这句话代表在上面的class为Anna的元素的最后,添加sentence这个元素
$('.Anna').prepend(sentence);//这句话代表在上面的class为Anna的元素的最前面,添加sentence这个元素
$('.Anna').after(sentence);//这句话代表在上面的class为Anna的元素的后面,添加sentence这个元素
$('.Anna').before(sentence);//这句话代表在上面的class为Anna的元素的前面,添加sentence这个元素

 

jquery的事件绑定

举个栗子:

 

$('button').on('click',fucntion(){
	//函数内容
})

 

以上程序的意思是:点击button这个按钮,就将执行函数里面的内容。

可以将'click'换成'focusin',表示当鼠标移上去的时候,函数执行。

 

如何用jquery添加样式

 

1.可以先在css文件中写一个叫做Anna的类,在它里面写好需要的样式。

然后可以通过以下程序添加该类或者删除该类。

$('button').addClass('Anna');  //添加Anna类
$('button').removeClass('Anna');  //删除Anna类

 

2.也可以在jquery程序中直接写样式

$('button').css('background-color','black');
$('button').css('border-color','1px solid red');

也可以直接这样写

$('button').css('background-color':'black','border-color':'1px solid red');

  

 以上是我在学习jquery过程中的一些收获。

 

分享到:
评论

相关推荐

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记 Jquery学习笔记

    jquery资料--jquery学习资料

    jquery学习资料--jquery代码和学习教程

    jquery学习资料+教程

    jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf

    JQuery学习手册.rar

    该 JQuery学习手册.rar 里面包含了JQuery学习的详细信息!非常棒的学习资料!

    精选 jquery 学习资料

    精选 jquery 学习资料,这里面的notes.txt 是对文件夹里面文件的的介绍

    jQuery学习示例 大全

    jQuery学习示例 大全 最新

    JQuery学习资料

    JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习

    learn.jquery.com, jQuery学习中心网站内容.zip

    learn.jquery.com, jQuery学习中心网站内容 jQuery学习站点这里站点的目标是双重的:如何使用jQuery和JavaScript信息的中心。可以信。详细的详细信息。为了保持及时。活动和社区驱动的参考,具有相对较低的贡献。...

    Jquery学习手册

    jquery学习笔记,很全面的介绍jquery的用法。 存在的html片段)包装成jQuery对象。 $()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+...

    Jquery学习文档中文WORD版

    资源名称:Jquery学习文档 中文WORD版内容简介:本文档主要讲述的是Jquery学习文档;jQuery是继Prototype之后有一个优秀的Javascript库,是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要...

    jquery 教程 jQuery学习资料 jQuery学习

    jquery 教程 jQuery学习资料 jQuery学习

    jQuery学习指南

    jQuery学习指南 和手册一起用,多看看没坏处

    Jquery学习 Jquery源代码 Jquery数据库操作

    Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用,技术含量

    Jquery 学习与实例Jquery 学习与实例

    Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与...

    JQuery学习总结及实例中文WORD版

    资源名称:JQuery 学习总结及实例 中文WORD版内容简介:普通Javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对Javascript 的封装库,...

    jQuery学习文档

    jQuery学习文档,跟快的适应开发的的不发

    jQuery学习名额大转盘抽奖代码.zip

    jQuery学习名额大转盘抽奖代码是一款抽奖完成会弹出奖品表单信息代码。

    jquery学习资料

    jquery学习资料ppt和demo阿发沙发士大夫十分公司打工风格士大夫

    jQuery学习资料

    jQuery学习资料,包含多个jquery的学习资料,适合初中级学习文档

    jquery学习资料大全

    压缩文件中,包含jquery使用的js脚本文件,jquery介绍文档(包括pdf和教程),对应出学者是一个很好的学习资料

Global site tag (gtag.js) - Google Analytics