Day16-jQuery入门基础
[大数据入门-jQuery]
1.jQuery介绍
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是”write Less，Do More”，即倡导写更少的代码，做更多的事情。
2.jQuery的引用
三种方式
1. 开发库
2. 精简库
3. 网络链接
3.jQuery的入门
3.1 传统加载js代码的方式
<script language="javascript" type="text/javascript">
window.onload=function(){
// 自定义js代码
};
</script>3.2 jQuery加载函数方式
<script language="javascript" type="text/javascript" src="js/jQuery.js"></script>
<script language="javascript" type="text/javascript"
$(function(){
// 自定义js代码
}
);
</script>3.3 jQuery加载函数方式（扩展）
<script language="javascript" type="text/javascript" src="js/jQuery.js"></script>
<script language="javascript" type="text/javascript"
$(document).ready(
function(){
// 自定义js代码
}
);
</script>3.4 注意事项
1.javascript库引用只能使用如下方式，也是w3c标准用法。
<script language="javascript" type="text/javascript" src="js/jQuery.js"></script>,2.javascript库引用不能使用一下方式，浏览器无法解析。
<script language="javascript" type="text/javascript" src="js/jQuery.js"/>3.document表示标记性文档，在这里指html文档（xml标记性文档）。
4.$(document).ready(function(){});等同于window.onload = function(){}故建议使用第3.2方式。
4.选择器的高级用法
4.1 基本选择器 ###
- #id选择器
- elemtn选择器
- .class选择器
- *选择
- slector1,selector2,selectorN
1.#id选择器根据给定的ID匹配一个元素，如果选择器中包含特殊字符，可以用两个斜杠转义。 - 示例1:不使用jQuery获取标签的值
<body>
<input type="myId" name="china" value="zhangsan"/>
</body>
<script type="text/javascript">
window.onload=function(){
var v=document.getElementById("myId");
alert(v.value);
}
</script>- 示例2:使用#id选择器的方式
<script language="javascript" type="text/javascript" src="js/jQuery.js></script>
<body>
<input type="myId" name="china" value="zhangsan"/>
</body>
<script type="text/javascript">
$(
function(){
var id=$("#myId");// 这里不能使用text()及html()
alert(id.val());
console.log("演示修改值");
id.val("lisi");
alert(id.val());
}
);
</script>2.Element 根据给定的元素名匹配所有元素，一个用于搜素的元素，指向DOM节点的标签名。
- 实例3:jQuery根据element获取元素
<body>
<h3>05-基本选择器element的应用</h3>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<span>SPAN</span>
</body>
<script type="text/javascript">
var t_element=$("div");
// 根据给定的元素名匹配所有元素 会有多个
// alert(t_element.size());
// 获取数组的长度
alert(t_element.length);// 输出结果为4
</script>3..class 类选择器
- 示例4:类选择器的用法
<body>
<h3>06-基本选择器类选择器</h3>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<span>SPAN</span>
<div class="myclass"> div class="mycalss"</div>
<span class="myclass"> span class="mycalss"</span>
</body>
<script type="text/javascript">
var cls=$(".myclass");
//alert(cls.size())
var all=$("*");
alert(all.length);// 输出结果为2
</script>4.*号用法（获取所有标记)
- 示例5:获取所有
<html>
<head>
<meta charset="UTF-8">
<title>07-基本选择器匹配所有元素</title>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>07-基本选择器匹配所有元素</h3>
</body>
<script type="text/javascript">
var all=$("*");
alert(all.length);// 输出结果为8:<html><head><meta><title><script><body><h3><script>
</script>
</html>5.slector1,selector2,selectorN
- 示例6:
<body>
<h3>08-基本选择器匹配多个元素</h3>
<hr/>
将每一个选择器匹配的元素合并后一起返回
<hr />
<div>div</div>
<p class="myclass">p class="myclass"</p>
<span>SPAN</span>
<p class="notmyclas">p class="notmyclass"</p>
</body>
<script type="text/javascript">
var v=$("div,span,p.myclass");
alert(v.length);// 输出结果为3
</script>
4.2 层级选择器
- ancestor descendant 在给定的祖先元素下匹配所有的后代元素
示例7：
<script language="javascript" type="text/javascript" >
$(
function(){
alert($("form input").length);// 输出结果为2
}
);
</script>
</head>
<body>
<h3>09-层次选择器匹配所有</h3>
<hr />
在给定的祖先元素下匹配所有的后代元素
<hr />
<form>
<input type="text" name="name" value="zhangsan" />
<fieldset>
<label>Newsletter:</label>
<input type="text" name="newsletter" value="newsletter" />
</fieldset>
</form>
<input type="text" name="describe" value="其他说明" />
</body>- parent > child 在给定的父元素下匹配所有的子元素
示例8: - prev + next 匹配所有紧接在 prev 元素后的 next 元素
示例9: - prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
示例10:
4.3 基本过滤选择器
- :first
- :last
- :not(selector)
- :even
- :odd
- :eq(index)
- :gt(index)
- :lt(index)
:header
- :first 获取匹配第一个元素
- :last
示例11:
<script type="text/javascript">
$(function(){
alert("li:first="+$("li:first").text());// 输出结果:行1
alert("li:first="+$("li:first").html());// 输出结果:行1
alert("li:last="+$("li:last").text());// 输出结果:行5
alert("li:last="+$("li:last").html());// 输出结果:行5
});
</script>
</head>
<body>
<h3>13-基本过滤选择器first</h3>
<hr/>
li:first:获取第一个元素
<hr/>
li:last:获取最后一个元素
<hr />
<ul>
<li>行1</li>
<li>行2</li>
<li>行3</li>
<li>行4</li>
<li>行5</li>
</ul>
</body>- :not(selector)
示例12:
<script language="javascript" type="text/javascript" >
$(function(){
$("li").not(":even").css("background","red");
}
);
</script>
</head>
<body>
<hr />
去除所有与给定选择器匹配的元素
<hr />
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
</body>- :even
- :odd
示例13:
<script language="javascript" type="text/javascript">
$(function(){
alert("获取表格中2,4,6,8..行的行书:"+$("tr:odd").size());
alert("获取表格中1,3,5,7..行的行书:"+$("tr:even").size());
});
</script>
</head>
<body>
<h3>14-基本过滤选择器奇偶数</h3>
<table border="1">
<tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td><td>第1行第4列</td><td>第1行第5列</td></tr>
<tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td><td>第2行第4列</td><td>第2行第5列</td></tr>
<tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td><td>第3行第4列</td><td>第3行第5列</td></tr>
<tr><td>第4行第1列</td><td>第4行第2列</td><td>第4行第3列</td><td>第4行第4列</td><td>第4行第5列</td></tr>
<tr><td>第5行第1列</td><td>第5行第2列</td><td>第5行第3列</td><td>第5行第4列</td><td>第5行第5列</td></tr>
<tr><td>第6行第1列</td><td>第6行第2列</td><td>第6行第3列</td><td>第6行第4列</td><td>第6行第5列</td></tr>
<tr><td>第7行第1列</td><td>第7行第2列</td><td>第7行第3列</td><td>第7行第4列</td><td>第7行第5列</td></tr>
</table>
</body>- :eq(index)
- :gt(index)
- :lt(index)
示例14: - :header
示例15:
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$(":header").css("background","red");
});
</script>
</head>
<body>
<hr/>匹配如 h1, h2, h3之类的标题元素<hr/>
<h1>h1-15-基本过滤选择器header</h1>
<h2>h2-15-基本过滤选择器header</h2>
<h3>h3-15-基本过滤选择器header</h3>
<h4>h4-15-基本过滤选择器header</h4>
<h5>h5-15-基本过滤选择器header</h5>
<h6>h6-15-基本过滤选择器header</h6>
</body>4.4 属性选择器
| 属性 | 相当于html dom属性 | 作用 | 注意事项 |
|---|---|---|---|
| .html() | 对应js中的innerHTML | 用为读取和修改元素的HTML标签,用来读取元素的HTML内容（包括其Html标签） | .html()方法使用在多个元素上时，只读取第一个元素 |
| .text() | 对应js中的innerText | 用来读取元素的纯文本内容，包括其后代元素 | .text()方法不能使用在表单元素上 |
| .val() | - | 用来读取或修改表单元素的value值 | .val()是用来读取表单元素的”value”值,.val()只能使用在表单元素上 |
5.CSS属性相关方法（只做了解,实际项目中使用意义不大）
示例16:
6.动画效果
- 隐藏
- 显示
- 自动根据状态显示或者隐藏
示例17:
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function _show(){
var txtId=$("div");
txtId.show(2000);// 缓慢显示
}
function _hide(){
var txtId=$("div");
txtId.hide(5000);// 缓慢隐藏
}
function _showhid(){
$("#myid").toggle(2000);
}
</script>
</head>
<body>
<h3>12-动画效果</h3>
<input type="button" value="点我显示" onclick="_show()" />
<input type="button" value="点我隐藏" onclick="_hide()" />
<input type="button" value="自动隐藏或显示" onclick="_showhid()" />
<hr>
<div id="myid" style="display: none;">
Hello,我是小广告!!!
</div>
</body>7.将传统的对象转换为jQuery对象方法：
var inputObj=document.getElementsByName(“input”)[0];
var jq_inputObj=${inputObj}
示例18:
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
