❋JQuery的快速入门 1 了解jq
目录
选定元素
1. jquery基本选择器
2. 层级选择器
3. 元素精确定位
4. 内容选择器
5. 属性选择器及其他
元素解析
操作元素内容与样式
操作文档的文本结构
jq事件
jq动画
JQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
使用前要先导入jquery库，到jQuery官网下载，导入至html中的head标签即可
选定元素
1. jquery基本选择器
- *
- id
- class
- 标签
- 属性
- 多个选择器一起
This is a paragraph.
This is another paragraph.
This is another paragraph2.
2. 层级选择器
后代，父子，兄弟
p1
p2
p3span
span2
3. 元素精确定位
first,last,even,odd,hearder【第一个，最后一个，偶数，奇数，h1这种】就不说了
not:除什么外，eq(n)：第n的标号 ，gt(n):数组索引大于n的元素，lt(n):数组索引小于n的元素
4. 内容选择器
:contains('文本')【匹配含有该文本的标签】
:empty【匹配所有不包含子元素或者文本的空元素】
:has(tag)【匹配含有选择器所匹配的元素的元素】
john
excel
john
空匹配有一个相反的函数，parent：匹配含有子元素或者文本的元素
5. 属性选择器及其他
$("div[属性]")
$("div[属性=value]")
$("div[属性!=value]")
$("div[属性^=value]")属性以某些值开始
$("div[属性$=value]")以某些值结束
$("div[属性*=value]")包含某些值
写法分别是：
$("div:nth-child(1-index)")[index=even...]
$(":input")
$("input:enabled")
元素解析
- text
- html
- val
1
2
3
操作元素内容与样式
css与attr非常相似，但是获取的值并不是实时的，获取实时的值，使用的是val
使用css或attr更改元素的属性值
Document
一段话
样式
addcss
操作文档的文本结构
div{
border: 1px dotted black;
}
span{
border: 1px solid green;
}
b{
/* display: block; */
border: 1px solid blue;
}
i{
border: 1px solid hotpink;
}1. 内部插入：append，appendTo，prepend，prependTo【注意To与非To的区别】
TO
span1
span2
2. 外部插入：after，before，inserAfter，inserBefore
span1TO
3. 包裹：wrap，unwrap，wrapAll，wrapInner
这是一个 span
这是一个 span
这是box3
b1
b2
span1
4. 替换：replaceWith，replaceAll
in
span1
span2
b1
b2
5. 删除：empty，remove
span1
b1
i1
6. 克隆 ：clone
span1
b1
jq事件
1.页面载入ready
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在
元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
$(document).ready(function(){
// 在这里写你的代码...
});
等价于
$(function(){
// 在这里写你的代码...
})2. 事件处理【bind，unbind，one】
Document
3. 事件切换【hover，toggle】
div
toggle（元素的隐藏与展示动画那里说）
4. 事件【click，mouseover，focus，blur等】
jq动画
show+hide【等比放大，等比缩小】 等价于toggle【切换元素展示与隐藏的状态】
Document
下节为jq案例