jQuery2
JS对象和jQuery对象的方法能否共用?
不能!
对象是否可互换?
可以! $(dom)
this代表的是dom对象
$(this)代表的是jQuery对象,后面可以用jq方法
js对象和jq对象的区别是什么?
jq对象就是js中的new object生成的普通对象
如何把jq对象转换为js对象?
var val= $("h1")[0].outerHTML;
var val = $("h1").get(0).outerHTML;
var val = $("h1").html
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击换行号</title>
<script src="dashboard/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>aa</h1>
<h1>aa</h1>
<h1>aa</h1>
<h1>aa</h1>
<h1>aa</h1>
</body>
<script>
如下
</script>
</html>
###核心方法
```
1. attr() :要修改标签的属性,就如下代码,会给h1标签里面增加一个num属性.
2. data() : 往jQuery对象身上赋属性或者值,他不会动标签属性.只是通过data存进去一个值,然后再通过data取出来. 建议用data.
3. each();遍历,
for循环在jquery里面的代名词就是each,
$("h1").each(function (i) {
// alert(i)
// $("h1").get()[i] #转换为dom对象
// $("h1").get()[i].setAttribute("num",i+1) js方法
$(this).data({'num':'i+1'})
});
// 批量加
$('h1').click(function () {
// this.innerHTML = this.getAttribute("num") js方法
$(this).html($(this).data('num'))
})
把五个h1标签对象进行遍历.
#获取jquery对象中dom对象的个数
4. size(); #dom对象个数
5. length; 俩其实一样,只不过这个是属性
6. get(); 全拿出来,是个数组,类似于对象集合
7. get(index); 得到对象,用于互换身份
8. index(); 它只是找到索引位置,
9. eq(index); 他是把该索引位置的标签对象拿到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
margin: 0px;
padding: 0px;
font-family:Sana;
}
.menu{
height: 50px;
line-height: 40px;
background: #272822;
}
.menu ul{
list-style: none;
}
.menu ul li{
float: left;
color: #fff;
margin-left: 15px;
line-height: 50px;
text-align: center;
width: 100px;
}
.menu ul li:hover{
cursor:pointer;
background: #ccc;
}
.menu ul li:first-child{
/*background: #cccccc;*/
}
.info{
height: 200px;
background: #cccccc;
overflow: hidden;
padding: 15px;
color: #fff;
}
.info p {
display: none;
}
.info p:first-child{
display: block;
}
</style>
<script src="dashboard/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="menu">
<ul>
<li>bigfly</li>
<li>sbxy</li>
<li>666</li>
</ul>
</div>
<div class="info">
<p>bigfly!!!🤗🤗🤗bigfly!!!🤗🤗🤗</p>
<p>666!!!🌚🌚🌚666!!!🌚🌚🌚</p>
<p>xysb!!!🌞🌞🌞xysb!!!🌞🌞🌞</p>
</div>
</body>
<script>
$('.menu li').eq(0).css({'background':'#ccc'});
$('.menu li').mouseenter(function () {
$(this).css({'background':'#ccc'});
$('.menu li').not($(this)).css({'background':'#272822'});
//查this在所有的li里面排第几个
var idx = $(this).index('.menu li');
$('.info p').eq(idx).show();
$('.info p').not($('.info p').eq(idx)).hide()
})
</script>
</html>
```
######jQuery中$方法冲突,解决办法 :
1. $();
2. jQuery();
```
: 是用来修饰前面的选择器的,都是修饰器,基本不能单独存在,如果知道是要修饰谁可以不加选择器
. 是方法
```
```
基本选择器
:even 偶数
:odd 奇数
:eq(1) 索引等于1
:gt(1) 大于1
:lt(1) 小于1
```
```
内容选择器
:has() $('div:has(a)') 含有a标签的div标签
:empty 空的
:parent 匹配有孩子的父亲,含有子标签或者文本的元素,空格都算.
表单对象属性 :
:checked 找到所有被选中的元素(不包括select中的option)
筛选和基础选择器( > + ~)共同的任务都是找元素
.add() 串联筛选器
.andSelf 串联上自己 $('div').next().andSelf().css({'color':'#ccc'})
查找
筛选
第一种父子关系或者祖先和后代关系
关系查找:
parent() 父亲
children() 孩子 子元素
第二种就是同辈关系,也就是兄弟关系
关系查找
prev() 上一个兄弟
prevAll() 上面所有的兄弟
next()下一个兄弟
nextAll() 后面所有的兄弟
sibilings() 前后所有的兄弟
find() 后代查找
```
```
属性
1. 属性
attr();
attr({}); 获取属性值,建议使用{}
2. CSS类
addClass(); 给一个标签加类名
removeClass();
toggleClass(); 切换类
3. HTML代码
html();
html(val);
4. 文本
text();
text(val);
5. 值
val();
val(val); 可获取也可以赋值
```
######文档处理
```
######内部插入 剪贴作用
append(content|fn)-->往后加
appendTo(content)
A.append(B) 把B添加到A后面
A.appendTo(B) 把A添加到B的后面
######外部插入
往前加
A.before(B) 把B插入到A的前面
A.insertBfore(B) 把A插入到B的前面
往后加
A.after(B) 把B插入到A的后面
A.insertAfter(B) 把A添加到B的后面
######包裹
选中一个等待被包裹的对象,后面就是拿什么包.
wrap()
unwrap() 取消.wrap()方法的效果.
wrapAll() 将所有匹配的元素用单个元素包裹起来.如果中间有别的标签,会将不匹配的标签拿出来放到效果后.
wrapInner() 弥补ALL的缺陷
######替换
replaceWith()
A.replaceWith(B) B替换A
replaceAll() 前面的替换后面的
######删除
empty() 内容清空,标签还在,内部清空
remove() 删除,整体都删除
detach() 从DOM中删除所有匹配的元素,与remove()不同的是,所有绑定的事件和附加的数据等都会包保留下来.
######复制
clone([Even[,deepEven]]) #后面可以加一个参数true,事件都克隆
#####动画
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
实际上是改变的元素的高度
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出 : 透明度
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
- 淡出到0.66透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(3000, function () {
alert("666");
});
自定义
animate(p,[s],[e],[fn])1.8*
- css属性值都可以设置
- 女朋友变小（漏气）
######事件处理
之前绑定事件的方式：
1. onclick=clickMe(); function clickMe() {}
2. ele.onclick = function(){}
3. ele.addEventListener("click", function(){})
jQuery绑定事件的方式：
1. $(ele).on("click", function(){})
如果不需要使用事件委托的话.可以直接写$(ele).click(function(){})
2. $("tbody").delegate(".btn-warning", "click", function(){})
3. $("tbody").on("click",".btn-warning",function(){}) 我们要用的事件委派
```
$("tbody").on("click",".btn-warning",function(){})
$(ele).on("click", function(){})
$(ele).click(function(){})
```
编辑操作:
弹出模态框
然后给模态框赋值: 1.取值 2.赋值
点击模态框上的提交按钮. 1. 隐藏模态框. 2. 更新td的值.
```
```
常用事件!!
重点:
jQuery扩展 :
```
```
#### e.target与this的区别
event.target表示发生点击事件的元素
this表示注册点击事件的元素
this 等于 e.currentTarget 指的是现在的目标
this是所有原生函数具有的,进入函数时,this已经有了目标对象
而e.target是通过e再寻找target,中转了一下. 所以相比较而言,this的执行效率更高一些.
有元素嵌套时,这两个就不相等了.
<div><img src="..."></div>
<script>
$('div').click(function() {
e.target 表示事件触发元素这里会是img
this 始终指向绑定事件的元素也就是div
});
</script>
```
```
#### 事件捕获和事件冒泡
Example:
<div>
<p>元素</p>
</div>
这俩元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行?事件顺序是什么?
事件冒泡 : 当你使用事件冒泡时,子级元素先触发,父级元素后触发. 也就是p先触发
事件捕获 : 使用事件捕获时,父级元素先触发,子级元素后触发. 也就是div先触发
在W3C模型中,可以自己选择使用绑定事件时,使用冒泡还是捕获.
方法 : addEventListener函数. 它包含三个参数,第三个参数如果是true就采用事件捕获,如果是false就采用事件冒泡.
ele.addEventListener('click',function(),true/false)
true : 事件句柄在捕获阶段执行
false : 默认为false.事件句柄在冒泡阶段执行
```
```
jQuery扩展
$.***()
给jQuery添加扩展
$.extend({
'aa':function(){
console.log('666)})
$.aa()
$('').***()
给jQuery对象添加将扩展
$.fn.extend({
'bb':function(){
console.log('777')
}
})
$(':input').bb()
```
```
文档树加载完之后绑定事件(大部分情况下)
$(document).ready(function){
}
简写
$(function($){
}
```
🌈
