jQuery学习笔记

来源：互联网发布：安卓手机淘宝网编辑：程序博客网时间：2024/06/08 07:01

jQuery是什么？是一个JavaScript库，使用JavaScript语言写的一个函数库，通过调用这个库中的各种函数，简化直接使用JavaScript编写程序，高效快捷简便的对HTML页面进行处理。

jQuery库包括以下功能：

a. HTML元素选取与操作

b. CSS操作

c. HTML事件函数

d. JavaScript的特效与动画

e. HTML DOM的遍历和修改

f. AJAX

既然jQuery是一个JavaScript语言编写的轻量级库，那么在使用时就需要导入这个库，jQuery的库文件可以从官网下载http://jquery.com/download/#Download_jQuery

在使用时，将库文件导入到使用页面中：

<javascript type="text/javascript" src="jquery.js"></javascript>

1、语法

jQuery是为HTML元素的选取与操作编制的，选取元素并对元素操作，所以其语法是这样的：

$(selector).action()

其中，$是jQuery的定义与标示，()是选择器，根据selector进行选择元素，action()是对选择出的元素进行操作。

jQuery的使用部分一般放置在如下位置：

<script type="text/javascript" src="jquery-1.12.2.js"></script><script type="text/javascript">$(document).ready(function(){//使用jQuery的地方});</script>

$(document).ready();是对document元素进行选取，在该元素ready操作里执行jQuery的使用。

这是为了防止在文档未完全加载完成之前，对jQuery进行使用。在文档未加载完成之前使用，会导致出错。

看一个简单的例子：jQuery中hide()函数的使用，hide()函数具有隐藏的功能，对选取的元素进行隐藏。

<script type="text/javascript" src="jquery-1.12.2.js"></script><script type="text/javascript">$(document).ready(function(){//为HTML中的button元素的click事件添加函数，//执行哪一个button的click事件时，对该元素的事件执行函数$("button").click(function(){$(this).hide();});});</script></head><body><button type="button">Click me</button><button type="button">Click me</button></body>

先为元素的事件添加函数，再在函数中添加对应的操作，$(this)是选取当前的元素。

2、选择器

关键点是如何使用选择器准确的选出希望进行操作的元素。

选择器可分为元素选择器、属性选择器，运行通过标签名、属性名以及内容对HTML元素进行选择。

选择器允许对DOM元素组或单个元素节点进行操作。

元素选择器

$("p") 选取所以<p>元素

$("p.intro") 选取所有满足class="intro"的<p>元素

$("p#demo") 选取第一个id="demo"的<p元素>

属性选择器
$("[href]") 选取所有带有href属性的元素

$("[href='#']") 选取所有href属性值等于"#"的元素

$("[href!='#']") 选取所有href属性值不等于"#"的元素

$("[href$='.jpg']") 选取所有href属性值以.jpg结尾的元素

3、事件函数

由上边的例子可以看出，一般jQuery函数是为了响应某个事件的，jQuery的事件处理函数就是在HTML中某个事件产生时，进行调用的函数，比如click()函数

先选取元素，再为元素调用事件处理函数，在事件处理函数中，编写需要响应的操作

$("button").click(function(){//....});

在jQuery的使用中，一般使用$对jQuery的进行标示，但有时会与别的JS库产生冲突，

jQuery提供了一个避免冲突的方法，开发者可以自己设定代替$的标志

使用 var jq = jQuery.noConflict()函数，那么jq就代替了$，此时再使用$调用jQuery就会出错。

<script type="text/javascript">//使用其他的标示符代替$，避免冲突var jq= jQuery.noConflict();jq(document).ready(function(){//为HTML中的button元素的click事件添加函数，//执行哪一个button的click事件时，对该元素的事件执行函数jq("button").click(function(){jq(this).hide();});});</script>

自己编写的js库，一般为了方便维护，会写在单独的js文件中，在使用时，像引入jQuery一样引入就可以使用

4、效果

jQuery可以创建隐藏、显示、切换、滑动以及自定义动画等效果。

hide(), show()

对所选的原始进行隐藏和显示

<html><head><meta charset="utf-8"/><script type="text/javascript" src="jquery-1.3.1.js"></script><script type="text/javascript">$(document).ready(function(){  $("#hide").click(function(){  $("p").hide();  });  $("#show").click(function(){  $("p").show();  });});</script></head><body><p id="p1">如果点击“隐藏”按钮，我就会消失。</p><p>dsfgfsf</p><button id="hide" type="button">隐藏</button><button id="show" type="button">显示</button></body></html>

先根据id选择元素，再对元素添加相应的显示和隐藏事件

也可以通过hide(speed), show(speed)指定时间（毫秒单位）的方式指定显示和隐藏的速度，也可以指定“slow”,"fast","normal"的方式

还有很多这种函数：

$(selector).hide()隐藏被选元素$(selector).show()显示被选元素$(selector).toggle()切换（在隐藏与显示之间）被选元素$(selector).slideDown()向下滑动（显示）被选元素$(selector).slideUp()向上滑动（隐藏）被选元素$(selector).slideToggle()对被选元素切换向上滑动和向下滑动$(selector).fadeIn()淡入被选元素$(selector).fadeOut()淡出被选元素$(selector).fadeTo()把被选元素淡出为给定的不透明度$(selector).animate()对被选元素执行自定义动画

5、Callback函数

在执行完一个响应函数后，希望接着执行另外一个函数，那么就可以使用Callback函数的方式，目的是当前动画100%完成后调用callback函数

典型语法：

$(selector).hide(speed,callback)

在执行完hide()方法后，执行alert()

  <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){  $("p").hide(500, function(){    alert("The paragraph is now hidden");  });  });});</script></head><body><button type="button">Hide</button><p>This is a paragraph with little content.</p></body></html>

6. HTML操作

改变html的内容：使用html()方法，可以改变所有匹配的元素的内容

$(selector).html(content)

如，修改所有p元素的内容为"phpStudy"

<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){  $("p").html("phpStudy");  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">请点击这里</button></body></html>

还有很多方法，如下：

$(selector).html(content)改变被选元素的（内部）HTML$(selector).append(content)向被选元素的（内部）HTML 追加内容$(selector).prepend(content)向被选元素的（内部）HTML “预置”（Prepend）内容$(selector).after(content)在被选元素之后添加 HTML$(selector).before(content)在被选元素之前添加 HTML

7. CSS函数

主要是更改元素的渲染效果，方法有：

$(selector).css(name,value)为匹配元素设置样式属性的值$(selector).css({properties})为匹配元素设置多个样式属性$(selector).css(name)获得第一个匹配元素的样式属性值$(selector).height(value)设置匹配元素的高度$(selector).width(value)设置匹配元素的宽度例如，css({properties})的使用，设置多个属性值

  <html><head><script type="text/javascript" src="../jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    $("p").css({"background-color":"red","font-size":"200%"});  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

css(name)的使用，获取样式的属性值，并显示在文本中

<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("div").click(function(){  $("#result").html($(this).css("background-color"));  });});</script></head><body><div style="width:100px;height:100px;background:#ff0000"></div><p id="result">Click in the box</p></body></html>

8. Ajax函数

study ajax ing...

0 0