Jquery笔记之第二天
来源:互联网 发布:mac for 百度云 编辑:程序博客网 时间:2024/05/19 13:27
Jquery笔记之第二天
jQuery - 获取内容和属性
获得内容 - text()、html() 以及 val()
<script>$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });});</script>
$("button").click(function(){ alert($("#runoob").attr("href"));});
设置内容 - text()、html() 以及 val()
<script>$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); });});</script>
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$("img").after("在后面添加文本"); $("img").before("在前面添加文本");
<script>function afterText(){var txt1="<b>I </b>"; // 使用 HTML 创建元素var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素var txt3=document.createElement("big"); // 使用 DOM 创建元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3); // 在图片后添加文本}</script>
删除元素/内容
<script>$(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); });});</script>
<script>$(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); });});</script>
<script>$(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic");//过滤 });});</script>
jQuery - 获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
<script>$(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });});</script><style type="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style>
<script>$(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").removeClass("blue"); });});</script><style type="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style>
<script>$(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });});</script><style type="text/css">.blue{color:blue;}</style>CSS方法
<script>$(document).ready(function(){ $("button").click(function(){alert("背景颜色 = " + $("p").css("background-color"));
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"}); });});</script>
0 0
- Jquery笔记之第二天
- Html5笔记之第二天
- JavaScrpt笔记之第二天
- CSS3笔记之第二天
- jQuery第二天
- jQuery总结第二天
- jquery总结第二天
- JQuery第二天总结
- jQuery 第二天
- 锋利的jquery学习笔记 第二章
- jQuery基础教程学习笔记·第二章
- 读《锋利的jQuery(第二版)》笔记
- JQuery第二章:DOM(学习笔记)
- 《jquery权威指南》学习笔记--第二章
- jQuery权威指南第二版学习笔记(第二章)
- jQuery入门学习笔记----第二章 jQuery选择器
- jquery 之validate 笔记
- jquery 之validate 笔记
- Looper简析
- TARDiS:A Branch-and-Merge Approach To Weak Consistency
- 58. Spring Boot国际化(i18n)
- TPC-DI: The First Industry Benchmark forData Integration
- JS判断字符串是否为整数--简单的正则判断
- Jquery笔记之第二天
- this、 $("this")、$(this)有什么区别
- 得失在人、2年IT生涯总结、我为何离开东软
- 使用枚举实现单例
- React入门到精通(一)
- 庄子_养生主
- WebRTC学习之五:本地音频采集
- python 在不同层级目录import 模块的方法
- mysql 获取原数据