HTML5 学习笔记1

目录

• • • • • 点击消失
        • 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之外，比如放在 之前<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', //从左向右移动250pxopacity:'0.5', //透明度改为0.5height:'150px', //高度变为150pxwidth:'150px' //宽度变为150px});$("div").animate({ //多个动画，+=150px 在原有数值之上增加 150pxleft:'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("Hello world!"); //修改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  world！ (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(" Appended text."); //给p标签添加文本});$("#btn2").click(function(){$("ol").append("
Appended item
"); //给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 = "
Text.
"; //以jquery创建新元素var txt2=$("
").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("Before");$("img").before(txt1,txt2,txt3); //添加多个});$("#btn2").click(function(){$("img").after("After");$("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() + "
";txt += "height of div: '+$("#div1").height();$("#div1").html(txt);innerWidth() 和 innerHeight() 返回宽度和高度时包含内边距$(document).width()和$(window).width()是等效的，显示界面的可视大小});
</script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！