代码改变世界

2013-7-13jQuery学习小记

2013-07-13 17:49  mikx  阅读(211)  评论(0)  编辑  收藏  举报

一、jquery安装

方法一，下载jquery，在页面中引用：

<head>
<script src="jquery.js"></script>
</head>

方法二，使用google CDN（内容分发网络）：

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

二、语法示例

$("p").hide()     隐藏所有<p>段落 
$(this).hide()      隐藏当前标签
$("p.test").hide()       隐藏所有class=test的<p>段落
$("p#test").hide()       隐藏所有id=test的<p>段落

jquery基本的语法是:$(selector).action()
美元符号用来定义Jquery;

选择符(selector)用来查询html元素;

action()用来执行对html元素的操作;

开始使用jquery：

$(document).ready(function(){..........});

所有的jquery函数都位于document ready函数中，为了防止文档在完全加载前就运行行jquery代码。

三、选择器

示例：

$("[href]") 选择所有href

$("[href='#']")选择所有路径为#的href

$("[href!='#']")选择所有路径不为#的href

$("[href$='.jpg']")选择所有尾部为.jpg的href

jquery css选择器，可以改变html元素的css属性，示例：

$("p").css("backgroundcolor","red");

四、jquery事件
示例：

javascript代码练习
目的：点击button，让所有的段落隐藏

<html>
<head>
<script src=""></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>
<h2>这是一段代码<h2>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<button>click me</button>
</body>
</html>