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. 标签选择器 : $(& ...
随机推荐
- PYTHON中 赋值运算的若干问题总结
1.PYTHON中没有自增自减操作(++,——): 因为PYTHON中对于字符.数值等不可变的对象来说,自增自减没有意义. 2.PYTHON中l连接操作总是创建一个新对象. 举例: L=[1,2] M ...
- html几种美丽的分割线
一.普通 1.<HR> 2.<HR align=center width=300 color=#987cb9 SIZE=1>align 线条位置(可选left.right.ce ...
- C0302 将一个代码块中的内容保存在文件中, 查看一个rpm包是否可以安装
#!/bin/bash # 这个脚本是用来描述和确认是否可以安装一个rpm包 # 在一个文件中保存输出 SUCCESS=0 E_NOARGS=65 if [ -z "$1" ] t ...
- jquery 改变checkbox的值
似乎没什么用... <script> $(document).ready(function(){ $("#comment").change(function(){ va ...
- 长尾分布，重尾分布(Heavy-tailed Distribution)
Zipf分布: Zipf分布是一种符合长尾的分布: 就是指尾巴很长的分布.那么尾巴很长很厚的分布有什么特殊的呢?有两方面:一方面,这种分布会使得你的采样不准,估值不准,因为尾部占了很大部分.另一方面, ...
- poj 3275(传递闭包)
题目链接:http://poj.org/problem?id=3275 思路:对于n个节点,共有n*(n-1)/2对关系,对于给出的m对已经确定的关系,我们可以用传递闭包推出目前已经确定的关系对数an ...
- python入门（五）：面向对象
面向对象术语 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类中且 ...
- Android去掉标题的方法
我们写程序的时候经常要全屏显示或者不显示标题.比如我们做地图导航的时候就不要标题了,下面介绍三种方法来实现Android去掉标题. 第一种:也一般入门的时候经常使用的一种方法 在setContentV ...
- 《Sqlserver》Javaweb项目链接sqlserver 2008R2时出现的一系列的错误
好久没有弄java,玩eclipse了,最近因为小小的原因,参加一个比赛,不得不把javaweb的东西又捡起来,所以不熟悉,再加上之前链接数据库都是用Oracle的,现在公司的电脑上又只是安装了sql ...
- Delphi TreeView – 自动给标题上加图片
Delphi TreeView – 自动给标题上加图片 当处理完TreeView控件树形结构的数据后,根据不同的树形节点Level,加上不同的图片. 图片的ImageList已经放置好,并且TreeV ...