JQuery入门

原创
2015/08/03 23:46
阅读数 669

JQuery入门

学习JQuery之前,先了解一下HTML、CSS、JavaScript。

    JQuery是JavaScript的一个函数库

主要有:

1.HTML元素提取

2.HTML元素操作

3.CSS操作

4.JavaScript 特效和动画

5.HTML DOM 遍历和修改

6.AJAX

7.Utilities

一、如何在HTML中使用JQuery

在页面中head中加入script标签

<head>

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

</head>

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

二、JQuery最鲜明的特点

$是作为JQuery做明显的特征之一。它的基本用法:$(selector).action()

(1)selector有点类似DOM解析.

(2)action则为响应事件.

三、JQuery选择器

(1)使用CSS来提取HTML元素

提取html中所有"p"的标签: $("p")

提取html中某个类中的"p"的标签:$("p.class")

提取html中id为demo的第一个为"p"的标签:#("p#demo")

(2)使用XPath来提取给定属性的元素

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

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

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

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

四、响应事件

$("标签").click(function() {...some code... } )

(1)在HTML中的head中

<head>

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

<script type="text/javascript">

$(document).ready(function(){

 $("button").click(function(){

  ...some code...

 });

});

</script>

</head>

(2)在单独的JS中

<head>

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

<script type="text/javascript" src="my_jquery_functions.js"></script>

</head>

注意:JQuery名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

五、事件函数

常见事件:隐藏、显示、切换、滑动 以及动画


展开阅读全文
加载中

作者的其它热门文章

打赏
0
21 收藏
分享
打赏
5 评论
21 收藏
0
分享
返回顶部
顶部