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

相关文章推荐

淘淘商城第二天笔记

  • 2017年08月22日 17:25
  • 1MB
  • 下载

hibernate学习笔记第二天的源码

  • 2017年03月21日 12:26
  • 7.81MB
  • 下载

疯狂iOS讲义(下)——多线程第二天学习笔记

注意:iOS规定,只能在UI线程中修改UI控件的属性。 【原因:加入程序允许任意子线程访问。修改UI控件的属性,就需要对多个新线程的并发访问进行同步控制;否则,多个线程将会破坏UI控件内部状态的...

mybatis第二天课堂笔记

  • 2015年09月20日 19:35
  • 620KB
  • 下载

JavaSE第二天笔记

  • 2016年03月27日 20:02
  • 238KB
  • 下载

嵌入式软件开发培训笔记——Java第二天(运算符、程序结构、数组与继承)

一、运算符     分割符:,、;、[]、()     算术运算符:+、-、*、/、%、++、--     关系运算符:>、=、     布尔逻辑运算符:!、&、|、^、&&、||     位运算符:...

mybatis第二天课堂笔记.doc

  • 2017年07月20日 16:17
  • 1.18MB
  • 下载

CCNA第二天读书笔记

  • 2012年12月31日 23:56
  • 439KB
  • 下载

实习第二天: el表达式学习笔记(内容结合百度学习)

先把项目中不懂的弄懂吧: el表达式的规范:El表达式总是放在大括号内的,而且前面有一个美元符号做为前缀。 1.el表达式一般分为两部分组成,如${teacher.name},其中,“.”被称为做点操...

struts2课堂笔记整理(第二天)_全天

struts2课堂笔记整理(第二天)_全天 实际场景: 表现层,获得请求参数,将请求参数封装到JavaBean对象,传递JavaBean对象 给业务层 一、 Action 如何接受请求参数1、 s...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery笔记之第二天
举报原因:
原因补充:

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