JQuery笔记
一、什么是JQuery?为什么用JQuery?
jq是js的代码库,jq让我们写的更少、做的工作更多
二、jq使用方法:
<head>
<!-- 引入jq文件 -->
<script src="jquery-3.4.1.min.js"></script>
</head>
三、什么是CDN
- cdn是内容分发网络,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。
- 百度CDN:
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
- Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
四、jq选择器的使用
- 标签选择器:
- class选择器:
- id选择器:
- jq选择器功能异常强大,css拥有的选择器,jq都能用
例: 层次选择器、结构为类选择器、属性选择器
$(“li:nth-child(2)”).text(); ---->获取页面中第二个li标签内容
五、jq获取DOM元素
- 获取标签内容:
- 获取纯文本: text()
- 获取纯文本和HTML标记: html()
- 获取表单内容: val();
- 获取标签属性: attr();
- 获取标签样式: $(“div”).css(“width”);
- 向标签中添加内容:
- 向标签内添加内容:
- 添加纯文本内容:
$(“p”).text(“我是新增”);
- 添加文本和HTML标记:
(“p”).html(“我是新增”);
- 向表单中添加内容
$(".user").val("…");
- 给标签添加属性:
$(“img”).attr(“title”,“哈哈”);
- 给标签添加css样式:
- 添加一个css样式:
$(“p”).css(“color”,“red”);
- 添加多个css样式:
$(“p”).css({“background-color”:“green”,“font-size”:“50px”});
六、jq事件
- 点击事件用法:
$("input").click(function(){
alert('我被触发了');
});
- 事件传递this:
$("ul li").click(function(){
console.log($(this).text());
});
七、jq操作DOM元素
1.jq添加、删除、切换class
- 添加:
$(“p”).addClass(“bcg”);
- 删除:
$(“p”).removeClass(“bcg”);
- 切换:
$(“p”).toggleClass(“bcg”);
2.元素隐藏与显示
- 元素显示:
$(“p”).show();
- 元素隐藏:
$(“p”).hide();
- 切换元素显示和隐藏状态:
$(“p”).toggle();
- 上述三个方法其实有两个默认参数:
- speed: 方法执行的速度
- callback: 方法经过speed毫秒后,要执行的方法名(只写方法名不写括号)
3.元素的淡入和淡出 : 操作的是css中 opacity属性,取值范围是0~1之间
- 元素的淡入:
$(“p”).fadeIn(); 元素透明度从0–>1
- 元素的淡出:
$(“p”).fadeOut(); 元素透明度从1–>0
- 元素切换淡入淡出状态:
$(“p”).fadeToggle();切换元素透明度
- 元素从初始状态渐变为自定义的透明度:
$(“p”).fadeTo(3000,0.5);
- 上述四个方法其实还有两个默认参数:speed,callback,用法同隐藏与显示
4.元素的滑动:
- 元素向上滑动:
$(“p”).slideUp();
- 元素向下滑动:
$(“p”).slideDown();
- 元素切换上下滑动:
$(“p”).slideToggle();
- 上述四个方法其实还有两个默认参数:speed,callback,用法同隐藏与显示
5.元素动画:
- 开始动画:
$(“p”).animate({“width”:”10px”},speed,callback)
- 停止动画:
$(“p”).stop();
6.添加元素:
- 创建节点:
var p = $("<p>我是创建的p标签</p>");
- 将B插入到A中:
$(A).append(B);
- 将A插入到B中:
$(A).appendTo(B);
- 将B插入到A中并且在最前面,B是A的子元素:
$(A).prepend(B);
- 将A插入到B中并且在最前面,A是B的子元素:
$(A).prependTo(B);
- 将B插入到A前面,AB同级:
$(A).before(B);
- 将B插入到A后面,AB同级:
$(A).after(B);
7.删除元素:
- 删除包括自己的所有元素:
$(“div”).remove();
- 只删除子级元素:
$(“div”).empty();
八、遍历jq元素
1.父级:
- 获取所有父级:
$(“li”).parents();
- 获取直接父级:
$(“li”).parent();
- 获取所有父级中带有特征的元素:
$(“li”).parents(“选择器”);
2.子级
- 获取直接子级:
$(“div”).children();
- 获取所有子级:
$(“div”).find(“*”);
- 获取直接子级中带有特征的元素:
$(“div”).children(“选择器”);
- 获取所有子级中带有特征的元素:
$(“div”).find(“选择器”);
3.兄弟
- 获取所有兄弟:
$(“li”).siblings();
- 获取带有特征的所有兄弟:
$(“li”).siblings(“选择器”);
- 获取下一个兄弟:
$(“li”).next();
- 获取下面所有兄弟:
$(“li”).nextAll();
- 获取下面所有带有特征的兄弟:
$(“li”).nextAll(“选择器”);
4.eq:按索引获取元素:
$(“li”).eq(index); index从0开始