编程►web

jquery基础

jQuery简介

jQuery是一个JavaScript函数库，它可以完成以下操作：

  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

那么如何使用jQuery库呢？
jQuery库其实就在一个JavaScript文件中，其中包含了所有的jQuery函数。通过下面的标记就可以将jQuery添加到网页。

1
2
3
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

jQuery的下载可以点击jQuery从官网下载。
要是不想在本地计算机存放Jquery库，也可以从Google或者Microsoft加载CDN jQuery文件，具体使用方式如下。
使用Google的CDN

1
2
3
4
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用Microsoft的CDN

1
2
3
4
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

jQuery语法

基础语法

基础语法是$(selector).action()。

  • $符号定义jQuery
  • selector查询或查找HTML元素
  • action()执行对元素的操作

示例

1
2
3
4
$(this).hide() //隐藏当前元素
$("p").hide()  //隐藏所有段落
$(".test").hide()  //隐藏所有class="test”的元素
$("#test").hide()  //隐藏所有id="test"的元素

选择器

jQuery元素选择器和属性选择器允许通过标签名、属性名或内容对HTML元素进行选择。
选择器允许对HTML单个元素进行操作。

  • jQuery元素选择器
    jQuery使用呢CSS选择器来选取HTML元素。
    示例

    1
    2
    3
    $("p")  //选取<p>元素
    $("p.intro")  //选取所有class="intro"的<p>元素
    $("p#demo")  //选取所有id="demo"的<p>元素

  • jQuery属性选择器
    jQuery使用XPath表达式选择带有给定属性的元素。
    示例

    1
    2
    3
    4
    $("[href]")  //选取所有带有href属性的元素
    $("[href='#']")  //选取所有带有href值等于"#"的元素
    $("[href!='#']")  //选取所有带有href值不等于"#"的元素
    $("[href='.jpg']")  //选取所有href值以.jpg结尾的元素

  • jQuery CSS选择器
    jQuery CSS选择器可用于改变HTML元素的CSS属性。
    示例

    1
    $("p").css("background-color","red");  //所有p元素的背景颜色修改为红色

关于选择器有更多的内容，可以点击jQuery 参考手册 - 选择器查看。

事件

  • jQuery 事件函数
    jQuery事件处理方法是jQuery中的核心函数。
    通常会把jQuery代码放到<head>部分的事件处理方法中。
    示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).read(function(){
        $("button").click(function()){
            $("p").hide();
        });
    });
    </script>
    </head>
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me</button>
    </body>
    </html>

当按钮的点击事件被触发时会调用一个函数，该方法隐藏所有的<p>元素。

  • 常用的事件方法
    $(document).ready()
    允许在文档完全加载完成后执行函数。 
    1
    2
    3
    $(docunment).ready(function(){
        //jQuery代码
    });

上述写法简化为

1
2
3
$(function(){
    //jQuery代码
});

click()
当按钮点击事件被触发时调用一个函数。
示例

1
2
3
$("p").click(function(){
    $(this).hide();
});

当点击事件在某个<p>元素出发时，隐藏当前的<p>元素。
dbclick()
双击元素时，会发生dbclick事件。此时将调用对应函数。
示例

1
2
3
$("p").dbclick(function(){
    $(this).hide();
});

focus()
当元素获得焦点时，发生focus事件。
focus()方法出发focus事件，或规定发生focus事件时运行的函数。
示例

1
2
3
$("input").foucs(function(){
    $(this).css("background-color","#cccccc");
});

更多关于jQuery事件可以点击jQuery 参考手册 - 事件查看介绍。

Recommended Posts