几个简单的jQuery使用方法

jQuery是JavaScript的一个集成库,语法简洁,它紧密集成了DOM,提供了方便的ajax的辅助方法、令人震撼的界面效果,以及可插拔的体系结构。
下面将介绍一些jQuery的关键特性:

一、jQuery的安装:
1.本地引入。在jQuery官网下载jquery.js,在自己的文件中添加:

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

2.CDN引入,在文件中添加一下代码:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">script>

二、jQuery的几个特性:
首先在创建一个html文档,有其基本框架,jquery.html:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">script>
    <script type="text/javascript">
        $(document).ready(function(){
            //自身要写的jQuery代码
        });
    script>
head>
<body>
    <a href="" class="button" id="check_un">a>
    <span id="title">nihaospan>
    <img src="" class="cover">
    <ul>
        <li>firstli>
        <li>secondli>
        <li>thirdli>
        <li>forthli>
    ul>
body>
html>

$(document).ready(function(){});可以确保在html没有加载到客户浏览器之前不会执行jQuery代码,因为不这样做,可能会导致意想不到的副作用,javascript可能会修改还未呈现的页面元素。
注意:之后的所有代码都是在$(document).ready(function(){});中嵌套着的。

<script type="text/javascript">
    $(document).ready(function(){
        //自身要写的jQuery代码
    });
script>

1.响应事件。在JavaScript中,经常会用到 οnclick=“javascript函数”,但是这个方法将页面的设计与逻辑过于紧密的耦合在一起,并不漂亮,可以用jQuery,如下:

$("#check_un").click(function(event){
    alert("hello");
    event.preventDefault();
});

2.将id为title处的内容显示出来

    var title = $("#title").html();
    alert(title);

3.得到与类关联的图像的src值

    var title = $("#title").html();
    alert(title);

4.统计项目符号的个数

    var count = $("li").size();
    alert(count);

5.循环处理符号项

    $('li').each(function(){
        alert($(this).html());
    });

6.修改页面元素用html()方法

    $("#title").html("the awesomest book title ever");

你可能感兴趣的:(JavaScript,jquery)