jQuery 入门笔记1
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的更多相关文章
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery:自学笔记(1)——基础入门
jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- [Java入门笔记] 面向对象编程基础（二）：方法详解
什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
随机推荐
- Understand:高效代码静态分析神器详解（一） | 墨香博客 http://www.codemx.cn/2016/04/30/Understand01/
Understand:高效代码静态分析神器详解(一) | 墨香博客 http://www.codemx.cn/2016/04/30/Understand01/ ===== 之前用Windows系统,一 ...
- java笔试面试01
今天给大家分享一下小布去广州华南资讯科技公司笔试和面试的过程. 过程:1.HR面试 2.笔试 3.技术面试 小布下午两点到达,进门从前台领了一张申请表,填完之后带上自己的简历到4楼就开始HR面试. ...
- java正则表达式2 -- 匹配、切割、查找
import java.util.Arrays; /* 正则表达式的作用: 1 匹配 2 切割 3 替换 * */ public class Demo1 { public static void ma ...
- tomcat 服务添加到系统服务
tomcat: 设置环境变量: CATALINA_HOME: tomcat路径 列如:D:\apache-tomcat-8.5.24 打开命令窗口,进入到tomcat/bin目录下 执行service ...
- 教你一步一步在linux中正确的安装Xcache加速php
#第一步,下载Xcache wget http://xcache.lighttpd.net/pub/Releases/3.1.0/xcache-3.1.0.tar.gz #第一步非常简单,如果你下载不 ...
- 框架开发中的junit单元测试
首先写一个测试用的公共类,如果要搭建测试环境,只要继承这个公共类就能很容易的实现单元测试,代码如下 import org.junit.runner.RunWith; import org.spring ...
- 【bzoj3626】[LNOI2014]LCA 树链剖分+线段树
题目描述 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q次询问,每次询 ...
- BZOJ4557 JLOI2016侦察守卫（树形dp）
下称放置守卫的点为监控点.设f[i][j]为i子树中深度最大的未被监视点与i的距离不超过j时的最小代价,g[i][j]为i子树中距离i最近的监控点与i的距离不超过j且i子树内点全部被监视时的最小代价. ...
- Java Web开发之路（一）——环境配置
1. 下载JDK(Java Development Kit)工具包.其中包括运行Java程序所必须的JRE环境及开发过程中常用的库文件. (JDK与JRE的关系: JDK是Java的开发环境,在编写J ...
- [CF1031E]Triple Flips
题目大意:给你一个长度为$n$的$01$串,一次操作定义为:选取$3$个等距的元素,使其$0$变$1$,$1$变$0$,要求在$\Big\lfloor \dfrac n 3\Big\rfloor+12 ...