python16_day14【jQuery】
一、作用域
1.作用域例一
<script>
var str = "global"; //AO1 AO1.str
function t(age){
console.log(str); // undefined
var str = "locale";
// console.log(str); // locale
}
t();
// 预编译，形成AO对象：
/**
* 1.f分析函数的参数：
* 如果没有参数的话，AO对象上没有任何属性
* Ao.age = undefined
* 2.分析函数的变量声明：
* AO.str = undefined
*
* 3.分析函数的函数声明表达式：
* 无
* AO.sum = functioon(){}
* **/
/**
* AO.str = "lcoale"
* **/
</script>
2.作用域例二
<script>
function t(age){
console.log(age); // 词法:5 执行结果:funcation age()
var age = 99;
console.log(age); // 词法:5 执行结果:99
function age() { // 词法:fun 执行结果:99不能执行
}
//age();
console.log(age) // 词法:fun 执行结果:99
}
t(5) /*
********************变量的作用域是在声明时决定的而不是调用执行时决定******************
* 一.词法分析
* 1.有参数时
* age = undenfined
* age = 5
* 2.发现age已经在AO上面,什么也不做.不会复盖age=5
* 3.function age会复盖上面的age=5;(注意在词法分析的时候最后age=funcation age())
*
* 二.执行
* 1.第一个console.log打印function age(){},因为词法分析后,最后就是funcation age(){}
* 2.第二个console.log打印99,因为var age=99把function age(){}复盖.
* 3.第三个console.log打印99, function没有执行,如果执行的话,会报错.
* 4.至于function age()为什么没有复盖 age=99.那么先读(变量的作用域是在声明时决定的而不是调用执行时决定).
* function age()在词法分析的时候生效了,在执行的时候早被第一部让参数复盖;
* */
</script>
二、jQuery事例
1.tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.item{
height:38px;
line-height: 38px;
background-color: #204982;
width:300px;
}
.menu{
float: left;
border-right: 1px solid green;
padding:0 10px;
color:white;
cursor: pointer;
} .hide{
display: none;
} .active{
background-color: #2459a2;
}
</style>
<body>
<div style="width: 700px;margin: 0 auto;">
<div class="item">
<div class="menu active" a="1">菜单一</div>
<div class="menu" a="2">菜单二</div>
<div class="menu" a="3">菜单三</div>
</div> <div class="content">
<div class="info" b="1">内容一</div>
<div class="info hide" b="2">内容二</div>
<div class="info hide" b="3">内容三</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script>
$(".menu").click(function(){
$(this).addClass('active').siblings().removeClass('active');
var v = $(this).attr('a'); // 1, 2, 3
$(this).parent().siblings().children("[b='"+ v +"']").removeClass("hide").siblings().addClass("hide");
});
</script>
</html>
2.动画效果
<body>
<img src="ju.jpg" alt="" style="display: none">
</body>
<script src="jquery.js"></script>
<script>
// $("img").show(1000);
// $("img").hide(1000);
// $("img").toggle("slow");
// $("img").fadeIn(1000);
// $("img").fadeOut(1000);
function test(){
$("img").slideToggle(1000)
}
setInterval(test,3000);
</script>
3.左菜单选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.info{
width:400px;
}
.item{
/*height:34px;*/
}
.header{
/*line-height: 34px;*/
background-color: burlywood;
cursor: pointer;
}
.content{
display: none;
}
</style>
<body>
<div class="info">
<div class="item">
<div class="header">菜单一</div>
<div class="content">内容一</div>
<div class="content">内容一</div>
<div class="content1">内容一</div>
</div>
<div class="item">
<div class="header">菜单二</div>
<div class="content">内容二</div>
<div class="content">内容二</div>
<div class="content">内容二</div>
</div>
<div class="item">
<div class="header">菜单三</div>
<div class="content">内容三</div>
<div class="content">内容三</div>
<div class="content">内容三</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script>
$(".header").click(function(){
$(this).nextAll().css("display","block");
$(this).parent('.item').siblings('.item').children('.content').css("display","none");
});
</script>
</html>
4.左右元素选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
select{
width:150px;
height:300px;
}
</style>
</head>
<body>
<select name="fruit" id="fruit" multiple></select>
<input type="button" value="<---" onclick="toleft();">
<input type="button" value="<===" onclick="totalleft();">
<input type="button" value="--->" onclick="toright();">
<input type="button" value="===>" onclick="totalright();">
<select name="fish" id="fish" multiple>
<option value="">大鱼</option>
<option value="">小鱼</option>
<option value="">虾米</option>
<option value="">甲鱼</option>
<option value="">咸鱼</option>
<option value="">苹果</option>
<option value="">香蕉</option>
<option value="">菠萝</option>
<option value="">西瓜</option>
</select>
</body>
<script src="jquery.js"></script>
<script>
function toleft(){
// append()
$("#fish option:selected").appendTo("#fruit");
} function totalleft(){
$("#fish option").appendTo("#fruit");
} function toright(){
$("#fruit option:selected").appendTo("#fish");
}
function totalright(){
$("#fruit option").appendTo("#fish");
}
</script>
</html>
5.请输入关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--placeholder="请输入关键字" 就可以代替这些,这个属于html5功能-->
<input type="text" >
</body>
<script src="jquery.js"></script>
<script>
$("input[type='text']").focus(function(){
var v = $(this).val();
if(v == "请输入关键字"){
$(this).val("");
}
});
$("input[type='text']").blur(function(){
var v = $(this).val();
if(v == ""){
$(this).val("请输入关键字");
}
})
</script>
</html>
6.文档处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>艺术家们</li>
</ul>
<br>
<input type="button" onclick="add();" value="向ul中添加一个li元素" />
<input type="button" onclick="del();" value="删除元素的内容" />
</body>
<script src="jquery.js"></script>
<script>
function del(){
// $("ul").empty();
$("ul").remove();
}
function add(){
// var myli = $("<li>闫帅</li>");
// $("ul").append(myli);
// var myli = $("<li>苍老师</li>");
// myli.appendTo($("ul")); // var myli = $("<li>alex</li>");
// $("ul").prepend(myli);
var myspan = $("<span>感谢日本艺术家们 alex</span>");
$("ul").before(myspan);
} </script>
</html>
7.样式处理--开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.on{
background-image: url('on.jpg');
}
.off{
background-image: url('off.jpg');
}
div{
width:108px;
height:144px;
}
</style>
<body>
<div id="myimg" class="on off" onclick="bright();"> </div>
</body>
<script src="jquery.js"></script>
<script>
function bright(){ // $("#myimg").removeClass("off");
// $("#myimg").addClass("on");
/**
* 如果有off 去掉off 灯亮
* 如果没有off 加上off 灯灭
* **/
if($("#myimg").hasClass('off')){
$("#myimg").removeClass("off");
}else{
$("#myimg").addClass("off");
} }
</script>
</html>
8.模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.hide{
display: none;
}
.show{
display: block;
}
.shadow{
position: fixed;
top:0;
right:0;
left:0;
bottom:0;
opacity:0.6;
background-color: #000;
z-index: 10;
}
.modal{
position: fixed;
top:10%;
left:20%;
right:20%;
bottom:30%;
background-color: wheat;
z-index: 11;
} </style>
<body>
<input type="button" onclick="addEle();" value="添加"/>
<table border="1" width="400px" id="info">
<tr>
<td target="ip">192.168.1.1</td>
<td target="port">80</td>
<td>
<input type="button" value="编辑" class="edit"/>
</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
<tr>
<td target="ip">192.168.1.2</td>
<td target="port">81</td>
<td>
<input type="button" value="编辑" class="edit"/>
</td>
<td>
<input type="button" value="删除"/>
</td>
</tr> <tr>
<td target="ip">192.168.1.3</td>
<td target="port">82</td>
<td>
<input type="button" value="编辑" class="edit"/>
</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
</table>
<div class="modal hide">
主机IP：<input type="text" value="" name="ip"/><p>
端口号：<input type="text" value="" name="port"/><p>
<input type="button" value="确认">
<input type="button" value="取消" onclick="cancelModel()">
</div>
<div class="shadow hide"></div>
</body>
<script src="jquery.js"></script>
<script>
function addEle(){
$(".hide").css("display","block");
}
function cancelModel(){
$(".hide").css("display","none");
} $(".edit").click(function(){
$(".hide").css("display","block");
var tds = $(this).parent().siblings('td');
// console.log(tds);
tds.each(function(){
var k = $(this).attr('target');
var v = $(this).text();
console.log(k + '---' + v);
var v1 = "input[name = '";
var v2 = "']";
var tmp = v1 + k + v2;
// console.log(tmp);
$(tmp).val(v);
}); //获取ip和port值
// var ip = $(tds[0]).text();
// var port = $(tds[1]).text();
//// console.log(ip + '----' + port);
// // 设置ip和port到模态框内
// $("input[name='ip']").val(ip);
// $("input[name='port']").val(port);
})
</script>
</html>
9.表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" id="info" method="get">
用户名：<input type="text" desc="username"><br>
密码：<input type="password" desc="password"><br>
邮箱：<input type="text" desc="mail"><br>
地址：<input type="text" desc="addr"><br>
<input type="submit" value="提交" >
</form>
</body>
<script src="jquery.js"></script>
<script>
$(":submit").click(function(){
var flag = true;
$(".err").remove();
$("input[type='text'],input[type='password']").each(function(){
var v = $(this).val();
if(v.length == 0 ){
flag = false;
var desc = $(this).attr("desc");
$(this).after($("<span class='err'>" + desc + "必填</span>"));
return false;
}
});
return flag;
})
</script>
</html>
10.全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="SelectAll();">
<input type="button" value="取消" onclick="CancelAll();">
<input type="button" value="反选" onclick="ReverseAll();">
<table border="1px" width="400px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
<script src="jquery.js"></script>
<script>
function SelectAll(){
$("input[type='checkbox']").prop("checked",true);
}
function CancelAll(){
$("input[type='checkbox']").prop("checked",false);
}
function ReverseAll(){
/**
* js的循环：
* for(var i=0;i<length;i++){
* }
*
* for(var i in dict_info){
* }
* **/
$("input[type='checkbox']").each(function () {
// console.log(1);
// console.log($(this));
var s = $(this).prop("checked");
// console.log(s);
if(s){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
/**
* s = 4 > 3 ? true : false
* **/
$(this).prop("checked") ? $(this).prop("checked",false) : $(this).prop("checked",true);
});
}
</script>
</html>
11.阻止事件发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" onclick = "return dianji();">走一波</a>
</body>
<script src="jquery.js"></script>
<script>
function dianji(){
alert('dsadsad');
return false;
}
</script>
</html>
12.隔行换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="400px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
<script src="jquery.js"></script>
<script>
$("tr").mouseover(function(){
$(this).css("background-color","red");
});
$("tr").mouseout(function(){
$(this).css("background-color","white");
})
</script>
</html>
13.页面加载(将js写在页面头部,也不影响加载2个方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
<script>
//方法一
$(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
//方法二
$(document).ready(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
}); </script>
</head>
<body>
<div>
dsjandksandksank
</div>
</body>
</html>
python16_day14【jQuery】的更多相关文章
- 【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
- 【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- js【jquery】 - DOM操作
1.修改元素样式 js方式: var div2 = document.getElementById("") div2.style.width = '200px'; div2.cla ...
- 【jQuery】 实用 js
[jQuery] 实用 js 1. int 处理 parseInt(") // int 转换 isNaN(page) // 判断是否是int类型 2. string 处理 // C# str ...
- 【jQuery】 Ajax
[jQuery] Ajax $.ajax({ type: "Post", // 发包方式 cache: false, // 是否缓存 contentType: "appl ...
- 【jQuery】 常用函数
[jQuery] 常用函数 html() : 获取设置元素内的 html,包含标签 text() : 获取设置元素内的文本, 不包含标签 val() : 获取设置 value 值 attr() : 获 ...
- 【jQuery】 资料
[jQuery] 资料 1. 选择器 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 2. 事件 http://www.w3sch ...
- 【jQuery】 效果
[jQuery] 效果 资料 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 1. 显示隐藏 hide(); 隐藏 show(): 显 ...
- 【jQuery】 选择器
[jQuery] 选择器 资料: w3school http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 1. 标签选择器 : $(& ...
随机推荐
- 转 java调用php的webService
1.首先先下载php的webservice包:NuSOAP,自己到官网去下载,链接就不给出来了,自己去google吧 基于NoSOAP我们写了一个php的webservice的服务端,例子如下: ...
- Jquery Deferred 详解
近期由于公司项目主要由我来负责前端,所以打算优化一下代码.在jquery 里面有个Deferred的对象.为了研究这个也看了不少资料,其中阮一峰的博客写的很详细,这里转载一下. 一.什么是deferr ...
- web.py 安装
安装 安装web.py, 请先下载: http://webpy.org/static/web.py-0.37.tar.gz 或者获取最新的开发版: https://github.com/webpy/w ...
- Java WEB应用开发
B/S计算模式的3层架构: 软件设计与开发模式的演化 面向机器语言的开发模式 软件的生命周期开发模式 需求分析 系统设计 系统开发 系统测试 运行和维护 原型法开发模式 面向组件(Component) ...
- 【vijos】1543 极值问题（数论+fib数）
https://vijos.org/p/1543 好神奇的一题.. 首先我竟然忘记n可以求根求出来,sad. 然后我打了表也发现n和m是fib数.. 严格证明(鬼知道为什么这样就能对啊,能代换怎么就能 ...
- Java深入理解文章（转载）
引用自:http://droidyue.com/ninki/ JVM运行时的数据区 http://droidyue.com/blog/2014/12/21/java-runtime-data-area ...
- 图表 Chart
工作中,需要实现如下的图表,查阅了不少的资料,问了不少的人,下面对下图表的实现代码做下讲解. 实现代码: chart1.Series.Clear();//清空图表中的序列,图表中有默认的序列 //ch ...
- 【python】字符串编码问题
参考:http://blog.csdn.net/tingsking18/article/details/4033645 python内部的字符串是以unicode来编码 decode函数用来将其他编码 ...
- VC++调节显示器的亮度SetDeviceGammaRamp
出处:http://www.nirsoft.net/vc/change_screen_brightness.html SetDeviceGammaRamp API函数位于Gdi32.ll中,接收一个2 ...
- asscert断言的几种方法
一.什么是断言 执行完测试用例后,最后一步是判断测试结果是通过还是失败,在自动化脚本中一般把这种生成测试结果的方法叫做断言 它用来检查一个条件,如果它为真,则不做任何事,如果它为假,则会跑出Asser ...