<!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>