一、事件机制
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或bind
mousedown: 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());
//
哈哈哈
都可以获取到$("#btn").on('click',function(){
$("#box").html("我是超链接")
})
2、text()设置或返回所选元素的内容
相当于innerText
console.log($('#box').text())//返回内容
$('#btn').bind('mouseover', function () {
$('#box').text('段落标签')//改变内容为段落标签
})
3、val()设置或返回表单字段的值
console.log($('#user').val())//返回 我是输入框的文本
$('#user').on({
click: function () {
$(this).val('web31')//点击以后 值变为 web31
}
})
4、attr()、prop()获取或者设置被选元素的属性，参数是属性名和属性值
区别1：
attr() 不仅可以获取和设置元素的本身属性和设置元素的自定义属性prop()只能设置元素的本身属性
区别2：
表单中的一些属性disabled/selected/checked用prop()
我是盒子box中的段落文本text
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 表单中的不能用attr
console.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("
})
2、prepend() 开头插入（选择的元素内部）
$("#add").click(function () {
console.log($("#parent").prepend("
})
3、after() 之后插入 （该元素的外面）
$("#add").click(function () {
console.log($("#parent").after("
})
4、before() 之前插入 （该元素的外面）
$("#add").click(function () {
console.log($("#parent").before("
})
5、remove() 删除元素 （包括自己）
删除自己和自己的子元素删除以后不占位置
$("#add").click(function () {
console.log($("#parent").remove());
})
6、empty() 删除元素（自己本身不删除）
删除自己的子元素自己本身不删除
$("#add").click(function () {
console.log($("#parent").empty());
})//parent不删除 里面的都删除
推荐阅读
您阅读本篇文章共花了：
发表评论