jquery

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") 等价于$(“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: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的方法$(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();//双击
$(选择器).