<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="/jquery/jquery.js/jquery.1.11.3.min.js"></script>
<script type="text/javascript">
//jQuery noConflict() 方法
$.noConfilict();
jquery("button").click(function(){
jquery("p").text("jquery 正在运行！");
});
//jQuery noConflict() 方法-01
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("Jquery正在运行！");
});
//jQuery noConflict() 方法-02
$.noConflict();
jquery("button").click(function($){
jquery("p").text("Jquery正在运行！");
});
//jQuery 语法实例
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
$(document).ready(function(){
$("button".click(function(){
$("#test1").hide();
}));
});
//Hiding - Sliding- Fading
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
})
});
$(document).ready(function(){
$(".ex.hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
$(document).rady(function(){
$(".flip").click(function(){
$(".pane1").slideToggle("slow");
});
});
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height:‘800px‘,opacity:‘0.4‘},"slow");
div.animate({width:‘400px‘,opacity:‘0.8‘},"slow");
div.animate({height:‘800px‘,opacity:‘0.4‘},"slow");
div.animate({width:‘400px‘,opacity:‘0.8‘},"slow");
});
});
//改变html元素内容
$(document).ready(function(){
$("button").click(function(){
$("p").html("Welcome to my home!");
});
});
// 向html元素追加内容
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
<style type="text/css">
div.pane1,p.flip
{
margin: 0px;
padding: 5px;
text-align:center;
background:palegreen;
border:1px solid greenyellow;
}
div.pane1{
height: 120px;
display: none;
}
</style>
</head>
<body>
<!--jQuery noConflict() 方法-->
<p>This is a paragraph!</p>
<button>Check the jquery!</button>
<!--jQuery 语法实例-->
<button type="button">Click me!</button>
<p id = "test1">This is a paragraph!</p>
<p class="test">This is another paragraph!</p>
<h1 class="test">Everything will be ok!</h1>
<!--Hiding - Sliding- Fading-->
<p>演示带有不同参数的fadeOut()方法。</p>
<button>点击这里，使三个矩形分别淡出。</button>
<br><br>
<div style="width: 100px;height:100px;background-color: hotpink;" id = "div1"></div>
<br>
<div style = "width:100px;height:100px;background-color: cornflowerblue;" id = "div2"></div>
<br>
<div style="width: 100px;height:100px;background-color: red;" id = "div3"></div>
<p>you click me ,i will disappear!</p>
<p>you click me ,i will disappear too.</p>
<p>me too!</p>
<h2>中国办事处</h2>
<div class="ex">
<button class="hide" type="button">hide</button>
<p>
联系人：张先生<br>
北三环中路 100号<br>
北京
</p>
</div>
<h2>美国办事处</h2>
<div class="ex">
<button class="hide" type="button">hide</button>
<p>
联系人：David<br>
第五大街 200号<br>
纽约
</p>
</div>
<div class="pane1">
<p>You must try your best!</p>
<p>You are your sunshine!</p>
</div>
<p class="flip">请点击这里。</p>
<button type="button">开始动画</button>
<p>默认情况下，所有html元素的位置都是静止的，并且无法移动，如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background-color: pink;height: 100px;width: 100px; position: absolute;"></div>
<br><br>
<!--改变html元素内容-->
<h2>This is a headline!</h2>
<p>This is a paragraph!</p>
<p>This is another paragraph!</p>
<button type="button"> Please click me !</button>
<!--向html元素追加内容-->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>