jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。

1：jQuery使用

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

    <script type="text/javascript">

        $(document).ready(function(){

            $("#clickme").click(function(){

                alert("Hello, jQuery!");

                }

            );

        });

    </script>

src中的路径可以是自己下载的，也可以用Google或者ie的CDN分发的版本

使用谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

2：使用范例及注意事项：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html" charset="utf-8">

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

<script type="text/javascript">

function del(){

    $("#bd").remove();

}

function appendText()

{

var txt1="<p id='bd'>Textbd.</p>";               // 以 HTML 创建新元素

var txt2=$("<p id='del' onclick='del()'></p>").text("Textdel.");   // 以 jQuery 创建新元素//""之间用'

var txt3=document.createElement("p");  // 以 DOM 创建新元素

txt3.innerHTML="Text.";

$(".pp").before(txt1,txt2,txt3);         // 追加新元素

}

$(document).ready(function(){

    $("#app").click(function(){

        $("h1,h2").addClass("blue");

        $("#i").addClass("important blue");//多个类之间用空格

    });

    $("#i").click(function(){

        $("h1").toggleClass("blue");

    });

    $("#f").click(function(){

        $("#f").css({"color":"purple","fontSize":"35px"});//一个属性用逗号.css("background-color","yellow");

        alert($("#f").css("color"));

    });

    $("#emp").click(function(){

        $("#emp").empty();

    });

    $("#btn1").click(function(){

        $(".p").prepend("<b>Hello boy </b>.");

    });

    $("#btn2").click(function(){

        $("ol").append("<li>append</li>");

    });

    $("#x").click(function(){

        alert($("#test").val());

        $("#w3s").attr({

        "href" : "http://www.jb51.net/jquery",//查看网页代码没有变，但实际上已经改变，很神奇的一个地方，应该是卸载浏览器内存里面，没有刷新页面

        "title" : "W3School jQuery Tutorial"

      });

    });

    $("#d").click(function(){

        var div=$("#t");

        div.animate({height:'300px',opacity:'0.4'},"slow")

        .animate({width:'300px',opacity:'0.8'},"slow")

        .animate({height:'100px',opacity:'0.4'},"slow")

        .animate({width:'100px',opacity:'0.8'},"slow")

        .animate({left:'+=100px'},"slow")

        .animate({fontSize:'3em'},"slow");

        alert($("#t").html("<b>Hello world!</b>"));

        // $("#t").animate({

        //     left:'250',

        //     opacity:'0.5',

        //     height:'150px',

        //     width:'toggle',

        // });

    });

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

    //     $("p").fadeTo(2000,0.8);

    //     $("#div1").fadeTo();

    //     $("#div2").fadeTo("slow",0.5);

    //     $("#div3").fadeTo(3000,0.1);

    // });

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

        $(".panel").slideToggle("slow");

    });

    $("#stop").click(function(){

        $("#t").stop();

    });

});

</script>

<style type="text/css">

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

}

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

</head>

<body>

<h1>标题 1</h1>

<h2>标题 2</h2>

<h2 id="f">返回颜色的css</h2>

<div id="i">这是非常重要的文本！</div>

<br>

<button id="app">向元素添加类</button>

<div id="emp" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.

<p>This is a paragraph in the div.</p>

<p>This is another paragraph in the div.</p>

</div>

<p class="pp" onclick="appendText()">This is a paragraph.</p>

<p class="p">This is another paragraph.</p>

<ol>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ol>

<button id="btn1">追加文本</button>

<button id="btn2">追加列表项</button>

<p><a href="file:///C:/Users/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3.HTML" id="w3s">jb51.net</a></p>

<p>姓名：<input type="text" id="test" value="米老鼠"></p>

<button id="x">显示值</button>

<button id="stop">停止滑动</button>

<button id="d">开始动画</button>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:relative;" id="t">python

</div>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

<div class="panel">

<p>W3School - 领先的 Web 技术教程站点</p>

<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

</div>

<div class="panel">

<p>W3School - 领先的 Web 技术教程站点</p>

<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

</div>

<p class="flip">请点击这里</p>

</body>

</html>

jQuery 入门笔记1的更多相关文章

  1. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  2. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  3. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

  4. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  5. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  6. ES6入门笔记

    ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...

  7. [Java入门笔记] 面向对象编程基础（二）：方法详解

    什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...

  8. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. PAT java大数 A+B和C

    题目描述: 给定区间[-, ]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=),是测试用例的个数.随后给出T组测试用例,每组占一行,顺序给出A.B和C ...

  2. [剑指Offer] 29.最小的K个数

    [思路1]全排序(快排)之后取出前K个数.O(K+nlogn) class Solution { public: vector<int> GetLeastNumbers_Solution( ...

  3. 【心情】HNOI2018游记

    Day 0. 全机房的人好像都在做题.然而下午是社团节的游园会,身为社干的我风风雨雨在外面各种搬凳子搬椅子换场地招待外校同学……就这样我好像什么都没有复习. 晚上就一起去酒店了.大概因为是高一的缘故, ...

  4. 洛谷 P2894 [USACO08FEB]酒店Hotel 解题报告

    P2894 [USACO08FEB]酒店Hotel 题目描述 The cows are journeying north to Thunder Bay in Canada to gain cultur ...

  5. jsp电子商务购物车之四 数据库存储篇

    为了方便用户下次登录,仍然可以看到自己的购物车内容,所以,需要在数据库存储相应的购物车项目,本处增加购物车项表;uid和bid是复合主键. package com.cart.entity; //购物车 ...

  6. sshd_conf配置

    #    $OpenBSD: sshd_config,v 1.80 2008/07/02 02:24:18 djm Exp $   # This is the sshd server system-w ...

  7. VC++中编译C出错：error C2143: syntax error : missing ';' before 'type'

    转摘自:http://preceo.blog.51cto.com/6225017/1130931 近来写程序时发现了一个问题,用 VC 编译 C语言是 总是提示一个错误:error C2143: sy ...

  8. 51Nod 1256 求乘法逆元--扩展欧几里德

    #include<stdio.h> int exgcd(int a,int b,int &x,int &y) { ) { x=; y=; return a; } int r ...

  9. mysql5.7.11安装遇到的问题

    首次安装mysql5.7.11绿色版,真是破费功夫,现记录安装中遇到的问题,只是解决了问题,而不清楚问题的由来. 问题一: 问题二: 问题三: 问题四: 我的my.ini配置文件: [mysql] # ...

  10. php连接mysql报错——Fatal error: Call to undefined function mysql_connect() in

    练习php连接mysql数据库 代码:mysql_connect("127.0.0.1:3306","root", ..... 浏览器报错:Fatal erro ...