jquery基础2012

最新推荐文章于 2022-09-20 20:44:33 发布
最新推荐文章于 2022-09-20 20:44:33 发布
阅读量214 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014330950/article/details/72820748
版权 
response.Write "<script language=javascript>alert('原密码错误，请返回重新输入');history.go(-1);</script>"
response.End
返回到前一页 
response.Write "<script language=javascript>alert('请返回输入密码!');location.href='login.asp';</script>"
response.End

history.back(1);

js学习

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#one").click(function(){
    $("p.one").hide();
  });
});

$(document).ready(function(){
  $("p.one").mouseover(function(){
    $("p.one").hide();
  });
});
$(document).ready(function(){
  $("#hide").click(function(){
  $("p#p1").hide();
  });
  $("#show").click(function(){
  $("p#p1").show();
  });
});

$(document).ready(function(){
  $(".dianwo").click(function(){
  $("p.dong").hide(1000);
  });
});

$(document).ready(function(){
  $(".qiehuan").click(function(){
  $("p.lalala").toggle(1000);
  });
});

$(document).ready(function(){
  $(".danru").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

$(document).ready(function(){
  $(".donghua").click(function(){
    $("div#donghua").animate({
	  left:'250px',
      height:'+=10px',
      width:'+=10px'
	  });
  });
});

</script>
</head>

<body>
<h2>This is a heading</h2>
<p class="one">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="one">Click me</button><br>
==========================================

<p id="p1">如果点击"隐藏"按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button><br>
=========================================


<p class="dong">这是一个段落。</p>
<p class="dong">这是另一个段落。</p>
<div class="dianwo">点我缓慢动</div><br>
=========================================


<p class="lalala">这是一个段落。</p>
<p class="lalala">这是另一个段落。</p>
<div class="qiehuan">切换</div><br>
=========================================

<p>演示带有不同参数的 fadeIn() 方法。</p>
<div class="danru">淡入淡出</div>
<br>
<div id="div1" style="width:80px;height:10px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:10px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:10px;display:none;background-color:blue; "></div>
<br>
=========================================
<p class="flip">请点击这里</p>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 <br>
=========================================
<div class="donghua">开始动画</div>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div id="donghua" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>




</body>
</html>

点击变class 

<!doctype html>
<html lang="zh-cn">
 <head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style type="text/css">
	p { 
	color: #000000; /* black */ 
	} 
	p.emphasis { 
	color: #cc0000; /* red */ 
	} 
  </style>
 </head>
 <body>
	<p id="test">Test</p>
	<hr>
	<input type="button" value="修改className为emphasis" οnclick="document.getElementById('test').className = 'emphasis';"><br>
	<input type="button" value="修改className为空" οnclick="document.getElementById('test').className = '';"><br>
 </body>
</html>
点击展开收缩代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} 
</style>
<script type="text/javascript">
//===========================点击展开关闭效果====================================
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
   if(shutAble) return;
   targetObj.style.display="none";
   if(openTip  &&  shutTip){
    sourceObj.innerHTML = shutTip; 
   }
} else {
   targetObj.style.display="block";
   if(openTip  &&  shutTip){
    sourceObj.innerHTML = openTip; 
   }
}
}
</script>
<title>无标题文档</title>
</head>
<body>
<p><a href="###" οnclick="openShutManager(this,'box')">点击展开</a></p>
<p id="box" style="display:none">
   这里面放的是box的内容.
</p>
<p><a href="###" οnclick="openShutManager(this,'box2',true)">点击展开</a></p>
<p id="box2" style="display:none">
   这里面放的是box的内容.
</p>
<p><a href="###" οnclick="openShutManager(this,'box3',false,'点击关闭','点击展开')">点击展开</a></p>
<p id="box3" style="display:none">
   这里面放的是box的内容.
</p>
<p><button οnclick="openShutManager(this,'box4',false,'点击关闭','点击展开')">点击展开</button></p>
<p id="box4" style="display:none">
   这里面放的是box的内容.
</p>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

js点击的各种

function add2(){
	var sum=3+2;
	alert(sum);
	}
var mystr="hello world";
document.write(mystr);
document.write("我喜欢瑞文"+mystr);
document.write("<u>咋咋地</u>");
var mynum=30;
//alert("接下来你将看到");
//alert(mynum);
function rec(){
	var mychar="i love javascript";
	alert(mychar);
	}
function ceshi(){
	var mymessage=confirm("你喜欢javascript吗？");
	if (mymessage==true){
		document.write("加油！很好");
		}else{
		document.write("js功能很强大，要学习哦！");
		}}
