jQuery基础总结(三)
来源：互联网 发布：js如何获取父节点 编辑：程序博客网 时间：2024/04/30 18:32
1.1 复习jQuery操作DOM
选择器 基本选择器：#id 、.class 、element、* 、层级选择器： 空格、>、+、~ 基本过滤选择器：:first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even 筛选选择器：.eq(index)、.children()、.parent()、.siblings()、.find() 动画：show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle animate DOM操作：.css()、addClass(“className”)、removeClass()、toggleClass .attr()、removeAttr()、.val()、.html(“<p></p>”)、text() node.append(“<p>我是追加的内容</p>”)、prePend()1.2 元素操作
1.2.1 高度和宽度
$(“div”).height(); // 高度$(“div”).width(); // 宽度.height()方法和.css(“height”)的区别：1. 返回值不同，.height()方法返回的是 数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-1.11.1.min.js"></script> <script> jQuery(document).ready(function () { // 设置div的背景色 $("div").css("background-color","green"); // 设置高度 $("button").eq(0).click(function () { // css方式设置高度 //$("div").css("height","300px"); //$("div").height(300); $("div").height("300px"); }); // 获取高度 $("button").eq(1).click(function () { // 给div设置thml内容 $("div").html("div的高度是：" + $("div").height()); }); // 设置宽度 $("button").eq(2).click(function () { $("div").width(600); }); // 获取宽度 $("button").eq(3).click(function () { $("div").html("div的宽度是：" + $("div").width()); }); // 对比.css("height")和.height() $("button").eq(4).click(function () { console.log("height()方式获取的结果是：" + $("div").height()); console.log("height()方式获取的结果类型：" + typeof $("div").height()); console.log("css()方式获取的结果是：" + $("div").css("height")); console.log("css()方式获取的结果类型：" + typeof $("div").css("height")); /*$("div").html(); $("div").html();*/ }); }); </script></head><body> <button>设置高度</button> <button>获取高度</button> <button>设置宽度</button> <button>获取宽度</button> <button>对比CSS和height宽度</button> <div></div></body></html>
1.2.2 坐标值
$(“div”).offset(); // 获取或设置坐标值 设置值后变成相对定位 $(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { /*position: absolute;*/ top: 100px; left: 200px; width: 400px; height: 300px; background-color: #000000; } p { background: #666; position: absolute; top: 80px; left: 90px; } </style> <script src="../jquery-1.11.1.min.js"></script> <script> $(function () { // 获取offset坐标值 $("#btn1").click(function () { console.log("距离页面上部的距离：" + $("div").offset().top); console.log("距离页面左边的距离：" + $("div").offset().left); }); // 获取相对于父元素的位置 $("#btn2").click(function () { console.log("相对与父元素上部的距离：" + $("p").position().top); console.log("相对与父元素左边的距离：" + $("p").position().left); }); // 设置offset $("#btn3").click(function () { var txtTop = $("#txtTop").val(); var txtLeft = $("#txtLeft").val(); // 设置两个值：top和left /*$("div").offset({ top: txtTop, left: txtLeft });*/ $("div").offset({ left: txtLeft }); }); }); </script></head><body><button id="btn1">获取offset坐标值</button><button id="btn2">获取position坐标值</button><button id="btn3">设置position坐标值</button><label for="txtTop">top：</label><input type="text" id="txtTop"/><label for="txtLeft">left：</label><input type="text" id="txtLeft"/><div> <p>我是div的子元素p</p></div></body></html>1.2.3 滚动条（滚动事件）
$(“div”).scrollTop(); // 相对于滚动条顶部的偏移 $(“div”).scrolllLeft(); // 相对于滚动条左部的偏移
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { height: 300px; width: 300px; overflow: scroll; background: pink; } div p { height: 2000px; width: 2000px; } </style> <script src="../jquery-1.11.1.min.js"></script> <script> $(function () { // 获取 $("#btn").click(function () { // 获取scrollTop值 console.log($("div").scrollTop()); }); var i = 0; // 设置 $("#btn1").click(function () { i += 100; $("div").scrollTop(i); $("div").scrollLeft(i); }); }); </script></head><body> <button id="btn">获取滚动条位置</button> <button id="btn1">设置滚动条位置</button> <div> <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p> </div></body></html>
案例:防腾讯固定导航栏
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>防腾讯固定导航栏</title> <style type="text/css"> *{margin:0;padding:0;} .main{ width: 1000px; margin:0 auto; /*margin-top: 20px;*/ } </style> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function () { // 获取顶部 top 的高度值 var topHeight = $(".top").height(); // 监听浏览器的滚动事件 $(window).scroll(function () { var docScrollTop = $(document).scrollTop(); //console.log(docScrollTop); // 判断一下 docScrollTOp 和 topHeight两个大小 // 文档被卷去的高度 大于或等于 top高度的时候 // 让导航栏变成固定定位 if(docScrollTop >= topHeight) { $(".nav").css({ "position": "fixed", "top": 0 }); $(".main").css("margin-top" ,$(".nav").height()); } else { // 让固定导航栏变为默认状态 position: static $(".nav").css({ "position": "static" }); $(".main").css("margin-top" ,0); } }); }); </script></head><body><div class="top"> <img src="images/top.png" /></div><div class="nav"> <img src="images/nav.png" /></div><div class="main"> <img src="images/main.png" /></div></body></html>
案例:两侧跟随的广告
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .left, .right { position: absolute; top: 80px; } .left { left: 0; } .right { right: 0; } </style> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function () { $(window).scroll(function () { var docScrollTop = $(document).scrollTop(); //$(".main").css("top", docScrollTop + 80); $(".main").animate({"top" : docScrollTop + 80},30); }); }); </script></head><body><div class="left main"><img src="images/1.gif" alt=""/></div><div class="right main"><img src="images/2.gif" alt=""/></div><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p><p>我们的开始，是很长的电影</p></body></html>
1.3 jquery事件
1.3.1 绑定click/mouseenter/blur/keyup// 绑定事件bind：$node.bind(“click”,function(){});// 触发一次one : $node.one(“click”,function(){});delegate : $node.delegate(“p”,”click”,function(){});on： $node.on(“click”,”p”,function(){});1.3.2 解绑unbind、undelegate off1.3.3 触发click : $(“div”).click();trigger：触发事件，并且触发浏览器默认行为triggerHandler：不触发浏览器默认行为<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-1.11.1.min.js"></script> <script> $(function () { /*$("button").click(function () { alert("我是click事件"); }).mouseenter(function () { alert("我是click事件"); });*/ // bind 绑定两个事件 /*$("button").bind("click mouseenter", function () { alert("我是click事件"); });*/ // 绑定两个事件，分别处理不同的效果 /*$("button").bind({ "click": function () { alert("我是click事件"); }, "mouseenter": function () { alert("我是mouseenter事件"); } });*/ // 传递数据 /*$("button").bind("click",{ aa : true }, function (e) { alert(e.data.aa); });*/ // one // 只触发一次 /*$("button").one("click", function () { alert("我是one事件"); });*/ /*$("li").bind("click", function () { alert($(this).html()); });*/ // delegate绑定方式 /*$("ul").delegate("li","click", function () { alert($(this).html()); });*/ // on 强烈推荐使用 /*$("ul").on("click","li", function () { alert($(this).html()); });*/ /*$("div").on("click","h1", function () { alert($(this).html()); });*/ }); </script></head><body> <button>绑定两个事件</button> <div> <p>我是p元素</p> <h1>我是h1元素1</h1> <h1>我是h1元素2</h1> </div> <ul> <li>我是li1</li> <li>我是li2</li> <li>我是li3</li> <li>我是li4</li> <li>我是li5</li> <li>我是li6</li> <li>我是li7</li> <li>我是li8</li> <li>我是li9</li> <li>我是li10</li> </ul></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-1.11.1.min.js"></script> <script> $(function () { // 绑定事件 $("div").on("click mouseenter", "h1", function () { alert($(this).html()); }); $("div").off("click"); }); </script></head><body><button>绑定两个事件</button><div> <p>我是p元素</p> <h1>我是h1元素1</h1> <h1>我是h1元素2</h1></div><ul> <li>我是li1</li> <li>我是li2</li> <li>我是li3</li> <li>我是li4</li> <li>我是li5</li> <li>我是li6</li> <li>我是li7</li> <li>我是li8</li> <li>我是li9</li> <li>我是li10</li></ul></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-1.11.1.min.js"></script> <script> $(function () { /*$("form").on("click","#btnSub", function () { var txtName = $("#txtName").val(); if(txtName === "1") { alert("提交成功"); } else { $("#txtName").val("").triggerHandler("focus"); } });*/ $("#btnSub").click(function () { var txtName = $("#txtName").val(); if(txtName === "1") { alert("提交成功"); } else { $("#txtName").val("").triggerHandler("focus"); } }); // $("#btnTrrigerHanlder").bind("click", function () { //$("#btnSub").trigger("click"); $("#btnSub").triggerHandler("click"); }); }); </script></head><body><form action=""> <label for="txtName">用户名</label><input type="text" id="txtName"/> <input type="submit" value="提交" id="btnSub"/> <input type="button" value="触发提交" id="btnTrrigerHanlder"/></form></body></html>鼠标跟随案例:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> img { position: absolute; } </style> <script src="jquery-1.11.1.min.js"></script> <script> $(function () { $(document).on("mousemove", function (e) { $("img").css({ "position": "absolute", "top": e.pageY, "left": e.pageX }); }); }); </script></head><body><img src="img/ts.gif" alt=""/></body></html>1.4 jQuery事件对象介绍
event.data //传递的额外事件响应方法的额外参数
event.currentTarget === this //在事件响应方法中等同于this，当前Dom对象
event.target //事件触发源，不一定===this
event.pageX //The mouse position relative to the left edge of the document
event.pageY
event.stopPropagation()//阻止事件冒泡
e.preventDefault(); //阻止默认行为
event.type //事件类型：click，dbclick…
- event.which //鼠标的按键类型：左1 中2 右3
- keydown : a,b,c
- event.keyCode// code的c是大写
案例：07图片跟随案例.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件对象案例</title> <style> .box { height: 200px; width: 400px; background-color: teal; } </style> <script src="jquery-1.11.3.min.js"></script> <script> jQuery(document).ready(function($) { $(".link").on("click", function(e){ //取消默认操作 e.preventDefault(); //阻止事件冒泡 // e.stopPropagation(); console.log(e.type); });//jQuery 1.7 以上 $(".box").on("click",function(e){ console.log("div 事件响应方法执行"); // alert("父div盒子被点击了"); //怎么实现 ： 当前用户点击的是a标签，还是我自己div呢？ if(e.target === this) { console.log("你点击的div"); } }); $(window).click(function(event) { console.log(event.which); }).keydown(function(event) { //输出键盘字母的编码 console.log(event.keyCode); }); }); </script></head><body> <div class="box"> <a class="link" href="http://web.itcast.cn">传智前端学院</a> </div></body></html>阅读全文
0 0
- jQuery基础总结(三)
- jquery基础（三）
- jquery基础三 事件
- jQuery基础(三、事件)
- jQuery总结（三）
- jQuery技巧总结 三
- jquery总结（三）
- jQuery学习总结三
- jQuery基础总结
- jQuery基础总结
- jQuery基础总结
- jQuery基础学习总结
- JQuery基础学习总结
- jquery基础总结一
- jquery基础总结
- JQuery基础总结
- Jquery基础总结
- jQuery基础总结
- 5步让你入门MongoDB!
- 14.UE4的鼠标视角控制和鼠标拾取
- 杭师计协vj水题
- 满二叉树 与完全二叉树的区别
- 互相关与卷积关系
- jQuery基础总结(三)
- 第一篇博客
- 数据链路层——局域网扩展
- 不忘初心，继续前进
- QLabel和QTimer之滚动字幕完善
- [博客搬迁]本博客搬迁至Hexo独立博客+Coding Pages
- mvc 利用form表单文件上传
- 简单bfs集锦
- Android视频播放器
