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

《（自考专升本）自考《Jquery》学习知识点串讲笔记.docx》由会员分享，可在线阅读，更多相关《（自考专升本）自考《Jquery》学习知识点串讲笔记.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、自考Jquery学习知识点笔记一、 什么是JQuery?为什么用JQuery?jq是js的代码库,jq让我们写的更少、做的工作更多二、 jq使用方法:三、 什么是CDNcdn是内容分发网络,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率.百度CDN:Google CDN:四、 jq选择器的使用1 标签选择器: var p = $(“p”); - 此时已经获得p标签2 class选择器: var div = $(“.top”); - 此时已经获得class为top的标签3 id选择器: var div = $(“#left”); - 此时已经获得id为left的标签4 jq选

2、择器功能异常强大,css拥有的选择器,jq都能用例: 层次选择器、结构为类选择器、属性选择器$(“li:nth-child(2)”).text(); -获取页面中第二个li标签内容五、 jq获取DOM元素1 获取标签内容:（1） 获取纯文本: $(“p”).text();-只能获取p标签的文本内容（2） 获取纯文本和HTML标记: $(“p”).html(); -获取p标签内容和p标签的子级标签例: 我是段落我是span$(“p”).text();-我是段落 我是span$(“p”).html();-我是段落 我是span2 获取表单内容: $(“input”).val();3 获取标签属性:

3、 $(“a”).attr(“href”); -获取到了a标签href的值例: $(“div”).attr(“class”); -获取到了div的class的值4 获取标签样式: $(“div”).css(“width”); -获取到了div的宽度值5 向标签内添加内容:（1） 添加纯文本内容: $(“p”).text(“我是新增”); （2） 添加文本和HTML标记: $(“p”).html(“我是新增”); 6 向表单中添加内容$(.username).val(我是默认值);/会向input表单中添加内容: 我是默认值7 给标签添加属性:$(img).attr(title,哈哈);/给img

4、标签赋值属性title=哈哈8 给标签添加css样式:（1） 添加一个css样式: $(p).css(color,red);/给p标签添加一个css样式（2） 添加多个css样式:$(p).css(background-color:green,font-size:50px);/添加多个css样式六、 jq事件:1 点击事件用法:点我弹出123$(button).click(function()alert(123););2 其他事件（1）3 事件传递this:12$(li).click(function()/给所有li绑定点击事件var content = $(this).text(); /th

5、is的含义是,当前点击的li标签alert(content););七、 jq操作DOM元素1 jq添加、删除、切换class.bcgbackground-color: red;color: #FFFFFF;我是段落点我给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）

6、 添加: $(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.l

7、og(我被调用了);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） 元素向上滑动:$(“

8、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);stopAll:是否清除动画队列,默认falsegoToEnd:是否立即完成,false为默认6 添加元素:（1） 创建节

9、点: 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$(.ap

10、p).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,在原

11、有标签前面);$(div).prepend(p1););$(.pretob).click(function()var p1 = $(我是p4,在原有标签前面);p1.prependTo($(div););7 删除元素:（1） 删除包括自己的所有元素: $(“div”).remove();（2） 只删除子级元素: $(“div”).empty();八、 遍历jq元素1 父级: （1） 获取所有父级: $(“li”).parents();（2） 获取直接父级:$(“li”).parent();（3） 获取所有父级中带有特征的元素:$(“li”).parents(“选择器”);2 子级（1） 获取直

12、接子级: $(“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(“选择器”);4 eq:按索引获取元素: $(“li”).eq(index); index从0开始5