function fenxi(){
	var score;
	score=prompt("请输入您的成绩");
	if(score>=90){
		document.write("你很棒");
		}
		else if (score>=75){
			document.write("不错yo");
			}
			else{
				document.write("要努力了");
				}
	}
function tanchu(){
	window.open('http://www.qq.com','_blank','width=300,height=200,menubar=no,toolbar=no,status=no,scrollbars=yes')
	var mywin=window.open("http://www.baidu.com");
	mywin.close();
	}

对应的html 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用JS文件</title>
<script src="script.js"></script>
</head>
<body>
<form>
<input type="button" value="点击" onClick="add2()">
<input type="button" value="点击我弹出对话框" onClick="rec()">
<input type="button" value="我们现在做个测试" onClick="ceshi()">
<input type="button" value="现在我们做个评价" onClick="fenxi()">
<input type="button" value="点击打开窗口" onClick="tanchu()">
</form>
</body>
</html>
点击新窗口打开 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
function xin(){
	var mymessage=confirm("确定要打开吗");
	if(mymessage=true){
		window.open('Untitled-6.html','_blank','width=400,height=500')
		}else{}
	
	}
</script>
</head>

<body>
<input type="button" onClick="xin()" value="新窗口打开网站">
</body>
</html>

点击更改 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
    border:#333 solid 1px;
	padding:5px;}
