W3School Jquery study

最新推荐文章于 2024-10-17 11:21:39 发布

weixin_33749242

最新推荐文章于 2024-10-17 11:21:39 发布

阅读量91

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/li21808890/blog/262419

版权

2019独角兽企业重金招聘Python工程师标准>>>

这里只是我学习的笔记，仅供自己需要时查询

first import the Jquery .js file, code is following：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

$(“#testDiv”); 一个id为testDiv的元素的包装集

var div = document.getElementById(“testDiv”);
var domToJQueryObject = $(div);
此时的domToJQueryObject表示一个jquery包装集。

jQuery包装集是一个集合，使用索引器访问其中的一个元素
var domObject = $(“#testDiv”)[0];
此时的domObject表示一个document对象。

“$”符号在Jquery中代表对Jquery对象的引用，

jquery选择器就是以一种字符串方式得到不同的Dom对象，以jquery包装集的形式返回

#选择器
# 选取带有唯一的指定 id 的元素。
id 引用 HTML 元素的 id 属性。
相同的 id 值只能在文档中使用一次。重复时，只读取第一个id

*选择器
$(“body *”) 选择<body>内所有元素

Chaining
允许我们在相同的元素上运行多条 jQuery 命令，

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
css() 方法设置或返回被选元素的一个或多个样式属性。

$("input").val();获取文本框中的值
$("input").val("hello world!"); 设定文本框中的值
$("p").text(); 返回P元素的文本内容  只显示文本
$("p").text("Hello world!");设置所有P元素的文本内容
$("p").html(); 返回p元素的内容。 （包括 HTML 标记） 比如<table><td>...
$("p").html("Hello <b>world</b>!");设置所有P元素的内容
$("a").attr("href");获得属性的值，可以是任何属性

.intro
{ background-color:yellow;
}
设置 class="intro" 的元素的样式，所有clsss为intro的元素，背景色会被设置为黄色

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
为索引分别为0，1，2的P元素设定不同的字体颜色

$("tr").each(function(i){this.style.backgroundColor=['#bbb','#ddd'][i%2]});
给隔行的tr元素换色，实现表格的隔行换色

转载于:https://my.oschina.net/li21808890/blog/262419