jquery案例
调用js成员
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//找到按钮，并绑定点击事件
$('#btnShow').click(function() {
//找到文本框并获取值
var num = parseInt($('#txtNum').val());//直接调用js的成员进行操作
num++;
//将值显示到文本框
$('#txtNum').val(num);//传递参数时，表示将值赋给value
});
});
</script>
</head>
<body>
<input type="text" id="txtNum"/><input type="button" id="btnShow" value="显示"/>
</body>
</html>
加法计算器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//为按钮绑定点击事件
$('#btnAdd').click(function () {
//获取文本框中的值，并转换成整数
var num1 = parseInt($('#txtNum1').val());
var num2 = parseInt($('#txtNum2').val());
//运算
var result = num1 + num2;
//显示
$('#txtResult').val(result);
});
});
</script>
</head>
<body>
<input type="text" id="txtNum1"/>+
<input type="text" id="txtNum2"/>
<input type="button" id="btnAdd" value="="/>
<input type="text" id="txtResult"/>
</body>
</html>
设置div内容
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('#btnShow').click(function () {
//对于标签对，使用text()、html()进行设置或获取
$('#txt1').text('这是个div');
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="显示" />
<div id="txt1"></div>
</body>
</html>
都是p
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//将jquery对象转换成dom对象：通过[下标]的形式返回dom对象
//通过jquery的选择器得到的数组，才是jquery对象，才可以调用jquery的成员
//将dom对象转换成jquery对象：$(dom对象)
$('#btnShow').click(function() {
$('p').text('都是P');//隐式迭代
$(this).val('abc');
var temp = [1, 2, 3];
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="都是P"/>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</body>
</html>
文档操作
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('#btnAppend').click(function () {
//动态创建jquery对象
var zhh = $('<b>Zhh</b>');
//追加
$('#divContainer').append(zhh);
});
$('#btnAppendTo').click(function () {
//追加到
$('<b>拍电影</b>').appendTo($('#divContainer'));
});
$('#btnEmpty').click(function () {
//清空所有子元素
$('#divContainer').empty();
});
$('#btnRemove').click(function() {
//$('#divContainer').remove();
$('<span style="color:red">sadkfjlsad</span>').insertBefore('#divContainer');
});
});
</script>
</head>
<body>
<input type="button" id="btnAppend" value="Append"/>
<input type="button" id="btnAppendTo" value="AppendTo"/>
<input type="button" id="btnEmpty" value="Empty"/>
<input type="button" id="btnRemove" value="Remove"/>
<div id="divContainer">asdfsdaf</div>
</body>
</html>
层级选择器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//空格表示查找所有子级
$('#d1 div');
});
</script>
</head>
<body>
<div id="d1">
<div id="d11"></div>
<div id="d12">
<div id="d121"></div>
<div id="d122"></div>
</div>
<div id="d13"></div>
</div>
<div id="d2"></div>
<div id="d3">
<div id="d31">
<div id="d311"></div>
<div id="d312"></div>
<div id="d313"></div>
</div>
</div>
</body>
</html>
样式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//设置样式
//$('#btnShow').css('background-color', 'red');
//设置多个样式
$('#btnShow').css({
'color': 'white',
'background-color': 'blue',
'font-size': '20px'
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="显示" />
</body>
</html>
开关灯
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('#btnLight').click(function () {
if (this.value == '关灯') {
$('body').css('background-color', 'black');
$(this).val('开灯');
} else {
$('body').css('background-color', 'white');
$(this).val('关灯');
}
});
});
</script>
</head>
<body>
<input type="button" id="btnLight" value="关灯"/>
</body>
</html>
li练习1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('li').hover(function() {//指向
$(this).css({
'color': 'red',
'cursor':'pointer'
});
}, function () {//移开
$(this).css('color', 'black');
}).click(function() {//链式编程，编写点击事件
$(this).appendTo('#ul2');
});
});
</script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<ul id="ul2">
</ul>
</body>
</html>
jquery案例的更多相关文章
- python 学习笔记十四 jQuery案例详解（进阶篇）
1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- Python之路【第十二篇续】jQuery案例详解
jQuery 1.jQuery和JS和HTML的关系 首先了HTML是实际展示在用户面前的用户可以直接体验到的,JS是操作HTML的他能改变HTML实际展示给用户的效果! 首先了解JS是一门语言,他是 ...
- JQuery案例一：实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery案例2
$(this).index用来获取取到的所有元素的序号 省市联动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xh ...
- 黑马day16 jquery案例演示
案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- JQuery案例：折叠菜单
折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...
- Jquery案例——某网站品牌列表的效果
一下是效果图.点击"显示全部品牌",高亮推荐品牌,并显示全部品牌. HTML文件: <!DOCTYPE html> <html lang="en&quo ...
- JQuery案例二：实现全选、全不选和反选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JQuery案例：购物车编辑
购物车编辑 实现了:商品的加减,总价的变动 实现了:全选/全不选(使用prop而不是attr) 实现了:删除(遮罩层) <html> <head> <meta chars ...
随机推荐
- Ubuntu16.04 ionic(jdk,sdk,gradle)环境搭建完全攻略
在Ubuntu16.04当中搭建一个ionic环境还是按照官方教程的来,主要问题是首先要把JDK,SDK搭好,环境变量配好.本文中给的包的下载请不要直接用浏览器下载,很慢,尽量用wget 下载,重要的 ...
- webpack 大概
entry output loader: rules: [ {test:匹配文件格式, use: 使用的loader}, {test:匹配文件格式, use: 使用的loader}, ...//l ...
- impala和kudu使用的小细节
七堇年:我们要有最朴素的生活与最遥远的梦想 . 即使明日天寒地冻,路远马亡. 加油! 之前入门的小错误总结,建表都会出错,真的好尴尬 还是要做好笔记 第一个错误: error:AnalysisEx ...
- Python 字符串String相关知识
test.capitalize( ) |首字母大写 test.lower( ) |全部变成小写(只能处理英文字母) test.casefold( ) | ...
- 最全面的Redis命令行查阅手册（收藏查看）
Redis是用C语言实现的,一般来说C语言实现的程序“距离”操作系统更近,执行速度相对会更快. Redis使用了单线程架构,预防了多线程可能产生的竞争问题. 作者对于Redis源代码可以说是精打细磨, ...
- 马凯军201771010116《面向对象与程序设计Java》第十五周学习知识总结
实验十五 GUI编程练习与应用程序部署 一.知识学习部分 清单文件 每个JAR文件中包含一个用于描述归档特征的清单文件(manifest).清单文件被命名为MANIFEST.MF,它位于JAR文件的 ...
- .NET并行计算和并发8：硬件支持
共享内存多核系统,分布式内存系统 区别 分布式内存系统主要通过Message passing interface在各个微处理器之间通信,但是MPI共享内存多核系统是没有必要的,会造成额外的开销. 分布 ...
- 基于testng框架的web自动化测试
package baidutest; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.o ...
- 如何快速判断一个key是否存在在亿级数据中(bloomFilters)
面试题 现在有一个非常庞大的数据(亿级),假设全是 int 类型.现在我给你一个数,你需要告诉我它是否存在其中(尽量高效) 分析 采用bloomFilters进行实现(时间&空间尽可能的有效) ...
- Redis学习笔记一
Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用. Redis不仅仅支持简单 ...