Web之jQuery
2018-04-28 本文已影响0人
追逐_chase
timg.jpg
jQuery安装
1.下载
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
- jQuery.com可以在这个网址下载
2.引包
- 在文件中引用
<script src="jquery-1.11.1.minjs.js" ></script>
- 如果不想下载缓存jQuery，可以使用CDN引用 (下面是Google CDN)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
如果您观察上什么的 Google URL - 在 URL 中规定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如本例 1.8）删除一个数字，谷歌会返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本（从 1.1.0 到 1.9.9）。
3.基本使用
3.1 $(要操作的对象).方法名()
$("#demo").click(function () {
});
要操作的是ID名为demo的元素，cliik是点击方法
3.2选择器
-
$("元素名称") 标签选择器
-
$("#test") id选择器
-
$(".test") 类选择器
-
$("*") 通配符选择器
-
$("p.intro") 交集选择器 获取 class 为 intro 的 <p> 元素
-
$("p#demo") 选取所有 id="demo" 的 <p> 元素
-
$(".liItem,div") 并集选择器
-
$("#dv span")后代选择器 空格隔开
-
$("#dv > span") 子代选择器
-$("#dv ~ span")#dv元素后面的兄弟选择器 并列关系 -
$("#dv+sapn") 获取#dv后面的直接兄弟
-
$("选择器名:odd/even") 奇数选择器/偶数选择器 是指元素的下标是奇数或者偶数
-
获取样式属性
- $("p").css("background-color");
-
设置样式属性
- $("p").css("background-color","red"); 更改CSS属性值
- $("标签的名称").css( {key:value,key:value} )
jQuery("div").css({
"color":"red",
"font-size":"20px",
"background-color":"#036663"
});
- $("div").css("font-size",function (index,value) {});
- css样式更改的另一方法，第一个参数是 要更改的 “属性”，function里面的2个参数，index是下标，value是值，可以动态的更改index(下标)的对应的不同的属性值
- text(),设置或者返回元素的文本内容
- html() 设置或返回所选元素的内容（包括 HTML 标记）
- val() 设置或者返回表单的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<!--//引用jQuery-->
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">
</script>
<script>
//函数入口
$(document).ready(function () {
$("button").click(function () {
$("#demo").css("background","red");
$(".divs").css("background","red");
});
});
</script>
</head>
<body>
<button>点击按钮</button>
<ul>
<li id="demo">兄弟很多1</li>
<li>兄弟很多2</li>
<li class="divs">兄弟很多3</li>
<li>兄弟很多4</li>
<li>兄弟很多5</li>
<li>兄弟很多6</li>
<li>兄弟很多7</li>
<li>兄弟很多8</li>
</ul>
</body>
</html>
