<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<!--JS库,比JS有趣的多:写得少,做得多-->
<p>如果你点我,我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
<p id="p1">上下滚动</p>
<button>点我上下滚动上面的内容</button>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<p>名称: <input type="text" id="test1" value="菜鸟教程"></p>
<div id="div1"><h2>修改文本内容</h2></div>
<button id="btn1">获取外部数据</button><br>
<button id="btn2">get请求外部数据</button><br>
<button id="btn3">post请求外部数据</button>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("p").click(function () {
$(this).hide()
});
$("button").click(function () {
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
$("#btn1").click(function () {
$("#div1").load("http://www.91cht.com/woxiang/control/bapi?operFlag=getNews&page=1&rows=5");
});
$("#btn2").click(function () {
$.get("http://www.91cht.com/woxiang/control/bapi?operFlag=getNews&page=1&rows=5",function (data,status) {
alert("数据:" + data + "状态:" + status);
});
});
$("#btn3").click(function () {
$.post("http://www.91cht.com/woxiang/control/bapi?operFlag=getNews",
{page:"1",rows:"5"},
function(data,status) {
alert("数据:" + data + "状态:" + status);
});
})
})
/*获取内容:
text(获取标签内内容):这是段落中的粗体文本。、
html(获取标签内内容,包括html代码):这是段落中的 <b>粗体</b> 文本。、
val(获取标签value属性的值):菜鸟教程
*/
/*获取属性:attr和prop
* html的固有属性使用prop;
* html的自定义dom属性使用attr
* */
/*
* 添加元素:
* append():元素结尾插入内容
* prepend():元素开头插入内容
* after():元素之后插入内容
* before():元素之前插入内容
* 删除元素:
* remove() - 删除被选元素(及其子元素)
* empty() - 从被选元素中删除子元素
* 获取并设置 CSS 类:
* addClass() - 向被选元素添加一个或多个类
* removeClass() - 从被选元素删除一个或多个类
* toggleClass() - 对被选元素进行添加/删除类的切换操作
* css() - 设置或返回样式属性
* css() 方法:
* css("propertyname"):返回 CSS 属性
* css("propertyname","value"):设置 CSS 属性
* css({"propertyname":"value","propertyname":"value",...}):设置多个 CSS 属性
* 尺寸方法:
* width(宽度)、height()、innerWidth(宽度+内边距)、innerHeight()、outerWidth(宽度+内边距+边框)、outerHeight()
* jQuery遍历:即移动 祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
* 父级:parent(元素的直接父元素)、parents(元素的所有祖先元素)、parentsUntil(两个给定元素之间的所有祖先元素)
* 后代:children(元素的所有直接子元素)、find(元素的后代元素)
* 同胞:siblings(元素的所有同胞元素)、next(元素的下一个同胞元素)、nextAll(元素的所有跟随的同胞元素)、nextUntil(介于两个给定参数之间的所有跟随的同胞元素)
* prev(), prevAll() & prevUntil() 方法,与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素。
* 可以使用可选参数来过滤对同胞元素的搜索。
* jQuery过滤:
* first(返回被选元素的首个元素)、last(返回被选元素的最后一个元素)、eq(返回被选元素中带有指定索引号的元素,从0开始)、filter(允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回)
* not(返回不匹配标准的所有元素)
* 为了防止 $ 符号再其他JS框架中进行冲突,jQuery提供了noConflict() 方法来防止冲突,可以直接用jQuery全程进行。
* JSONP:跨域读取数据。
* */
</script>
</html>