（自考专升本）自考《Jquery》学习知识点串讲笔记.pdf

1自考Jquery学习知识点笔记1、什么是 JQuery?为什么用 JQuery?jq 是 js 的代码库,jq 让我们写的更少、做的工作更多2、jq 使用方法:3、什么是 CDNcdn 是内容分发网络,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率.百度 CDN:Google CDN:4、jq 选择器的使用1标签选择器:var p=$(“p”);-此时已经获得 p 标签2class 选择器:var div=$(“.top”);-此时已经获得 class 为 top 的标签3id 选择器:var div=$(“#left”);-此时已经获得 id 为 left 的标签4jq 选择器功能异常强大,css 拥有的选择器,jq 都能用例:层次选择器、结构为类选择器、属性选择器$(“li:nth-child(2)”).text();-获取页面中第二个 li 标签内容5、jq 获取 DOM 元素1获取标签内容:（1）获取纯文本:$(“p”).text();-只能获取 p 标签的文本内容（2）获取纯文本和 HTML 标记:$(“p”).html();-获取 p 标签内容和 p 标签的子级标签例:我是段落我是 span$(“p”).text();-我是段落 我是 span$(“p”).html();-我是段落 我是 span2获取表单内容:$(“input”).val();3获取标签属性:$(“a”).attr(“href”);-获取到了 a 标签 href 的值例:$(“div”).attr(“class”);-获取到了 div 的 class 的值第 1 页 共 5 页24获取标签样式:$(“div”).css(“width”);-获取到了 div 的宽度值5向标签内添加内容:（1）添加纯文本内容:$(“p”).text(“我是新增”);（2）添加文本和 HTML 标记:$(“p”).html(“我是新增”);6向表单中添加内容$(.username).val(我是默认值);/会向 input 表单中添加内容:我是默认值7给标签添加属性:$(img).attr(title,哈哈);/给 img 标签赋值属性 title=哈哈8给标签添加 css 样式:（1）添加一个 css 样式:$(p).css(color,red);/给 p 标签添加一个 css 样式（2）添加多个 css 样式:$(p).css(background-color:green,font-size:50px);/添加多个 css样式6、jq 事件:1点击事件用法:点我弹出 123$(button).click(function()alert(123););2其他事件（1）3事件传递 this:12$(li).click(function()/给所有 li 绑定点击事件var content=$(this).text();/this 的含义是,当前点击的 li标签alert(content););7、jq 操作 DOM 元素1jq 添加、删除、切换 class.bcgbackground-color:red;color:#FFFFFF;第 2 页 共 5 页3我是段落点我给 p 标签添加 class=bcg点我给 p 标签删除 class=bcg点我切换 class=bcg$(.one).click(function()$(p).addClass(bcg););$(.two).click(function()$(p).removeClass(bcg););$(.three).click(function()$(p).toggleClass(bcg););（1）添加:$(p).addClass(bcg);（2）删除:$(p).removeClass(bcg);（3）切换:$(p).toggleClass(bcg);2元素隐藏与显示（1）元素显示:$(p).show();（2）元素隐藏:$(p).hide();（3）切换元素显示和隐藏状态:$(p).toggle();（4）上述三个方法其实有两个默认参数:speed,callbackspeed:方法执行的速度callback:方法经过 speed 毫秒后,要执行的方法名(只写方法名不写括号)$(“p”).hide(5000,say);function say()console.log(我被调用了);3元素的淡入和淡出:操作的是 css 中 opacity 属性,取值范围是 01 之间（1）元素的淡入:$(“p”).fadeIn();-让元素透明度从 0-1（2）元素的淡出:$(“p”).fadeOut();-让元素透明度从 1-0（3）元素切换淡入淡出状态:$(“p”).fadeToggle();-切换元素透明度（4）元素从初始状态渐变为自定义的透明度$(“p”).fadeTo(3000,0.5);-让元素从 当前元素的透明度值-0.5（5）上述四个方法其实还有两个默认参数:speed,callback,用法同隐藏与显示4元素的滑动:（1）元素向上滑动:$(“p”).slideUp();（2）元素向下滑动:$(“p”).slideDown();（3）元素切换上下滑动:$(“p”).slideToggle();（4）上述四个方法其实还有两个默认参数:speed,callback,用法同隐藏与显示5元素动画:（1）开始动画:$(“p”).animate(“width”:”10px”,”height”:”10px”,speed,callback);（2）停止动画:$(“p”).stop(stopAll,goToEnd);第 3 页 共 5 页4stopAll:是否清除动画队列,默认 falsegoToEnd:是否立即完成,false 为默认6添加元素:（1）创建节点:var p=$(“我是创建的 p 标签”);（2）$(A).append(B);/将 B 插入到 A 中（3）$(A).appendTo(B);/将 A 插入到 B 中（4）$(A).prepend(B);/将 B 插入到 A 中并且在最前面,B 是 A 的子元素（5）$(A).prependTo(B);/将 A 插入到 B 中并且在最前面,A 是 B 的子元素（6）$(A).before(B);/将 B 插入到 A 前面,AB 同级（7）$(A).after(B);/将 B 插入到 A 后面,AB 同级例:我是页面原有标题向 div 添加 p1向 div 添加 p2在 div 前面添加 h1在 div 后面添加 h2向 div 添加 p3向 div 添加 p4$(.app).click(function()var p1=$(我是 p1,在原有标签后面);$(div).append(p1););$(.appTo).click(function()var p1=$(我是 p2,在原有标签后面);p1.appendTo($(div););$(.bef).click(function()var h1=$(我是 p2);$(div).before(h1););$(.aft).click(function()var h2=$(我是 p2);$(div).after(h2););$(.preb).click(function()var p1=$(我是 p3,在原有标签前面);$(div).prepend(p1););$(.pretob).click(function()第 4 页 共 5 页5var p1=$(我是 p4,在原有标签前面);p1.prependTo($(div););7删除元素:（1）删除包括自己的所有元素:$(“div”).remove();（2）只删除子级元素:$(“div”).empty();8、遍历 jq 元素1父级:（1）获取所有父级:$(“li”).parents();（2）获取直接父级:$(“li”).parent();（3）获取所有父级中带有特征的元素:$(“li”).parents(“选择器”);2子级（1）获取直接子级:$(“div”).children();（2）获取所有子级:$(“div”).find(“*”);（3）获取直接子级中带有特征的元素:$(“div”).children(“选择器”);（4）获取所有子级中带有特征的元素:$(“div”).find(“选择器”);3兄弟（1）获取所有兄弟:$(“li”).siblings();（2）获取带有特征的所有兄弟:$(“li”).siblings(“选择器”);（3）获取下一个兄弟:$(“li”).next();（4）获取下面所有兄弟:$(“li”).nextAll();（5）获取下面所有带有特征的兄弟:$(“li”).nextAll(“选择器”);4eq:按索引获取元素:$(“li”).eq(index);index 从 0 开始第 5 页 共 5 页