p{
	line-height:18px;
	text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript课程</H2>
  <div id="txt"> 
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onClick="changeColor()">  
    <input type="button" value="改变宽高" onClick="changeSize()">
    <input type="button" value="隐藏内容" onClick="hidetext()">
    <input type="button" value="显示内容" onClick="showtext()">
    <input type="button" value="取消设置" onClick="resettext()">
  </form>
  <script type="text/javascript">
   var myh = document.getElementById("con");
    var mydiv = document.getElementById("txt");
//定义"改变颜色"的函数
function changeColor(){
    mydiv.style.color="red";
    
}

//定义"改变宽高"的函数
function changeSize(){
    mydiv.style.width="200px";
    mydiv.style.height="300px";
}

//定义"隐藏内容"的函数
function hidetext(){
    mydiv.style.display="none";
}

//定义"显示内容"的函数
function showtext(){
    mydiv.style.display="block";
}

//定义"取消设置"的函数
function resettext(){
    var mychose = confirm("确定取消这些设置吗");
    if(mychose==true){
       mydiv.removeAttribute("style");
    }
}

  </script>
</body>
</html>
点击更改class 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<p id="con">javascript</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("结果："+mychar.innerHTML);
</script>
<h2 id="con2">javascript</h2>
<script type="text/javascript">
var mychara=document.getElementById("con2");
document.write(mychara.innerHTML);
mychara.innerHTML="helloworld";
document.write("修改后的标题："+mychara.innerHTML);
</script>
<h2 id="con"></h2>
<script type="text/javascript">
var mychar=document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#ccc";
</script>
<script type="text/javascript">
function hidetext(){
	var mychar=document.getElementById("con3");
	mychar.style.display="none";
	}
function showtext(){
	var mychar=document.getElementById("con3");
	mychar.style.display="block";
	}
</script>
<h1>javascript</h1>
<p id="con3">啦啦啦啦啦啦啦啦啦啦啦</p>
<form>
<input type="button" onClick="hidetext()" value="隐藏内容">
<input type="button" onClick="showtext()" value="显示内容">
</form>
<style>
body{ font-size:16px;}
.one{ border:1px solid #eee;
width:230px;
height:50px;
background-color:#ccc;
color:red;}
.two{ border:1px solid #eee;
width:230px;
height:50px;
background-color:#9cf;
color:blue;}
</style>
<p id="p1">网页显示动态效果并实现与用户交互功能</p>
<input type="button" value="添加样式" onClick="add()">
<p id="p2" class="one">功能啦啦啦啦啦</p>
<input type="button" value="更改外观" onClick="modify()">
<script type="text/javascript">
function add(){
	var p1=document.getElementById("p1");
	p1.className="one";
	}
function modify(){
	var p2=document.getElementById("p2");
	p2.className="two";
	}
</script>
</body>
</html>






黄铜渣渣
关注
专栏目录
VS软件使用与JQuery基础
L_ZWge的博客
08-08 1170
今天，我们可以来了解JQuery的一些基础知识及VS软件使用。 创建控制器与html页面 1.在桌面新建一个文件夹，将我们创建的项目放入其中。文件夹中会生成与对应项目的文件夹，用于放置、引用这些文件。 2.创建好的控制器自带一个Action，通过点击鼠标右键，再点击“添加视图”，然后一个HTML页面便创建完成了 3.在此页面中我们可以写入、引入一些需要的文件也是十分方便的。例如，我们需要引入一个JS文件，只需将该文件包含于该项目，然后将该文件直接拖入HTML中便可。 JQuery基础 jQu
Wrox Press Professional jQuery (2012)
09-03
《Wrox Press Professional jQuery (2012)》不仅适合初学者学习jQuery的基础知识，也非常适合有一定经验的开发者深入理解jQuery的应用技巧。本书内容丰富、覆盖广泛，无论是作为自学教材还是参考书籍都非常合适。...
点击打开隐藏层的JS
thewebcode
07-03 183
&lt;script type="text/javascript"&gt; //=点击展开关闭效果= function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){ var sourceObj = typeof oSourceObj == "string" ? document.getEle...
html中鼠标点击展开关闭层效果
ma20120607的专栏
08-25 2686
点击展开 这里面放的是box的内容.
[原创 js] 点击展开关闭效果
weixin_30718391的博客
04-25 213
因为工作中老是需要这个功能，本来也不是很麻烦，就把它写成一个可重用的函数好了。代码很简单。//===========================点击展开关闭效果====================================functionopenShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){v...
jQuery基础（各种操作）
weixin_64037609的博客
09-20 929
jQuery基础（各种操作）
【jQuery基础学习】01 jQuery选择器
qq_29069777的博客
10-22 114
关于CSS选择器 jQuery选择器涉及到CSS，CSS技术使得网页的结构与表现样式完全分离。 同样CSS也需要找到某个网页的结构才能改变其样式，这就是CSS选择器。 常用的CSS选择器如下： 标...
JQuery基础
demonHunter1234的博客
11-16 138
学习jQuery的时候，很快过了一遍，发现好多知识点不清晰。看来还是要写出来加深印象，平时多练习！ jQuery是一个Javascript函数库，轻量级，“写得少，做的多！”，它有以下功能： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities（实用工具） 很...
jQuery2012QQ商城焦点图效果
06-09
一、jQuery焦点图基础 焦点图的核心原理是通过定时器改变显示的图片或内容，同时提供导航按钮让用户手动切换。在jQuery中，我们可以利用`fadeIn()`和`fadeOut()`方法来实现图片的淡入淡出效果，结合`setTimeout()`...
EEP2012 网页开发-jQuery.pdf
08-15
在 EEP2012 的上下文中，jQuery 被整合到项目架构中，可能意味着在课程或项目中，jQuery 被用作前端开发的主要工具。这通常涉及到如何导入 jQuery 库，以及如何与其他库和框架（如 Bootstrap 或 AngularJS）集成。 ...
jquery插件jquery-ui-1.8.18.custom.min.js及css文件
09-02
首先，`jquery-ui-1.8.18.custom.min.js` 是 jQuery UI 的一个特定版本，1.8.18 表示该版本发布于2012年，是jQuery UI的一个稳定版本。"custom" 指的是这个版本是经过定制的，意味着开发者可能根据项目需求，只包含...
HTML实现点击展开和收起
热门推荐
07-04 6万+
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} //===========================点击展开关闭效果==================================== function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenT
jquery 点击取得当前行的某一列值
u014330950的博客
08-26 1万+
moban function showzhi(obj){ var x = $(obj).parent().parent().find("td"); var y = x.eq(1).text() alert(y); }; 111 aaa ddd 保存 222 bbb eee 保存
animate-动画
u014330950的博客
11-16 4637
 animate改变样式的动画 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;动画&lt;/title&gt; &lt;link rel=&
div测试内容，点击其它地方会隐藏此div模块
u014330950的博客
02-06 311
$(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点，防止点击的是
jquery动画
u014330950的博客
07-17 254
无标题文档 点击我 再点击我 再再点击我 css3 .yuan { border-radius:50px; width:100px; height:100px; border:1px solid #666; text-align:center; line-height:100px; box-sizing: border-box; cursor:p
bootstrap验证之bootstrapValidator
u014330950的博客
01-01 241
$(function () { $('form').bootstrapValidator({ message: '此值无效', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon ...
苏宁信息体系jQuery基础培训课程
"苏宁的JQuery培训课程，2012年11期，适用于IT工程师，特别是软件开发工程师，旨在提升初级至高级开发者对JQuery的理解和应用能力。该课程由裴红仕负责，遵循严格的编制及修订流程，经过多层审核后纳入课程库。课程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值