江苏龙网

  1. 主页 > 生活百科 > >

jQuery知识整理( 三 )

JQuery

  • 总结： 1.html函数和val函数取值都只取匹配到的第一个元素的值，text获取所有匹配元素的值 2.设置时都是统一设置，都是覆盖操作 3.html函数可以识别html代码进行格式化 4.html和text函数只对非表单元素有效，val只对表单元素有效 5.button标签设置的按钮操作按钮文字使用text或者html函数 6.input标签设置的按钮操作按钮文字使用val
jQuery操作尺寸 函数名
描述
备注
height()
获取/设置元素的高度
给参数(数值，不带单位，默认px)则设置，否则获取 。
width()
获取/设置元素的宽度
给参数则设置否则获取，得到的是内容的宽度，不包括内外边距和边框
innerHeight()
获取元素的高度
包含内边距的高度
innerWidth()
获取元素的宽度
包含内边距的宽度
outerHeight()
获取元素的高度
包含内边距和边框的高度
outerWidth()
获取元素的宽度
包含内边距和边框的宽度
outerHeight(true)
获取元素的高度
包含了外边距、边框和内边距的高度
outerWidth(true)
获取元素的宽度
包含了外边距、边框和内边距的宽度
jQuery操作位置 函数名
描述
备注
scrollTop()
获取滚动条滚动的高度
一般使用$(window).scrollTop()获取网页滚动条
scrollLeft()
获取滚动条向右滚动的距离
目前一般不使用
offset()
获取元素距离文档顶部的位置
返回值如下:{top:100,left:200}
postion()
获取定位元素距离有定位的父级元素的位置 如果所有父级都没有定位，则返回距离浏览器内容左上角的顶点
返回值如下:{top:200,left:100}
  • 获取滚动条高度使用$(window).scrollTop()来获取，设置时应该使用html或body标签来设置
$("html,body").animate({scrollTo:0},1000);jQuery事件事件注册和移除
  • 事件名函数方式：只能绑定HTML支持的原生事件
  • bind绑定：1.7以前版本的绑定方式，目前最新版也能用，但是不推荐 。
  • on绑定：1.7以后开始推荐使用的方式 绑定事件代码演示
//函数名方式绑定$("#box").click(function(){console.log("函数名方式绑定");});//bind方式绑定$("#box").bind("click",function(){console.log("bind方式绑定");});//on方式绑定$("#box").on("click",function(){console.log("on方式绑定");});//on或者bind一次绑定多个事件$("#box").on("click mouseover mouserout",function(){console.log("一次绑定多个事件");});移除事件代码演示
//unbind函数移除事件$("#box").unbind("click");//off函数移除事件$("#box").off("click");//off或者unbind移除多个事件$("#box").off("click mouseout");主动触发事件//通过JS代码来触发box的单击事件$("#box").trigger("click");事件对象
jQuery的事件对象必须通过事件触发的函数传递参数的方式来使用，没有兼容问题
  • 常用事件属性如下属性说明screenX和screenY基于屏幕左上角的X轴坐标和Y轴坐标clientX和clientY基于浏览器内容左上角的X轴坐标和Y轴坐标，忽略滚动条pageX和pageY基于页面内容左上角的X轴坐标和Y轴坐标，计算滚动条keyCode键盘码stopPropagation()阻止事件冒泡preventDefault()阻止默认行为return false;阻止事件冒泡和默认行为
jQuery动画内置动画
  • 显示(show)和隐藏(hide)
  • 滑入(slideDown)和滑出(slideUp)和切换(slideToggle)
  • 淡入(fadeIn)和淡出(fadeOut)和切换(fadeToggle)
  • 变化到指定透明度：fadeTo
/** 内置动画的参数如下：* 1：number类型的毫秒数,默认都是400/string类型的单词表示normal普通速度(400),fast(600),slow(200)* 2：function类型的回调函数,表示在动画执行完毕自动执行的函数* */$("#show").click(function () {/*控制div显示*/$("#main").show("fast");});$("#hide").click(function () {/*控制div隐藏*/$("#main").hide("slow");});$("#sliderUp").click(function () {$("#main").slideUp();});$("#sliderDown").click(function () {$("#main").slideDown();});$("#toggleSlider").click(function () {$("#main").slideToggle(5000);});$("#fadeIn").click(function () {$("#main").fadeIn();});$("#fadeOut").click(function () {$("#main").fadeOut();});$("#toggleFade").click(function (){$("#main").fadeToggle(5000);});$("#fadeTo").click(function () {/** fadeTo参数如下：* 1.执行时间* 2.指定的透明度，可选值0-1之间，0表示完全透明，1表示不透明* 3.表示执行效果方式，可选值：swing表示缓动，是默认值 。或者是linear表示匀速* 4.动画执行完毕的回调函数* */$("#main").fadeTo(3000,.4,"swing",function () {console.log("透明度已经调整到40%");});});


推荐阅读


上一篇：Python 中的自然语言处理入门

下一篇：去中心化域名ENS为何突然爆火？