jQuery的简单入门练习
<html>
<head>
<meta charset="utf-8">
<title>jQuery的练习</title>
<script src="jquery.js"></script> <script language="javascript">
$("document").ready(function(){
$("#p1").click(function(){
alert($("#p3").text());
}); $("#p2").click(function(){
alert($("#p3").html());
}); $("#b1").click(function(){
alert($("#b2").val());
}); $("#a1").click(function(){
alert($("#a2").attr("href"));
}); $(".b1").click(function(){
$(".p1").text("欢迎加入柠檬");
}); $(".b2").click(function(){
$(".p2").html("也欢迎你加入柠檬");
}); $(".b3").click(function(){
$(".p3").val("柠檬棒棒哒");
}); $(".s1").click(function(){
$(".s2").append("<b>棒棒哒;</b>");
}); $(".f1").click(function(){
$(".f2").prepend("<b>柠檬人;</b>");
}); $("#q1").click(function(){
$("img").before("<i>美女;</i>");
}); $("#q2").click(function(){
$("img").after("<i>帅哥;</i>");
}); $("#g1").click(function(){
$("#g2").remove();
}); $("#k1").click(function(){
$("#k2").empty();
}); $("#c1").click(function(){
$("h2,i").addClass("col");
}); $("#c2").click(function(){
$("h2").removeClass("col");
}); $("#c3").click(function(){
$("h4").toggleClass("col");
}); $("#d1").click(function(){
//$("p").css("background-color","purple");
$("p").css({"background-color":"purple","font-size":"26px"});
}); });
</script>
<style type="text/css">
.col{
color:red;
font-size:28px;
} </style>
</head>
<body>
<h3>1:text() - 设置或返回所选元素的文本内容;
html() - 设置或返回所选元素的内容（包括 HTML 标记）
</h3>
<div>
<p id="p3">这是段落中的<b>粗体</b>文本</p>
<button id="p1">显示文本</button>
<button id="p2">显示HTML</button>
</div>
<br/><hr>
<h3>2:val() - 设置或返回表单字段的值</h3>
<div>
名称：<input type="text" id="b2" value="柠檬学院"/>
<button id="b1">显示值</button>
</div>
<h3>3:获取属性 - attr();jQuery attr() 方法用于获取属性值。</h3>
<div>
<a id="a2" href="http://www.bjlemon.com">柠檬学院</a><br/>
<button id="a1">显示href属性的值</button>
</div>
<br><hr>
<h3>4:设置内容 - text()、html() 以及 val();
text() - 设置或返回所选元素的文本内容;
html() - 设置或返回所选元素的内容（包括 HTML 标记）;
val() - 设置或返回表单字段的值
</h3>
<div>
<p class="p1">这是一个段落</p>
<p class="p2"><b>这是另一个段落</b></p>
输入框：<input class="p3" type="text" value="柠檬学院"/><br/><br/>
<button class="b1">设置文本</button>
<button class="b2">设置HTML</button>
<button class="b3">设置值</button>
</div>
<br/><hr>
<h3>5:append() - 在被选元素的结尾插入内容;
prepend() - 在被选元素的开头插入内容;
after() - 在被选元素之后插入内容;
before() - 在被选元素之前插入内容
</h3>
<p class="s2">柠檬学院</p>
<button class="s1">末尾添加文本</button>
<p class="f2">柠檬学院</p>
<button class="f1">开头插入文本</button>
<br/>
<img src="index.jpg"/><br/>
<button id="q1">之前</button>
<button id="q2">之后</button>
<br><hr>
<h3>6:remove() - 删除被选元素（及其子元素）;empty() - 从被选元素中删除子元素
</h3>
<div id="g2" style="width:200px;height:200px;background-color:pink">
<p>柠檬学院棒棒哒</p>
<p>我要成为柠檬人</p>
<p>为了柠檬而奋斗</p>
</div>
<button id="g1">删除</button>
<hr>
<div id="k2" style="width:200px;height:200px;background-color:pink">
<p>柠檬学院棒棒哒</p>
<p>我要成为柠檬人</p>
<p>为了柠檬而奋斗</p>
</div>
<button id="k1">删除</button>
<br><hr>
<h3>7:addClass() - 向被选元素添加一个或多个类;
removeClass() - 从被选元素删除一个或多个类;
toggleClass() - 对被选元素进行添加/删除类的切换操作;
css() - 设置或返回样式属性;
</h3>
<h2>柠檬学院</h2>
<i>柠檬人</i><br/>
<button id="c1">为元素添加css样式</button>
<button id="c2">删除元素的css样式</button><br/>
<h4>柠檬人加油！！！</h4>
<button id="c3">切换css</button>
<br><hr>
<h3>
8:css() 方法设置或返回被选元素的一个或多个样式属性。
</h3>
<div>
<p style="background-color:red;">柠檬学院</p>
<p style="background-color:yellow;">柠檬学院</p>
<p style="background-color:pink;">柠檬学院</p>
<p style="background-color:blue;">柠檬学院</p>
</div>
<button id="d1">设置css样式</button> </body>
</html>
jQuery的简单入门练习的更多相关文章
- JQuery Mobile 简单入门引导
看了慕课网的jqm视频(http://www.imooc.com/learn/207),觉的不错,简单截几个图,做一下备忘:
- 从零开始学习jQuery (一) 开天辟地入门篇
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...
- HTML5简单入门系列（五）
前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- Bootstrap简单入门
Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...
- 用IntelliJ IDEA创建Gradle项目简单入门
Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...
- [原创]MYSQL的简单入门
MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...
- jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
随机推荐
- 【Android UI设计与开发】第05期：引导界面（五）实现应用程序只启动一次引导界面
[Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界 ...
- libcurl多线程超时设置不安全(转)
from http://www.cnblogs.com/kex1n/p/4135263.html (1), 超时(timeout) libcurl 是 一个很不错的库,支持http,ftp等很多的协议 ...
- iOS 判断电话号 几种方法
1.方法一 - (BOOL)isMobileNumber:(NSString *)mobileNum { /** * 手机号码 * 移动:134[0-8],135,136,137,138,139,15 ...
- ZT 理解 Android 上的安全性
理解 Android 上的安全性 http://www.ibm.com/developerworks/cn/xml/x-androidsecurity/ 利用沙箱.应用程序签名和权限增强应用程序安全性 ...
- Windows XP SP3下编译安装openssl-1.1.0b
软件需要: openssl-1.1.0b visual studio 2010(cn_visual_studio_2010_ultimate_x86_dvd_532347.iso) perl:Acti ...
- SQL Server 查看物理页存储
创建测试表 Use Test create table dbo.employee( emp_lname varchar(12) not null, emp_fname varchar(12)not n ...
- PostGreSQL 分页
select * from users limit 10 offset 20; limit A offset B 其中A是页容量 B是偏移量 即跳过前20条 查询每页10条
- iOS.AppThinning-iOS9-new-feature-for-app-thinning-bitcode-odr-slicing
Bitcode 0. Introduction to Bitcode 1. Build static library or framework via Xcode 7, while user buil ...
- UIWebView加载页面
在页面中 加载了一个webView 当点击该webView的页面 需要获取webView中的url. 在push出来的另一个页面中,重新初始化一个webView加载 下面这个方法 在webView加载 ...
- NameError: name 'pip' is not defined
NameError: name 'pip' is not defined 直接去cmd下执行...pip pip install virtualenv