一、事件机制
1、事件源.事件类型(事件处理程序)
$(this)中的this不能加引号
$('#box').click(function () {$(this).css('background-color','blue')//点击颜色变为蓝色
})
2、事件源.on/bind(事件类型，事件处理程序)
$("#box").on('dbclick',function () {$(this).css('border-radius','100px')
})
$('#box').bind('mouseover',function () {$(this).csss('font-size','60px')
})
3、事件源.on/bind({事件类型1：事件处理程序1，事件类型2：事件处理程序2，}）
$('#box').on({ //用on或bindmousedown: function () {//按下鼠标console.log("鼠标按下了")},mouseup: function () {//抬起鼠标console.log("鼠标抬起了")}
})
区别.on()与.bind()：
- 与 .bind() 不同的是，.on() 方法可以附加额外的参数，如可选的选择器，用于对事件目标进行过滤。这样，您可以只在满足选择器条件的元素上触发事件处理程序。
4、事件对象
event不用考虑兼容性 输出必须要event.属性
$("#box").on({mouseenter: function () {
//MouseEvent {isTrusted: true, screenX: 168, screenY: 178, clientX: 127 …}console.log(event)console.log('pageX:' + event.pageX)//距离浏览器左边的横坐标 包括滚动条卷去的console.log('clientX:' + event.clientX)//距离浏览器左边的横坐标},
})
$('#user').bind('keyup', function () {console.log(event);//如果按下enter就跳转页面if(event.keyCode == 13 && event.key == 'Enter') {window.location.href = "https://www.***.com"}
})
5、each() 函数用于遍历的对象和数组。
$('#btn').click(function () {console.log($("ul>li"));$('ul>li').each(function () {console.log($(this).text()// 输出每个列表项的文本内容})
})
6、jQuery.each(数组/对象,回调函数(key,value)) 遍历数组或者对象
遍历数组
var arr = ['web', '前端']
//遍历数组 key value也可以
$.each(arr, function (index, item) {
//数组的索引是0，值是web 数组的索引是1，值是前端 console.log('数组的索引是' + index + '，值是' + item)
})
遍历对象
var obj = { name: "小明", age: 20, sex: "男" }
$.each(obj, function (index, item) {
//属性名：name，属性值：小明 属性名：age，属性值：20 属性名：sex，属性值：男console.log("属性名：" + index + "，属性值：" + item)
})
二、DOM操作
1、 html()获取或设置被选元素的所有节点
- 相当于
innerHTML
console.log($('#box').html());
//<p>哈哈哈</p> <!-- 我是注释 --> 都可以获取到
$("#btn").on('click',function(){$("#box").html("<a>我是超链接</a><!-- 我是注释的升级版 -->")
})
2、text()设置或返回所选元素的内容
- 相当于innerText
console.log($('#box').text())//返回内容
$('#btn').bind('mouseover', function () {$('#box').text('段落标签')//改变内容为段落标签
})
3、val()设置或返回表单字段的值
<input type="text" id="user" value="我是输入框的文本">
console.log($('#user').val())//返回 我是输入框的文本
$('#user').on({click: function () {$(this).val('web31')//点击以后 值变为 web31}
})
4、attr()、prop()获取或者设置被选元素的属性，参数是属性名和属性值
区别1：
- attr() 不仅可以获取和设置元素的本身属性和设置元素的自定义属性
- prop()只能设置元素的本身属性
区别2：
- 表单中的一些属性disabled/selected/checked用prop()
<p class="text" name_1="proName">我是盒子box中的段落文本text</p>
console.log($('.text').attr('class')) //text 获取类名为text的class为
console.log($('.text').prop('class')) //text 获取类名为text的class为
//proName 获取类名为text的name_1为
console.log($('.text').attr('name_1'))//proName
console.log($('.text').prop('name_1')) //undefined prop不能获取自定义属性
$('#btnSet').click(function () {console.log($(this).attr('disabled')) //undefined 表单中的不能用attrconsole.log($(this).prop('disabled'))//flase
})
三、jquery对尺寸操作
1、width()和height()方法
- 设置或返回元素的宽度高度
- 相当于 style.width()
元素本身大小
console.log($('#child').width())//返回元素的宽度
console.log($('#child').height())
$('button').click(function () {$('#child').width('400px')//点击以后 将元素的宽度改为400px$('#child').height('300px')
})
2、innerWidth() 和 innerHeight()
- 相当于clientWidth() / clientHeight()
元素本身 + padding
console.log($('#child').innerWidth())
console.log($('#child').innerHeight())
3、outerWidth() 和 outerHeight()
- 相当于offsetWidth offsetHeight
元素本身 + padding + border
console.log($('#child').outerWidth())
console.log($('#child').outerHeight())
4、scrollTop()和scrollLeft()
- 方法设置或者返回滚动条被卷去的元素的高度
- scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度
$(window).scroll(function () {
// console.log($(window).scrollTop())
console.log($(window).scrollLeft())
})
$('#set').click(function () {$(window).scrollTop(600)//点击按钮 滚动条卷去600px
})
四、jQuery添加和删除元素
1、append() 结尾插入（选择的元素内部）
$("#add").click(function () {console.log($("#parent").append("<li>我是添加的元素</li>"));
})
2、prepend() 开头插入（选择的元素内部）
$("#add").click(function () {console.log($("#parent").prepend("<li>我是添加的元素</li>"));
})
3、after() 之后插入 （该元素的外面）
$("#add").click(function () {console.log($("#parent").after("<li>我是添加的元素</li>"));
})
4、before() 之前插入 （该元素的外面）
$("#add").click(function () {console.log($("#parent").before("<li>我是添加的元素</li>"));
})
5、remove() 删除元素 （包括自己）
- 删除自己和自己的子元素
- 删除以后不占位置
$("#add").click(function () {console.log($("#parent").remove());
})
6、empty() 删除元素（自己本身不删除）
- 删除自己的子元素
- 自己本身不删除
$("#add").click(function () {console.log($("#parent").empty());
})//parent不删除 里面的都删除
