vs2019怎么创建网站,企业网址格式,汕头网站制作网站,襄阳网站建设营销1、位置属性 jquery的css position获取匹配元素相对父元素的偏移位置#xff1b;offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性#xff1a;top 和 left $(p).offset()
$(div).offset().top
$(p).offset().left scrollTop获取匹… 1、位置属性 jquery的css position获取匹配元素相对父元素的偏移位置offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性top 和 left $(p).offset()
$(div).offset().top
$(p).offset().left scrollTop获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值scrollLeft获取匹配元素相对滚动条左侧的偏移文档被卷起的像素值 //获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
$(document).scrollTop()
$(document).scrollLeft()//监听文档滚动的jquery方法
$(document).scroll(function(){console.log($(document).scrollTop())console.log($(document).scrollLeft())}) innerHeight获取第一个匹配元素内部区域高度包括补白、不包括边框 $(#box).innerHeight() innerWidth获取第一个匹配元素内部区域宽度包括补白、不包括边框 $(#box).innerWeight() outerHeight获取第一个匹配元素外部高度默认包括补白和边框 $(#box).outerHeidth() outerWeight获取第一个匹配元素外部宽度默认包括补白和边框 $(#box).outerWeidth() weight取得匹配元素当前计算的宽度值 //获取值
$(p).width()//设置值
$(p).width(200) height取得匹配元素当前计算的高度值 //获取值
$(p).height()
//设置值
$(p).Height(200 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css*{padding: 0;margin: 0;}#box{position: relative;width: 200px;height: 200px;border: 1px solid red;padding: 10px 5px;}p{position: absolute;left:30px;top: 30px} /*父相子绝*//style/headbody styleheight: 2000px; width: 2000px; //内嵌样式肯定比上边的优先级高给height、width是为了有滚动条div idboxp我是一个段落标签/p/divbutton idbtn动画吧/buttondiv stylewidth: 200px;height: 200px;margin: 100px auto;border: 1px solid deepskyblue;/div/bodyscript srcjquery-3.2.1.js/scriptscript typetext/javascript$(function(){//1.获取匹配元素的相对父元素的偏移 positionconsole.log($(p).position().left); //30console.log($(p).position().top); //30var offsetTop $(p).position().top 50 px;$(#btn).click(function(){ $(p).animate({top:offsetTop},1000); //执行一个动画效果})//2.获取匹配元素 相对滚动条卷起的位置信息 scrollTop scrollLeft
// console.log($(document).scrollLeft());
// console.log($(document).scrollTop());$(document).scroll(function(){ //调用scroll方法console.log($(document).scrollLeft());console.log($(document).scrollTop());})//3.offset 获取匹配元素在当前视口的相对偏移 相对于浏览器左上角console.log($(#box).offset());console.log($(p).offset().top); //边框有1console.log($(p).offset().left);console.log($(#btn).offset().top);//4.获取元素的宽高console.log(宽$(#box).width());console.log(高$(#box).height());//设置宽高$(#box).width(400);//innerWidth获取内部区域宽度 / outerWidth获取外部区域宽度//获取 width 2*padding 不包括边框 获取匹配元素的内部宽度console.log($(#box).innerWidth()); //410// width 2*padding 2*border 获取匹配元素的外部宽度console.log($(#box).outerWidth()) //412}) /script
/html 获取偏移量相当于父级用的是position相当于浏览器用的是offset获取滚动条卷起的位置用的是scrollTop和scrollLeft innerWidth是不包括边框的outerWidth是包括所有的。 防淘宝导航栏案例 淘宝滚动监听 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css*{padding: 0;margin: 0;}div{width: 100%;}div img{width: 100%; /*每个div img都填充满父级100%*/}.nav{display: none;}/style/headbodydiv classtopimg srcimages/top.jpg alt //divdiv classnavimg srcimages/nav.jpg//divdiv class taobaoimg srcimages/taobao1.png//divscript src../jquery-3.2.1.js/scriptscript typetext/javascript$(function(){var h $(.top).height(); //先获取top盒子的高度如果盒子有边框计算的时就不是height了而是outerWidth
$(document).scroll(function(){var scollTp $(document).scrollTop(); //scrollTop 文档卷起的值值时时在变大if(hscollTp){$(.nav).css({display:block,position:fixed,top:0});}else{$(.nav).css({display:none,position:static,top:0});}})})/script/body
/html 2、jquery筛选方法 !DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle typetext/cssli.active{font-size: 40px;}/style
/head
bodyulli classdanger1/lili2/lili classdanger3/lili4/lia href#百度/aa href# idanchor百度/a/ul
/body
script src../jquery-3.2.1.js/script
script typetext/javascript$(function () {console.log($(li)); // 4个//jquery遍历方法.each()$(ul).children().each(function (index,ele) { // $(li) 就等于 $(ul).children();index是索引ele是元素 dom对象。console.log(ele);console.log(index);var isDanger $(this).hasClass(danger); //检查当前元素是否含有某个类如果有则返回trueif (isDanger){$(this).css(color,red);} else {// $(this).css(font-size,20px);}})console.log($(ul).children(.danger)) //取得一个包含匹配的元素集合中每一个元素的所有子集合的元素集合。console.log($(li))console.log($(a).parent()); //获取的是li父标签一级
console.log($(li).last().prev()); //last是li标签的最后一个元素它是最后一个标签的前一个同类元素;li.dangerconsole.log($(li).last().prevAll()); //最后一个元素的所有元素;是一个数组找的索引是从下往上去找的//siblingsconsole.log($(#anchor).siblings(a)) //匹配元素同胞之间选择 siblings(a)指同胞间的所有的a标签$(li).hover(function () {$(this).addClass(active).siblings(li).removeClass(active);})})/script/html 遍历 案例1-选项卡嵌套 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title style typetext/css*{padding: 0;margin: 0;}ul{list-style: none;}/*清除浮动产生的问题*/#box:after{content: ;display: block;clear: both;}#box{width: 800px;border: 1px solid black;margin: 20px auto;background: blue;}#leftBox{width: 200px;float: left;}#leftBox li{width: 200px;height: 89px;background: red;margin-bottom: 2px;color: white;font: 50px/89px 黑体; text-align: center;}#rightBox div{display: none;float: left; width: 600px;}#rightBox p{width:100%;height: 325px;font: 100px/325px 黑体;text-align: center;background: greenyellow }/*父元素设置displaytable使它成为一个块级表格元素* 子元素设置displaytable-cell使子元素成为表格单元格就好比是在表格中一样*/#rightBox ul{width: 600px;display: table;}#rightBox li{display: table-cell;background: purple;height: 40px;border-right: 2px solid blue;font: 30px/40px 黑体;text-align: center;color: white;}#leftBox .active{background: yellow;color: black;}#rightBox .active{background: white;color: black;}/style/headbodydiv idboxul idleftBoxlia/lilib/lilic/lilid/li/uldiv idrightBoxdiv styledisplay: blockpa1/pulli classactivea1/lilia2/lilia3/lilia4/li/ul/divdivpb1/pulli classactiveb1/lilib2/lilib3/lilib4/li/ul/divdivpc1/pulli classactivec1/lilic2/lilic3/lilic4/lilic5/lilic6/li/ul/divdivpd1/pulli classactived1/lilid2/lilid3/lilid4/li/ul/div/div/div/bodyscript srcjquery-3.2.1.js/scriptscript typetext/javascript$(function(){//鼠标移入的时候$(#leftBox li).mouseover(function(){//修改自己的样式$(this).addClass(active).siblings(li).removeClass(active);//修改右边的divconsole.log($(this).index())$(#rightBox div).eq($(this).index()).show().siblings(div).hide();})$(#rightBox li).click(function(){$(this).addClass(active).siblings(li).removeClass(active);var liValue $(this).html();$(this).parent().prev().html(liValue);})})/script
/html 案例2小米官网 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle typetext/css*{padding: 0;margin: 0;}ul{list-style: none;}.wrap{width: 980px;height: 612px;margin: 20px auto 0px;background: #f4f3f4;border: 1px solid gray;}ul li{float: left;margin-left: 10px;position: relative;overflow: hidden; /*超出部分隐藏*/width: 233px;height: 300px;}ul li p{width: 233px;height: 100px;background: rgba(245,102,51,.7);position: absolute;bottom: -100px;text-align: center;color: white;line-height: 100px;}/style/head
bodydiv classwrapullia href#img srcimages/xiaomi_01.png/ /ap百度一下你就知道了/p /lilia href#img srcimages/xiaomi_02.png//ap百度一下你就知道/p/lilia href#img srcimages/xiaomi_03.png//ap百度一下你就知道/p/lilia href#img srcimages/xiaomi_04.png//ap百度一下你就知道/p/lilia href#img srcimages/xiaomi_05.png//ap百度一下你就知道/p/lilia href#img srcimages/xiaomi_07.png//ap百度一下你就知道/p/lilia href#img srcimages/xiaomi_08.png//ap百度一下你就知道/p/lilia href#img srcimages/xiaomi_09.png//ap百度一下你就知道/p/span/li/ul/div
/body
script src../jquery-3.2.1.js/script
script typetext/javascript//mouseenter进入 mouseleave 离开$(.wrap li).hover(function () {$(this).children(p).stop(true).animate({bottom:0},100); //移进去的时候先让它停一下
},function () {$(this).children(p).stop(true).animate({bottom:-100},100);})/script
/html 案例3-焦点轮播图 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css*{padding: 0;margin: 0;}ul,ol{list-style: none;}#wrap{width: 650px;height: 250px;margin: 100px auto 0;background: red;overflow: hidden;position: relative;}/*#wrap img{display: block;}*/#wrap ul{height: 250px;position: relative;z-index: 1;}#wrap ol{height: 30px;position: absolute;z-index: 2;bottom: 0;right: 0;}#wrapulli{position: absolute;top:0;left: 0;}#wrapolli{float: left;width: 20px;height: 20px;text-align: center;line-height: 20px;border: 1px solid white;background: gray;margin-right: 5px;}#wrapolli:hover{/*设置鼠标形状*/cursor: pointer;}#wrap li.active{padding: 2px;color: orange;margin-top: -4px;border: 1px solid orange;} /style/headbodydiv idwrapul!--设置绝对定位之后 脱离标准流 最后一个盒子层级提升了--li stylez-index: 1;a href#img src./images/01.jpg//a/lilia href#img src./images/02.jpg//a/lilia href#img src./images/03.jpg//a/lilia href#img src./images/04.jpg//a/lilia href#img src./images/05.jpg//a/li /ulolli classactive1/lili2/lili3/lili4/lili5/li/ol/div/bodyscript srchttp://libs.baidu.com/jquery/2.0.0/jquery.min.js/scriptscript typetext/javascript$(function(){//控制层级关系的索引var index 0;$(#wrapolli).mouseenter(function(){index; //鼠标移进去的时候//修改下标的class$(this).addClass(active).siblings(li).removeClass(active);//选中哪个给它加一个activesiblings取到每个li同胞元素removeclass//修改图片 原理是用了一种层级关系让它漂起来滑的是ol下的li要选取ul下的li$(#wrapulli).eq($(this).index()).css({left:650,z-index:index}).animate({ //取到索引然后调整它的css把想修改的层级关系给它提上来left:0 //改它的绝对定位left值},1000)})})/script
/html 3、事件流 事件的概念 HTML中与javascript交互是通过事件驱动来实现的例如鼠标点击事件、页面的滚动事件onscroll等等可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的就需要了解一下“事件流”的概念。 什么是事件流 事件流描述的是从页面中接收事件的顺序 1、DOM事件流 “DOM2级事件”规定的事件流包括三个阶段 ① 事件捕获阶段 ② 处于目标阶段 ③ 事件冒泡阶段。 !DOCTYPE html
html langen
headmeta charsetUTF-8title事件流/titlescriptwindow.onload function(){var oBtn document.getElementById(btn); //取到dom元素oBtn
oBtn.addEventListener(click,function(){ //调用监听器的一个方法第一个参数事件名称第二个参数是回调函数console.log(btn处于事件捕获阶段); //4}, true);oBtn.addEventListener(click,function(){console.log(btn处于事件冒泡阶段); //5}, false);document.addEventListener(click,function(){ //给文档加一个事件console.log(document处于事件捕获阶段); //1}, true);document.addEventListener(click,function(){ console.log(document处于事件冒泡阶段); //8}, false);document.documentElement.addEventListener(click,function(){console.log(html处于事件捕获阶段); //2}, true);document.documentElement.addEventListener(click,function(){console.log(html处于事件冒泡阶段); //7}, false);document.body.addEventListener(click,function(){console.log(body处于事件捕获阶段); //3}, true);document.body.addEventListener(click,function(){console.log(body处于事件冒泡阶段); //6}, false);};/script
/head
body
a hrefjavascript:; idbtn按钮/a //阻止a标签的默认事件,点击btn的时候会触发一个click事件
/body
/html 1、addEventListener addEventListener 是DOM2 级事件新增的指定事件处理程序的操作这个方法接收3个参数要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true表示在捕获阶段调用事件处理程序如果是false表示在冒泡阶段调用事件处理程序。 2、document、documentElement和document.body三者之间的关系 document代表的是整个html页面 document.documentElement代表的是html标签 document.body代表的是body标签 接着我们就来聊聊上面的例子中输出的结果为什么是这样 在标准的“DOM2级事件”中规定事件流首先是经过事件捕获阶段接着是处于目标阶段最后是事件冒泡阶段。这里可以画个图示意一下: 首先在事件捕获过程中document对象首先接收到click事件然后事件沿着DOM树依次向下一直传播到事件的实际目标就是id为btn的a标签。 接着在事件冒泡过程中事件开始时由最具体的元素a标签接收然后逐级向上传播到较为不具体的节点document。 需要注意的点由于老版本的浏览器不支持事件捕获因此在实际开发中需要使用事件冒泡在由特殊需要时再使用事件捕获。 补充 1、IE中的事件流只支持“事件冒泡”但是版本到了IE9以后实现了“DOM2级事件”也就是说IE9以后也可以在捕获阶段对元素进行相应的操作。 2、在DOM事件流中实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发并在事件处理中被看成“冒泡阶段”的一部分。然后“冒泡阶段”发生事件又传播回文档。 从父级到子级一层层冒泡 jquery的常用事件 jquery只有事件冒泡不支持事件捕获。 事件对象和冒泡 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#box{width: 200px;height: 200px;background: gray;}p{width: 100px;height: 100px;background: red;}/style/headbodydiv idboxp classp1/pa hrefhttps://www.luffycity.comluffy/a/div/bodyscript srcjquery-3.2.1.js/scriptscript typetext/javascript// 入口函数事件$(function(){//事件对象$(.p1).click(function(ev){//事件类型 事件属性console.log(ev.type);console.log(ev.target);console.log(ev.pageX);console.log(ev.pageY);alert(当前按钮事件触发了)//常用的事件方法 1.阻止事件冒泡 2.阻止默认事件//1.阻止事件冒泡ev.stopPropagation();})$(#box).click(function(){alert(#box盒子事件触发了)})$(a).click(function(ev){//阻止a标签的默认事件
// ev.preventDefault()
// ev.stopPropagation();alert(哈哈哈哈);return false;})})/script/html 事件绑定和移除、触发自定义事件 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#box{width: 200px;height: 200px;background: red;}/style/headbodydiv idbox/div button按钮/button/bodyscript srcjquery-3.2.1.js/scriptscript typetext/javascript$(function(){//事件的绑定// $(#box).click(fn)//给当前的dom元素绑定事件//语法jquery对象.bind(事件类型fn)
// $(#box).bind(click mouseenter,function(){ //添加多个事件做同样的事情click事件和mouseenter事件、回调函数;类似k value这样子的
// alert(事件被绑定了);
// })
// //function add(){console.log(click);}function add2(){console.log(over);}$(#box).bind({click:add,mouseover:add2})//事件移除 如果没有参数 表示移除所有事件setTimeout(function(){
// $(#box).unbind()
$(#box).unbind(click,function(){ //移除完事件之后还可以加参数alert(111);});},3000)//添加的事件不能发生在未来》动态生成的元素不能直接添加对象 里面的事件不能发生了 事件代理$(body).append(div stylewidth: 200px;height: 300px;background: yellow哈哈哈哈/div)//补充内容绑定自定义的事件$(button).bind(myClick,function(ev,a,b,c){alert(111); alert(a);alert(b);})//触发自定义的事件$(button).trigger(myClick,[1,2,3])//有几个参数就传几个值
})/script/html 自定义事情和代理事件 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyulli classluffy路飞/lili路飞/lili路飞/li/ul/bodyscript srcjquery-3.2.1.js/scriptscript typetext/javascript$(document).ready(function(){//先点击
// $(ulli).bind(click,function(){
// console.log($(this));
// })
// $(ulli).click(function(){
// console.log($(this));
// })//事件代理 自己完成不了当前的点击事件交给父级元素来做这件事件//父级.on(事件名字点击当前的标签元素fn)//$(ul).on(click,#namei,.luffy,function()...//绑定多个选择器使用这个方法$(ul).on(click,li,function(){ //前边父级后边是点击当前的事件标签 console.log(this);})//后来 添加的元素$(ul).append(li娜美/li) //换成a标签试试 //$(ul).append(a idnamei娜美/a) //})/script
/html 鼠标事件 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css*{padding: 0;margin: 0;}#box{width: 200px;height: 200px;background: gray;}#child{width: 100px;height: 100px;background: yellow;}/style/headbodydiv idboxdiv idchild/divinput typetext value123 /br /input typepassword value //div/bodyscript srcjquery-3.2.1.js/scriptscript typetext/javascript$(document).ready(function(){//点击事件/*$(#box).click(function(){console.log(click)})//双击事件$(#box).dblclick(function(){console.log(dbclick)})*//*//鼠标按下不松开$(#box).mousedown(function(){ //对应的是mouseupconsole.log(mousedown);})//鼠标松开$(#box).mouseup(function(){console.log(mouseup);})*/// 被选元素和子元素被选中时 会触发函数 移入和移出/* 先移动父盒子上-mouseover再移到子盒子上-mouseout从父盒子移开、mouseover移到子盒子子元素会触发离开out再over再出来out$(#box).mouseover(function(){console.log(mouseover);})$(#box).mouseout(function(){console.log(mouseout);})*//*//只有被选元素移入的时候才会触发进入、离开 移到父盒子上-mouseenter、到子盒子上没有变化从父盒子移开mouseleave$(#box).mouseenter(function(){console.log(mouseenter);})$(#box).mouseleave(function(){console.log(mouseleave);})*//*$(#box).mousemove(function(){console.log(mousemove);})*//*获取焦点$(input[typetext]).focus(function(){console.log($(this).val()) //form表单获取值用val})$(input[typetext]).blur(function(){console.log($(this).val())})*/$(input[typepassword]).keydown(function(e){ //键盘按下console.log(e.keyCode);if(e.keyCode 13){console.log(enter被按下了)}// console.log($(this).val())})$(input[typepassword]).keyup(function(){ //键盘弹起console.log($(this).val())})})/script
/html 表单事件 !DOCTYPE html
html
headmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedgetitlePage Title/titlemeta nameviewport contentwidthdevice-width, initial-scale1style.show{color: red;}/style/head
bodyform actionhttps://www.luffycity.comselect namesweets id multipleoption value巧克力/optionoption value selected糖果/optionoption value焦糖/optionoption value selected曲奇饼/optionoption value烧饼/optionoption value麦香饼/optionoption value曲奇饼2/option /selectinput typetext valuehello idtargetinput typesubmit valueLuffy/input typebutton name id value按钮 //forminput idother typetext valueTrigger the handlerdiv classshow/divscript src./jquery-3.2.1.min.js/scriptscript$(function() {//change()s事件//此事件仅限于input元素 textarea select$(select).change(function(){console.log($(select option:selected).text());$(.show).text($(select option:selected).text());})// select() 仅限于用在 input typetext textarea$(#other).select(function(){console.log($(this).val());})$(form).submit(function(e){
// //阻止默认事件e.preventDefault();//跟服务端有很大挂钩 下节课 咱们简单的来玩一下ajax技术alert(1111);})})/script/body
/html 4、jquery的Ajax技术 AJAX 异步的javascript和XMLAsynchronous Javascript and XML 简言之在不重载整个网页的情况下AJAX通过后台加载数据并在网页上进行显示。 通过 jQuery AJAX 方法您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodybutton idbtn演示/buttondiv idbox/div/bodyscript srcjquery-3.2.1.js/scriptscript typetext/javascript$(document).ready(function(){
// $(#btn).click(function(){
// //只传一个url导入的index.html文件含有多个传递参数类似于index/html?name张三
// $(#box).load(./test.html);
// })/*//get请求$.ajax({url:./data.json,type:get,
// dataType:json,success:function(data){console.log(data);},error:function(){}})*//*//注意post请求无法演示 马上学django 就可以演示了$.ajax({url:/course,type:post,data:{username:zhangsan,password:123},success:function(data){if(data.state ok data.status 200){//登录成功}},error:function(err){console.log(err);}})*/})/script
/html 转载于:https://www.cnblogs.com/shengyang17/p/9052999.html
