营销型网站建设方面的书,石家庄建设学校,wordpress页面不要侧边栏,制作影视视频的软件一、事件机制
1、事件源.事件类型(事件处理程序)
$(this)中的this不能加引号
$(#box).click(function () {$(this).css(background-color,blue)//点击颜色变为蓝色
})2、事件源.on/bind(事件类型#xff0c;事件处理程序)
$(#box).on(dbclick,function () {$(…一、事件机制
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($(ulli));$(ulli).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 typetext iduser 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 classtext name_1proName我是盒子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不删除 里面的都删除
