Python 前端之JQuery
查找：
选择器
筛选器
操作:
CSS
属性
文本
事件：
优化
扩展：
Form表单验证
Ajax:
偷偷发请求
www.php100.com/manual/jquery
http://blog.jquery.com/category/jquery/
利用JQuery实现左侧菜单的隐藏与显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.menu{
height: 600px;
width: 200px;
line-height: normal;
border: 1px solid darkgray;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title" onclick="ShowMenu(this);">标题一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">标题二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">标题三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//$(ths) DOM转化为JQuery
//$(ths)[0] JQuery转化为DOM
function ShowMenu(ths){
$(ths).next().removeClass("hide");
$(ths).parent().siblings().find('.body').addClass("hide");
}
</script>
</body>
</html>
JQuery实现多选框的多选和反选
<script src="jquery-1.12.4.js"></script>
<script>
function CheckALL(){
$('#tb input[type="checkbox"]').prop('checked',true); } function CancelALL(){
$('#tb input[type="checkbox"]').prop('checked',false); } function ReverseALL(){
$('#tb input[type="checkbox"]').each(function(i){
if($(this).prop("checked")){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
})
</script>
JQuery实现复制删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>
<a onclick="Add(this)"> + </a>
<input type="text" />
</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function Add(ths){
var p = $(ths).parent().clone();
p.find('a').text('-')
p.find('a').attr('onclick','Remove(this)');
$(ths).parent().parent().append(p);
} function Remove(ths){
$(ths).parent().remove();
}
</script>
</body>
</html>
JQuery实现的菜单展开与收起
$('.item .title').bind('click',function(){
$(this).next().removeClass("hide");
$(this).parent().siblings().find('.body').addClass("hide");
})
$('.item .title').click(function(){
$(this).next().removeClass("hide");
$(this).parent().siblings().find('.body').addClass("hide");
})
当文档树已经加载完毕了，但是加载的图片还没有出现的时候，后面的代码可以执行，写法如下：
$(function(){
.......
});
JQuery延迟绑定，delegate，什么时候用的时候绑定。
<body>
<input type="button" onclick="Add()"/>
<ul>
<li>第一课</li>
<li>第二课</li>
<li>第三课</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("ul").delegate("li","click", function (){
alert($(this).text());
})
}) function Add(){
var tag = document.createElement('li');
tag.innerText = '666';
$('ul').append(tag);
}
</script>
</body>
JQuery之表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width: 200px;
/*background-color: #2459a2;*/
height: 60px;
/*color: white;*/
position: relative;
}
.item input{
width: 196px;
}
.item span{
/*width: 202px;*/
/*color: red;*/
position: absolute;
background-color: red;
color: white;
/*display: inline-block;*/
top: 20px;
left: 0;
width: 200px;
height: 22px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>不能为空</span>-->
</div>
<input type="submit" value="提交" onclick="return CheckValid()"/>
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckValid(){
// $('form .c1')
// $('form input[type="text"],form input[type="password"]') $('form .item span').remove(); //如果第一次没有输入，那么下面会显示错误信息，第二次输入后，错误信息应该被清除，所以在添加span之前，首先把所有的span标签清除
var flag = true;
$('form .c1').each(function(){
var val = $(this).val();
if (val.length <=0){
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + '不能为空';
$(this).after(tag);
flag = false;
return false;
}
})
return flag;
}
</script>
</body>
</html>
利用JQuery来实现绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width: 200px;
/*background-color: #2459a2;*/
height: 60px;
/*color: white;*/
position: relative;
}
.item input{
width: 196px;
}
.item span{
/*width: 202px;*/
/*color: red;*/
position: absolute;
background-color: red;
color: white;
/*display: inline-block;*/
top: 20px;
left: 0;
width: 200px;
height: 22px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>不能为空</span>-->
</div>
<input type="submit" value="提交" />
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
BindCheckValue();
}) function BindCheckValue(){
$('form input[type="submit"]').click(function() { var flag = true;
$('form .item span').remove();
$('form .c1').each(function () {
var val = $(this).val();
if (val.length <= 0) {
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + '不能为空';
$(this).after(tag);
flag = false;
}
})
return flag;
})
}
// function CheckValid(){
//// $('form .c1')
//// $('form input[type="text"],form input[type="password"]')
// $('form .item span').remove();
// var flag = true;
// $('form .c1').each(function(){
// var val = $(this).val();
// if (val.length <=0){
// var label = $(this).attr('label');
// var tag = document.createElement('span');
// tag.innerText = label + '不能为空';
// $(this).after(tag);
// flag = false;
// }
// })
// return flag;
// }
</script>
</body>
</html>
JQuery之each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
function Test(){
$.each([11,22,33,44],function(k,v){
console.log(k,v)
if (v == 22){
return; //continue
}
if (v == 33){
return false; //break
}
});
}
Test()
</script>
</body>
</html>
执行结果：
0 11
1 22
2 33
JQuery之扩展方法:
假设需要导入extend1.js和extend2.js,由于同时具有两个f1()函数，因此需要使用函数的闭包来处理。
//extend1.js
$.extend({
'dalong1':function(arg){
console.log(arg);
}
}); function f1(){ }
===========================================
//extend2.js
$.extend({
'dalong2':function(arg){
console.log(arg);
}
}); function f1(){ }
那么经过修改之后的函数为：
//extend1.js
a = function(){
$.extend({
'dalong1':function(arg){
console.log(arg);
}
}); function f1(){ }
}; ==================================
//extend2.js
b = function(){
$.extend({
'dalong2':function(arg){
console.log(arg);
}
}); function f1(){ }
};
像上面那么书写了以后，函数只是被定义了但是不会执行，执行的时候报错：
Uncaught TypeError: $.dalong1 is not a function
因为函数默认不会执行，只能在后面添加a();和b(); ,既然如此，就可以写成自执行函数的方式：
extend1.js
(function(){
$.extend({
'dalong1':function(arg){
console.log(arg);
}
});
function f1(){
}
})();
===============================
extend2.js
(function(){
$.extend({
'dalong2':function(arg){
console.log(arg);
}
});
function f1(){
}
})();
在导入的JS里面，使用到了$，那么如果我们需要将JQuery以参数的形式传递到JS里面，代码可以做如下的修改：
//extend1.js
(function(jq){
jq.extend({
'dalong1':function(arg){
console.log(arg);
}
});
function f1(){
}
})($);
================================
//extend2.js
(function(jq){
jq.extend({
'dalong2':function(arg){
console.log(arg);
}
});
function f1(){
}
})(jQuery);
Python 前端之JQuery的更多相关文章
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- 前端之jquery
前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
- 第四篇：web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...
- 【前端】:jQuery下
前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...
- 【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- 前端技术Jquery与Ajax使用总结
前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但 ...
- Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)
Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...
- 第五章、前端之JQuery
目录 第五章.前端之JQuery 一.选择器 二.基本筛选器 三.样式操作 四.位置操作 五.文本操作 六.属性操作 七.文档处理 八.事件 九.动画效果 十.补充 第五章.前端之JQuery 一.选 ...
随机推荐
- CentOS 7 编译安装 Code::Blocks
CentOS 7 编译安装 Code::Blocks yum install cairo-devel yum install pango-devel yum install atk-devel yum ...
- C# 多线程写文件，时常写不成功
在项目中,做一个文本日志功能 为了不影响页面响应速度,所以使用了多线程,在测试的时候,风险文件写入时常不成功,经过一番周折, 发现th.IsBackground = true;后台线程不为主线程的子线 ...
- .Net 的一些插件
1)Webmatrix WebMatrix是一个Microsoft提供的免费的Web开发工具,包括你开发网站所需要的一切.从开源Web应用.内置网页模板开始或者完全自己编写代码.它全面而且简单,最重要 ...
- js 获取浏览器可视窗口大小，滚动条高度
// 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && ( ...
- jQuery-2.1.4.min.js:4 Uncaught TypeError: Illegal invocation
jQuery-2.1.4.min.js:4 Uncaught TypeError: Illegal invocation 此错误与crsf有关
- 没接触C++之前与学习了C++之后的思想转变
我在学习C++之前学习了C,学习C是因为选修时觉得它比较神奇,当时以为学会了C就能纵横计算机领域. 之后听说C++更厉害.并且大多数我这样的男生都喜欢玩游戏,C++又是能编写大型游戏逻辑的语言.于是幻 ...
- SpringMVC案例1——对User表进行CRUD操作
------------------------------------------------------------------web.xml--------------------------- ...
- 自定义webkit搜索框样式
好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...
- 一：解决VirtualBox只能安装32位系统的问题
发现自己的笔记本(Thinkpad E440)里的 VirtualBox 只能安装 32位 的系统,如下图所示: 经过一番查资料,发现这玩意需要到BIOS里设置一下,方可安装 64位 系统,操作如下: ...
- python编码-2
字典 >>> aa={} >>> aa['wo']=[1,2,3,4] >>> aa['ni']=[5,6,7,8] >>> a ...