Jquery笔记之第二天

原创 2017年01月03日 13:54:35

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>
版权声明:本文为海哥哥原创文章,未经海哥哥允许不得转载。 举报

相关文章推荐

Jquery笔记之第二天

Jquery笔记之第二天

Jquery笔记之第一天

Jquery笔记之第一天

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

JavaScrpt笔记之第二天

JavaScrpt笔记之第二天

java 第二天笔记

==================== 1. Java 变量  1) 变量就是自然语言中的代词    Person he; int age = 15;    //age= 00000000...

第二天学习笔记

关键字被C语言赋予了特殊含义的单词共有32个数据类型20个流程控制12个全部是小写标识符标识符是程序员在自己的程序中定义的名称标识符只能由数字、字母、下划线组成,不能以数字开头不能跟关键字同名命名规范...

html5第二天笔记(上)

全屏webkitRequestFullScreen 任意元素全屏 webkitCancelFullScreen 关闭全屏,只能通过document实现关闭 fullScreen 检测是否全...

java web 第二天笔记

3.1URL(Uniform Resource Locator)统一资源定位器 URL通常由4部分组成:协议名称、所在主机的DNS名、可选的端口号、和资源的名称 URI(Uniform Res...

oracle第二天笔记

*1)Oracle使用过程     安装Oracle服务器(DBA)-->     创建一个库(DBA)-->     创建一个用户(DBA)-->     使用用户建立连接(开发者)-->...

html5第二天笔记(下)

vedio播放时间 var duration = element.duration;//视频播放时间 时间转换:var h=Math.floor(duration/3600); var...

读《锋利的jQuery(第二版)》笔记

一下的数字表示第几个细节知识点。另外在尖括号里包裹的表示是代码。 1)detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但需要注意的是,这个方法不会把匹配的元素从jQuery...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)