目录
- 点击消失
- jQuery 选择器
- fadeIn 实现淡出*
- fadeTo 淡入
- slideDown 向下滑动
- animate 动画
- 多帧animate动画
- 停止滑动
- 先上滑隐藏再下滑显示
- 获取标签内容text/html
- 获取标签值
- 获取属性attr
- 设置内容text、html以及value
- text、html以及value的回调函数
- 设置属性 attr
- append追加方法
- append和prepend方法添加若干新元素
- after和before方法
- remove方法
- empty方法（删除内容）
- 删除（过滤）符合要求的数据
- 动态添加css样式
- toggleClass 切换样式（添加样式和删除样式切换）
- 返回CSS样式属性
- 修改css样式
- 获取尺寸、高度、宽度
点击消失
点击< p >标签内容消失
<p>如果您点击我，我会小时</p>
<p>点击我，我会小时</p>
<p>也要点击我消失</p>
//把js脚本放在body和head之外，比如放在</html> 之前
<script language="javascript">
$(document).reday(function(){ // 当页面所有html标签加载完后执行
$("p").click(function(){ //选取p标签
$(this).hide(); //隐藏当前元素
});
});
</>
- $(this).hide() - 隐藏当前元素
- $(“p”).hide() - 隐藏所有p标签元素
- $(".test").hide() - 隐藏所有 class = “test” 的所有元素
- $("#test").hide() - 隐藏所有 id = “test”的元素
通过点击按钮，实现标签消失
<p class="test"> This is a heading.</p>
<p id="test"> This is another paragraph.</p>
<script src="jquery-1.11.1.js"></script>
<script type="text/javscript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(); //隐藏p标签的所有内容
$(".test").hide(); //隐藏所有class="test"的元素
$("#test").hide(); //隐藏所有 id="test" 的元素
});
});
</script>
jQuery 选择器
- jQuery 元素选择器
jQuery 使用css选择器HTML元素
$(“p”)选取< p >元素
$(“p.intro”)选取所有 class=“intro” 的 < p >元素
$(“p#demo”)选取所有 id=“demo” 的 < p >元素 - jQuery 属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有href属性的元素
$([href=’#’]")选取所有带有href属性值等于"#“的元素
$([href != ‘#’]”)选取所有带有href值不等于"#“的元素
$(”[href $= ‘.jpg’]")选取所有href值以".jpg"结尾的元素 - jQuery CSS选择器
jQuery CSS 选择器可用于改变HTML元素的CSS属性
例如 $(“p”).css(“background-color”,“red”);
p元素的显示和隐藏
<p id="p1">如果点击"隐藏"按钮，我就会消失</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").ready(function(){
$("p").hide();
$("p").hide(1000); 隐藏方法内加入时间参数，如1000 表示1s内全部隐藏
});
$("show).ready(function(){
$("p").show();
});
});
</script>
toggle 隐藏/显示 切换
<button type="button" >切换</button>
<p> 这是一个段落</p>
<p>这是另一个段落</p>
<script src="jqery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(button).click(function(){
$("p").toggle(1000); //隐藏与显示来回切换
});
});
</script>
fadeIn 实现淡出*
<button>点击这里，使三个矩形淡入<button>
<div id="div1" style="xxxxxxxxxx"></div>
<div id="div2" style="xxxxxxxxxx"></div>
<div id="div3" style="xxxxxxxxxx"></div>
<script src="jquery-1.11.1.js"</script>
<script type="text/javascript">
$(document).ready(function(){
$("button).click(functioni(){
$("#div1").fadeIn(); //淡出
$("#div2").fadeIn("slow"); //淡出
$("#div3").fadeeIn(3000); //淡出
});
});
</script>
fadeTo 淡入
<button>点击这里，使三个矩形淡入<button>
<div id="div1" style="xxxxxxxxxx"></div>
<div id="div2" style="xxxxxxxxxx"></div>
<div id="div3" style="xxxxxxxxxx"></div>
<script src="jquery-1.11.1.js"</script>
<script type="text/javascript">
$(document).ready(function(){
$("button).click(functioni(){
$("#div1").fadeTo("slow",0.15); //淡入 0-1表表示透明度，0是完全透明
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeeTo("slow",0.7);
});
});
</script>
slideDown 向下滑动
<div class=""panel">
<p>领先的web技术教程站点</p>
<p>你可以找到你所需要的所有网站建设教程</p>
</div>
<p class="flip">请点击这里</p>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$(".flip".click(function(){
$(".panel").slideDown("slow"); //拥有高度，且隐藏不显示，可以通过flideDown方法下滑显示出来
});
});
</script>
animate 动画
<div style="xxxxxxxxxxxxxxxxxxxxxxxx"></div>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'}); //从左向右移动250px
$("div").animate({ //多个动画
left:'250px', //从左向右移动250px
opacity:'0.5', //透明度改为0.5
height:'150px', //高度变为150px
width:'150px' //宽度变为150px
});
$("div").animate({ //多个动画，+=150px 在原有数值之上增加 150px
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
多帧animate动画
<div style="xxxxxxxxxxxxxxxxxxxxxxxx"></div>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript>
$(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");
});
});
</script>
停止滑动
<div class=""panel">
<p>领先的web技术教程站点</p>
<p>你可以找到你所需要的所有网站建设教程</p>
</div>
<p class="flip">请点击这里</p>
<p class="stop">停止滑动</p>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$(".flip".click(function(){
$(".panel").slideDown(5000); //拥有高度，且隐藏不显示，可以通过slideDown方法下滑显示出来
});
$(".stop").click(function(){
$(".panel").stop(); //停止滑动
});
});
</script>
先上滑隐藏再下滑显示
<div class=""panel">
<p>领先的web技术教程站点</p>
<p>你可以找到你所需要的所有网站建设教程</p>
</div>
<p class="flip">请点击这里</p>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$(".flip".click(function(){
//先设置字体颜色，然后上滑隐藏，在下滑显示
$(".panel").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
获取标签内容text/html
<p id="test">这里段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btb2">显示HTML</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$("#btn1".click(function(){
alert("Text: "+$("#test").text());
});
$("#btn2".click(function(){
alert("HTML: "+$("#test").html());
});
});
</script>
文本显示结果：
html显示结果：
获取标签值
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$("button").click(function(){
alert("Value: "+ $("#test").val();
});
});
</script>
获取属性attr
<p><a href="http://www.baidu.com" id="w3s">百度</a></p>
<button>显示 href值</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
设置内容text、html以及value
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field：<input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!"); //修改test
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>"); //修改html
});
$("#btn3").click(function(){
$("#test3).val("Dolly Duck"); //修改value值
});
});
</script>
text、html以及value的回调函数
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){ //origText 为 改之前的文本
return "old text: " + origText + "New text: Hello World! (index: "+i +")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "old html: "+ origText + "new html: hello <b> world！</b> (index: "+ i +")";
});
});
});
</script>
设置属性 attr
<p><a href="http://www.gogle.com"" id="w3s">我的链接</a></p>
<button>改变href值</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$(doucment).ready(function(){
$("button").click(function(){
$("#w3s").attr("href","http://www.baidu.com"):
$("#w3s").attr({
});
"href":"http://www.baidu.com",
"title":"jquery 教程"
});
});
</script>
append追加方法
这种追加方法是往文本或者列表前面追加
<p> this is a paragraph</p>
<p> this is another paragraph.</>
<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>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>."); //给p标签添加文本
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>"); //给ol列表添加一行
});
</script>
append和prepend方法添加若干新元素
<p> this is a paragraph.</p>
<button id="btn1">追加文本</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("#btn1").click(function(){
//以html创建新元素
var txt1 = "<p>Text.</p>";
//以jquery创建新元素
var txt2=$("<p></p>").text("text.");
//通过dom创建文本
var txt3=docuemnt.createElement("p");
txt3.innerHTML="Text.";
$("body").append(txt1,txt2,txt3); //级联追加新元素
});
</script>
after和before方法
前后追加
<img src="xxxx.gif" alt="logo" />
<br><br>
<button id="btn1">在图片前面追加</button>
<button id="btn2">在图片后面追加</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
$("img").before(txt1,txt2,txt3); //添加多个
});
$("#btn2").click(function(){
$("img").after("<b>After</b>");
$("img").after(txt1,txt2,txt3); //添加多个
});
</script>
remove方法
<div id="div1" style="xxxxxxxxxxxxxx">
this is some text in the div.
<p>this is some text in the div</p>
<p>this is another parapraph in the div</p>
</div>
<button>删除div元素</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("button").click(function(){
$("#div1").remove(); //移除div
});
</script>
empty方法（删除内容）
删除div中的内容
<div id="div1" style="xxxxxxxxxxxxxx">
this is some text in the div.
<p>this is some text in the div</p>
<p>this is another parapraph in the div</p>
</div>
<button>删除div元素</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("button").click(function(){
$("#div1").empty(); //清空div中的内容
});
</script>
清空后：
删除（过滤）符合要求的数据
<p>this is a paragraph in the div.</p>
<p class="italic"><i>this is another paragraph in the div.</i></p>
<p class="italic"><i>this is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有p元素</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("button").click(function(){
$("p").remove(".italic"); //删除 class="italic"的p元素
});
</script>
动态添加css样式
<style type="text/css">
.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}
</style>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<div>这是非常重要的方法</div>
<br>
<button>向元素添加类</button>
</body>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("button").click(function(){
//添加样式
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
//添加两种样式
$(#div1").addClass("important blue"); 两种样式中间用空格隔开
//删除样式
$(#h1,h2,p").removeClass("blue"); //删除样式
});
</script>
添加样式后
删除样式后
toggleClass 切换样式（添加样式和删除样式切换）
<style type="text/css">
.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}
</style>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<div>这是非常重要的方法</div>
<br>
<button>向元素添加类</button>
</body>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("button").click(function(){
//删除样式
$(#h1,h2,p").toggleClass("blue"); //删除样式
});
</script>
返回CSS样式属性
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落</p>
<p style="background-color:#00ff00">这是一个段落</p>
<p style="background-color:#0000ff">这是一个段落</p>
<button>返回p元素的背景颜色</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("button").click(function(){
//有三个颜色，返回的是第一个颜色
alert("Background color = " + $("p").css("background-color"));
});
</script>
修改css样式
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落</p>
<p style="background-color:#00ff00">这是一个段落</p>
<p style="background-color:#0000ff">这是一个段落</p>
<button>返回p元素的背景颜色</button>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("button").click(function(){
//将p元素的背景色改为黄色,会将所有p元素的背景色改为黄色
$("p").css("background-color","yellow");
//修改多个属性
$("p").css({
"background-color":"yellow",
"font-size":"200%"
});
});
</script>
获取尺寸、高度、宽度
<div id="div1"
style="height:100px;width:300px;padding:10px;
margin:3px;border:1px solid blue;background-clor:lightblue;"></div>
<br>
<button>显示 div 尺寸</button>
<p>width() - 返回元素的宽度 </p>
<p>height() -返回元素的高度</p>
<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
$("button").click(function(){
var txt="";
txt += width of div: "+
$("#div1").width() + "</br>";
txt += "height of div: '+
$("#div1").height();
$("#div1").html(txt);
innerWidth() 和 innerHeight() 返回宽度和高度时包含内边距
$(document).width()和$(window).width()是等效的，显示界面的可视大小
});
</script>
扫一扫
9059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
