js的流行框架之 jquery
1. jquery的概述
jquery 的版本有两种
版本号为1的可以支持许多的旧版本的浏览器(兼容性更好)
版本号为3为更新的版本,体积更小
2.jquery的使用
要在自己的HTML的代码之间导入一个js的包
<script src="js包的路径"></script>
3.jquery的基本的功能
jquery 的选择器
(1)基本选择器
一般的格式为$(” “) 在双引号之间可以添加
#id值 .class值 标签名
举例
$("input")
$(".aaa")
$("#bbb")
(2)层级选择器
空格:代表的是祖先与后代之间的关系
$(“td input”)
“>” 代表的是父与子之间的关系
$(“td>input”)
(3)筛选器
:first 匹配第一个
:last 匹配第二个
:eq(n) 匹配第n个
:even 匹配为偶数的部分
:odd 匹配为奇数的部分
:gt(n) 下标大于n
:lt(n) 下标小于n
p:not(p:first) 取反 除了第一个段落以外的其它段落
:not(p:first) 取反 除了第一个段落以外的其它所有标签
(4)属性的选择器
<input type="button" name="aaaa">
<input type="text" name="aaaa">
下面开始匹配属性
$("input [type=text]") 注意匹配属性的时候可以不加双引号
$("input [name=^a]") ^ 在这里的意思是可以匹配多个a
$("input [type=button][name=aaa]") 注意还可以匹配多个属性
(5)子元素的选择器
:nth-child(n) 查找第n个元素
$(“td:nth-child(3)”) 查找第3个td
(6)表单的选择器(注意是对于type而言的)
<input type="button">
("祖先button")等价于 ( " 祖 先 b u t t o n " ) 等 价 于 (“input[type=button]”)
jquery的操作
(1)jquery的修改操作
.text() //获取标签的内容 与innerText 的功能相同
.text(“新内容”) //修改标签的内容
.html() // 获取标签的内容 与innerHTML的功能相同
.html(“新的内容”) //修改标签的内容
.empty() //清空标签的内容 注意这样不会删除标签
(2)jquery的删除一个标签的操作
.remove() //会将一个标签连同内容一起删掉
(3)修改属性
.prop(“”) 获取属性的值
.prop(“属性的名字”,”属性的值”)
$("p:input").prop("type") //获取一个标签的值
$("p:input").prop("type","button") //修改一个标签的值为button
$("tbody:checkbox").prop("checked",true)
value 属性特有的方法
.val(); 获取一个value的值
.val(“新的值”); 将value的值修改为一个新的值
(4)增添样式
.addClass(“样式的名”) 给标签增加一个样式
.removeClass(” 样式的名”) 给标签删除一个样式
.css(“样式名”,”样式”)
(“p:first”).css(“backgroundcolor”,”red”)(5)显示隐藏“‘javascript
(
“
p
:
f
i
r
s
t
”
)
.
c
s
s
(
“
b
a
c
k
g
r
o
u
n
d
c
o
l
o
r
”
,
”
r
e
d
”
)
(
5
)
显
示
隐
藏
“
‘
j
a
v
a
s
c
r
i
p
t
(“p:first”).hide(时间参数);//display :none;
$(“p:first”).show(时间参数);
.slideUp();
.slideDown();
.fadeOut();
.fadeIn();
toggle();显示变隐藏,隐藏变演示
(6)尺寸
```javascript
$("div:first").width();//求宽度(仅包括内容不包括内间距)内容
<div class="se-preview-section-delimiter"></div>
.innerWidth();内间距+内容
.outerWidth();内容+内间距+边框
padding
(7)
(window)//转换为jQuery的对象,具备了jQuery的方法
(
w
i
n
d
o
w
)
/
/
转
换
为
j
Q
u
e
r
y
的
对
象
,
具
备
了
j
Q
u
e
r
y
的
方
法
(window).width();可视化的面积
动画的方法
animate(动画)
html,body{
margin=0;
}
.animate({样式对象},时间)
$(“div:first”).animate({left:100},2);
jquery创建标签
一般语法
1
$("<input>")//创建一个标签
$("<input>").prop("type","button").val("按钮").appendTo("body");//body的子元素
链式调用,大部分返回的为this
<div class="se-preview-section-delimiter"></div>
2
$('<input type="button" value="按钮">').appenTo("body");
<div class="se-preview-section-delimiter"></div>
1.6 添加事件
jquery添加事件,用选择器先找到有加入的标签
$(选择器).事件方法(匿名函数);
注意····
(1)
$(document).ready(function(){
<div class="se-preview-section-delimiter"></div>
});等所有的html的标签加载完之后触发
(2)(必须在body中由于执行顺序的原因,body还没有生成,会先执行script标签的语句·····注意,将script的标签放在body的最后面)
$("#btn1").click((function(e(代表事件对象)){
});
<div class="se-preview-section-delimiter"></div>
$(选择器).click((function()){执行的代码}
事件类型
$(选择器).dbclick();//双击
$(选择器).