>### A.今天学什么？
#### 1.juqery选择器
- ##### 1.1 选择器$('选择器') --> 支持所有的css选择器
- 如何修改元素样式 --> p.css({color:"red",backgroundColor:"green"}); 类似于css
```
// body
<body>
<p id="p" class="one">hello world</p>
<p id="p2" class="two">hello chunjue</p>
<script>
// 选择器$('选择器') --> 支持所有的css选择器
var p = $('#p');
var p2 = $('.two');
console.log(p);
// 如何修改元素样式
p.css({color:"red",backgroundColor:"green"});
p2.css({color:"green",backgroundColor:"red"});
</script>
</body>
```
- ##### 1.2 jquery选择器-2
- $ --> 找到，在jquery的事件中，不可以直接使用this，要用$找到
```
// body
<body>
<p>hello chunjue</p>
<div>div</div>
<h1>h1</h1>
<div id="parent" style="background-color: aqua">
<p>hello chunjue</p>
<div style="background-color: #b8b8b8">
<div id="test"></div>
<p>hello yiran</p>
<p>hello yiran</p>
<p>hello yiran</p>
<p>hello yiran</p>
<p>hello yiran</p>
<p>hello yiran</p>
</div>
</div>
<button id="btn">按钮</button>
<script>
// $ --> 找到，在jquery的事件中，不可以直接使用this，要用$找到
// 元素选择器，事件
/*$('p').click(function () {
$(this).css({color:"red"});
});*/
// 选择所有元素
// $('*').css({color:"green"});
// 分组选择器
//$('div,h1').css({color:"#888"});
$('#btn').click(function () {
// 选择 id为parent的父元素的亲子元素p
$("#parent>p").css({color:"red"});
});
// 兄弟选择器
// #test之后的第一个子元素
$('#test+p').css({color:"red"});
console.log($('#test+p'));
// #test之后的所有子元素
$('#test~p').css({color:"green"});
</script>
</body>
```
- ##### 1.3 jquery选择器-3
- 注意，在js中，标签对象的下标从1开始，而jquery中是从0开始
- jquery也支持js中的过滤选择器
- $('div>p:first-child').css({color:"red"});
- 支持简写 --> $('div>p:first').css({color:"red"});
- 奇偶数项，然而这里的下标是从0开始，所以要注意和css的区别
- $('div>p:odd').css({color:"red"}); --> 奇书项
- $('div>p:even').css({color:"green"}); --> 偶数项
- $(':focus') 找到获取焦点的元素
- $('input').focus(function () {
$(':focus').css({backgroundColor:"red"})
});
- 内容过滤选择器
- contains() --> 包含文本
- has() --> 包含标签
```
// css
<style>
/* 奇数项 标签下标从1开始 */
div>P:nth-child(odd){}
/* 偶数项 */
div>p:nth-child(even){}
</style>
// body
<body>
<div>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<input type="text">
</div>
<div>chunjue</div>
<div><h1>haha</h1></div>
<script>
// 注意，在js中，标签对象的下标从1开始，而jquery中是从0开始
// jquery也支持js中的过滤选择器
/*$('div>p:first-child').css({color:"red"});
$('div>p:last-child').css({color:"green"});*/
// 也支持简写，可以去掉后面的child
/*$('div>p:first').css({color:"red"});
$('div>p:last').css({color:"green"});*/
// $('div>p:not(:last)').css({color:"red"});
// 奇偶数项，然而这里的下标是从0开始，所以要注意和css的区别
/*$('div>p:odd').css({color:"red"});
$('div>p:even').css({color:"green"});*/
// 由于jquery下标从0开始，所以这里选择的是第二个p标签
/*$('div>p:eq(1)').css({color:"red"});
// 也有一种eq方法选择
$('div>p').eq(0).css({color:"green"});*/
// gt，lt方法 --> 选中大于或小于该下标的兄弟元素，不包含该下标的元素
$('div>p:gt(2)').css({color:"red"});
$('div>p:lt(2)').css({color:"green"});
// $(':focus') 找到获取焦点的元素
$('input').focus(function () {
$(':focus').css({backgroundColor:"red"})
});
// 内容过滤选择器
// contains() --> 包含文本
// 选中内容为chunjue的div元素
$('div:contains(chunjue)').css({backgroundColor:"#888"});
// has() --> 包含标签
$('div:has(h1)').css({backgroundColor:"green"});
</script>
</body>
```
- ##### 1.3 visible和hidden
- visible --> 可见的元素
- hidden --> 隐藏的元素
```
// css
<style>
div{
display: none;
}
</style>
// body
<body>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<!-- visibility：可见度，拓展部分 -->
<div>哈哈哈</div>
<script>
// 选中所有的可见元素
$(':visible').css({color:"red"});
// 选中不可见的div元素，不要选择所有，否则注释，title都会显示出来
// :hidden --> 只对display:none起作用，对visibility:hidden不起作用
$('div:hidden').css({display:"block"});
</script>
</body>
```
#### 2.jquery的DOM操作
- ##### 2.1 DOM操作-1
- text(value)方法 --> 获取元素文本内容，若传参，则会修改元素文本内容
- 查找属性节点 attr(key) --> 获取元素某属性的值，也可以用来设置属性，后面会讲
- html() --> 获取元素内容，不限于文本，html标签也可以获取
- val() --> 获取输入框的值
```
// body
<body>
<ul>
<li class="one">1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<p>hello yiran</p>
</div>
<input type="text" value="hello DNF">
<script>
// text(value)方法 --> 获取元素文本内容，若传参，则会修改元素文本内容
// 获取第二个元素的文本内容 --> 下标从0开始
var txt = $('li:eq(1)').text();
console.log(txt); // 2
// 修改第一个元素的文本内容
$('li:eq(0)').text("hello chunjue");
// 查找属性节点 attr(key) --> 获取元素某属性的值，也可以用来设置属性，后面会讲
// 查找第一个元素的class属性
var attr = $('li:eq(0)').attr("class");
console.log(attr); // one
// html() --> 获取元素内容，不限于文本，html标签也可以获取
var html = $('div').html();
console.log(html); // <p>hello yiran</p> 前面的空格是换行符
// val() --> 获取输入框的值
var value = $('input').val();
console.log(value); // hello DNF
</script>
</body>
```
- ##### 2.2 创建标签和添加标签
- $('\<li>2\</li>'); --> 创建一个元素节点，直接使用$('')，其中写标签即可
- append() --> 从父元素的末尾添加
- prepend() --> 从父元素的首部添加
- appendTo() --> 和append()的区别在于appendTo()先选定要添加的元素节点，参数为要添加到的父元素
```
// body
<body>
<ul>
<li>1</li>
</ul>
<script>
// $('<li>2</li>'); --> 创建一个元素节点
var $li = $('<li>2</li>');
var $li_one = $('<li>0</li>');
// append() --> 从父元素的末尾添加
$('ul').append($li);
// prepend() --> 从父元素的首部添加
$('ul').prepend($li_one);
// appendTo() --> 和append()的区别在于appendTo()先选定要添加的元素节点，参数为要添加到的父元素
</script>
</body>
```
- ##### 2.3 before和after
- before,after --> 兄弟元素之间，不同于append、prepend的父子之间
- after() --> 在某元素的后面添加
- before() --> 在某元素的前面添加
```
// body
<body>
<div>div</div>
<p>end</p>
<script>
// before,after --> 兄弟元素之间，不同于append、prepend的父子之间
var $p = $('<p>one</p>');
var $h4 = $('<h4>h4</h4>');
// after() --> 在某元素的后面添加
$('div').after($p);
// before() --> 在某元素的前面添加
// 在内容为end的p标签的前面添加h4标签
$('p:contains(end)').before($h4);
</script>
</body>
```
- ##### 2.4 remove删除节点
- remove() --> 删除节点
```
// body
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button id="btn">删除</button>
<script>
// remove() --> 删除节点
var btn = $('#btn');
btn.click(function () {
$('ul>li:eq(1)').remove();
})
</script>
</body>
```
- ##### 2.5 empty清空标签文本内容
- empty() --> 清空标签文本内容
```
// body
<body>
<div style="width: 100px;height: 100px;background-color: #b8b8b8">hello chunjue</div>
<button id="btn">按钮</button>
<script>
// empty() --> 清空标签文本内容
$('#btn').click(function () {
$('div').empty();
})
</script>
</body>
```
- ##### 2.6 replace替换标签
- replaceWith(节点) --> 替换节点
```
// body
<body>
<div>hello world</div>
<script>
// replaceWith(节点) --> 替换节点
var $p = $('<p>替换节点</p>');
$('div').replaceWith($p);
</script>
</body>
```
- ##### 2.7 wrap
- wrap() --> 在元素的外层嵌套标签
- wrapInner() --> 在元素的内层嵌套标签，元素的原内容也会到 被元素嵌套的这个标签 中
- 例如：对 \<p>aa\</p> 该方法，在内层套一个 \<div>被包起来\</div>
- 结果：\<p>\<div>被包起来aa\</div>\</p>
- 即 --> 嵌套在该元素a内部的元素b，会将a的内容都包裹在最内部，相对于a来说，b的优先级更高，差不多这个意思
```
// body
<body>
<p>hello chunjue</p>
<script>
// wrap() --> 在元素的外层嵌套标签
$('p').wrap("<div>包起来</div>>");
// wrapInner() --> 在元素的内层嵌套标签，元素的原内容也会到被元素嵌套的这个标签中
$('p').wrapInner("<div>被包起来</div>>");
</script>
</body>
```
- ##### 2.8 操作属性
- attr(attrName,value) --> 设置属性
- attr({attrName:value,attrName:value}) 设置多个属性
- removeAttr(key) --> 删除属性
```
// body
<body>
<p class="one"> hello chunjue</p>
<script>
// attr(attrName,value) --> 设置属性
// $('p').attr("class","two");
// attr({attrName:value,attrName:value}) 设置多个属性
$('p').attr({class:"two",title:"hello"});
// removeAttr(key) --> 删除属性
$('p').removeAttr("class");
</script>
</body>
```
- ##### 2.9 样式操作
- 通过设置属性的方式设置样式
- $('p').attr("class","current");
- addClass(className) --> 给某元素添加样式，参数为样式名
- removeClass(className) --> 给某元素移除样式，参数为样式名
```
// css
<style>
.current{
color: red;
}
</style>
// body
<body>
<p>hello chunjue</p>
<button id="btn">按钮</button>
<script>
// 1.通过设置属性的方式设置样式
// $('p').attr("class","current");
// addClass(className) --> 给某元素添加样式，参数为样式名
$('p').addClass("current");
// removeClass(className) --> 给某元素移除样式，参数为样式名
$('#btn').click(function () {
$('p').removeClass("current");
})
</script>
</body>
```
- ##### 2.10 toggleClass 切换
- toggleClass(className) --> 开关，集成removeClass和addClass，实现切换功能
- hasClass(className) --> 判断元素是否含有该样式，返回布尔值
- 例子：使用hasClass、removeClass、addClass实现toggleClass
```
// css
<style>
.current{
color: red;
}
</style>
// body
<body>
<p>hello chunjue</p>
<button id="btn">按钮</button>
<script>
// toggleClass(className) --> 开关，集成removeClass和addClass，实现切换功能
/*$('#btn').click(function () {
$('p').toggleClass("current");
});*/
// hasClass(className) --> 判断元素是否含有该样式，返回布尔值
var one = $('p').hasClass("current");
console.log(one);
// 使用hasClass、removeClass、addClass实现toggleClass
$('#btn').click(function () {
if ($('p').hasClass('current')){
$('p').removeClass("current");
}else{
$('p').addClass("current");
}
})
</script>
</body>
```
- ##### 2.11 节点遍历
- children() --> 获得元素的子元素数组
- jquery可以直接对元素数组进行css设置
- prev() --> 找到元素的上一个元素
- next() --> 找到元素的下一个元素
```
// body
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
parent
<p>hello yiran</p>
</div>
<script>
// children() --> 获得元素的子元素数组
// var childs = $('ul').children();
// console.log(childs);
// jquery可以直接对元素数组进行css设置
// 注意，这里的childs是一个元素数组
// childs.css({color:"red"});
// prev() --> 找到元素的上一个元素
$('li:eq(1)').prev().css({backgroundColor:"green"});
// next() --> 找到元素的下一个元素
$('li:eq(1)').next().css({backgroundColor:"#888"});
// siblings() --> 找到该元素所有的兄弟元素，不包含该元素
var siblings= $('li:eq(0)').siblings();
console.log(siblings);
siblings.css({color:"red"});
// parent() --> 获取元素的父节点
var parent = $('p').parent();
console.log(parent);
// 所有的DOM元素加载完毕后执行代码块中的js
// $(document).ready(function () {
//
// })
// 简写
// $(function()){}
</script>
</body>
```
- ##### 2.12 寻找元素
- parent() --> 只会找到亲爹
- parents() --> 找到所有的父元素、老爸 爷爷 爷爷的爸爸
- closet(value) --> 找到你想要的父元素
```
// body
<body>
<div class="grandfather">
grandFather
<div id="baba" class="parent">
parent
<p>hello yiran</p>
</div>
</div>
<script>
// parent() --> 只会找到亲爹
var parent = $('p').parent();
console.log(parent);
// parents() --> 找到所有的父元素、老爸 爷爷 爷爷的爸爸
var parents = $('p').parents();
console.log(parents); // 上级都能找到
// closet(value) --> 找到你想要的父元素
var closet = $('p').closest(".grandfather");
console.log(closet);
var baba = $('p').closest('#baba');
console.log(baba);
</script>
</body>
```
- ##### 2.13 hide和show
- is() --> 是否符合，返回boolean值；不好形容，看is应该就能明白了
- hide() --> 将元素隐藏
- show() --> 将元素显示
```
// body
<body>
<div>
<p class="one">hello yiran</p>
</div>
<button id="btn">隐藏</button>
<button id="btn2">显示</button>
<script>
// is() --> 返回boolean值
// hide() --> 将元素隐藏
// show() --> 将元素显示
var p = $('p').is(".one");
console.log(p); // true
$('#btn').click(function () {
// 是否显示
console.log($('p').is(':visible'));
$('p').hide();
});
$('#btn2').click(function () {
$('p').show();
});
</script>
</body>
```
- ##### 2.14 filter和offset
- filter() --> 获取符合条件的元素
- offset() --> 位移值，拥有left、top属性
- left --> 元素左偏移量
- top --> 元素右偏移量
- 注意，有的时候不能直接console.log(top)，会输出window的状态属性，定义变量名时使用Top比较好
```
// css
<style>
*{margin: 0;padding: 0}
div{
width: 100px;
height: 100px;
margin: 100px;
background-color: red;
}
</style>
// body
<body>
<ul>
<li>1</li>
<li class="one">1</li>
<li>1</li>
</ul>
<div></div>
<script>
// filter() --> 获取符合条件的元素
$('li').filter(".one").css({color:"red"});
// offset() --> 位移值，拥有left、top属性
var Left = $('div').offset().left;
console.log(Left);
var Top = $('div').offset().top;
console.log(Top);
// top --> 输出top可以查询window属性
console.log(top);
</script>
</body>
```
