<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
//引用js文件
<script>
$.noConflict();
//替换jq与其他冲突时候的写法
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
//隐藏速度时间的限制
$("p").show();
//显示
$("p").toggle();
//隐藏与显示之间进行切换
});
});
</script>
// jQuery fadeIn() 用于淡入已隐藏的元素。
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
//直接淡入
$("#div2").fadeIn("slow"); //缓慢淡入
$("#div3").fadeIn(3000); //淡入时间3000毫秒
$("#div1").fadeOut();
//淡出
$("#div2").fadeOut("slow");
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
$("#div1").fadeToggle(); //淡入与淡出之间进行切换
//允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$("#div1").fadeTo("slow",0.15);
$(".panel").slideDown("slow");
//向下滑动元素
$("#panel").slideUp();
//向上滑动元素
$("#panel").slideToggle();
//slideDown() 与 slideUp() 方法之间进行切换。
$("div").animate({left:'250px'}); //
把div元素 向左移动250像素 提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
如：<div style="background:#98bf21;height:100px;width:100px;position:
absolute;">
</div>
也可同时对多个属性进行操作：如：$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
注意：Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
$("div").animate( height:'toggle' });
//可直接设置为隐藏与显示之间的切换
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
//这一段比较牛逼，可以实现牛逼的动态效果，这是使用了队列功能
});
});
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
//此处的function函数即为jquery中的callback函数，当动画完成100%后才会调用callback函数，如果没有callback函数，会与js发生冲突，而达不到jquery造成的动画效果
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//此处是通过chaining将jquery的各个技术连接在一起使用，先改变字体的颜色，再向上移动，再向下移动
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text()); //取得id="text"内分txt文档内容
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());//取得id=”text“内HTML的内容
alert("Value: " + $("#test").val()); //取得value="米老鼠"的值
alert($("#w3s").attr("href")); //连接href，连接到指定网址
});
});
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>."); //在结尾处添加
$("p").prepend("Some prepended text.");//在被选元素的开头添加
$("img").after("Some text after");//被选元素之后
$("img").before("Some text before");//被选元素之前
$("#div1").remove(); //删除元素
$("#div1").empty(); //清空元素的子元素
$("p").remove(".italic"); //删除class="italic "内的所有元素，起过滤作用
$("h1,h2,p").addClass("blue");
$("div").addClass("important");//向选定的元素增加css样式
$("#div1").addClass("important blue"); //向选定的元素内，增加多个类css的样式
$("h1,h2,p").removeClass("blue"); //对选定的元素删除相应的类的样式css
$("h1,h2,p").toggleClass("blue"); //对选定的元素的类css样式进行删除和增加的自动切换
alert("Background color = " + $("#p3").css("background-color")); //返回id="p3"的样式
$("p").css("background-color","yellow"); //为元素为p的设定背景样式为黄色
$("p").css({"background-color":"yellow","font-size":"200%"}); //同时设置多个样式
$("#div1").width(320).height(320); //直接调整div元素的宽度和高度
$("span").parent().css({"color":"red","border":"2px solid red"}); //直接返回了span的父元素的样式
$("span").parents().css({"color":"red","border":"2px solid red"}); //返回了span元素的所有父元素，一直到根元素
$("span").parents("ul").css({"color":"red","border":"2px solid red"}); //返回span的所有指定的ul的父元素
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); //返回span与div之间的所有的父元素
$("div").children().css({"color":"red","border":"2px solid red"}); //返回div向下的所有的直接子元素
$("div").children("p.1").css({"color":"red","border":"2px solid red"}); //返回div向下指定的类1的子元素
$("div").find("span").css({"color":"red","border":"2px solid red"}); //返回div直接向下的指定的span元素
$("h2").siblings().css({"color":"red","border":"2px solid red"});//返回与h2同级的平行同胞元素
$("h2").siblings("p").css({"color":"red","border":"2px solid red"}); //返回与h2同级的指定的所有的p元素
$("h2").next().css({"color":"red","border":"2px solid red"}); //返回与h2同级的下一个元素，仅仅是下一个
$("h2").nextAll().css({"color":"red","border":"2px solid red"}); //返回的是与h2同级的下面所有的元素
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"}); //返回的是与h2同级的到元素h6的所有的同级元素
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
});
$("div p").first().css("background-color","yellow"); //返回的是div下的第一个p元素
$("div p").last().css("background-color","yellow"); //返回的是div下最后一个p元素
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
$("p").eq(1).css("background-color","yellow");
<p>我是唐老鸭 (index 0)。</p>
<p>唐老鸭 (index 1)。</p>
//所以此段选取的是索引号为<p>唐老鸭 (index 1)。</p>的元素作为返回值
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$("p").filter(".intro").css("background-color","yellow");
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>
//所以此段选定的是class="intro"的元素，而不符合这个标准的就被过滤掉了
not() 方法返回不匹配标准的所有元素。
not() 方法与 filter() 相反。
$("p").not(".intro").css("background-color","yellow");
//所以此段选取的是不包含class="intro"的元素
$('#test').load('/example/jquery/demo_test.txt'); //调用了AJAX技术
$("#div1").load("demo_test.txt #p1");//把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
//在jquery调用的ajax中写入callback函数
</script>
</head>
<body>
<button type="button">隐藏</button>
<button type="button">隐藏</button>
<button type="button">切换</button>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;">小瑞是个大坏蛋</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
