DAY62 jQuery基础3
来源:互联网 发布:未闻花名网络歌手资源 编辑:程序博客网 时间:2024/05/26 14:09
文档节点处理
* 创建一个标签对象*
语法
$("<标签名>")
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='jquery-3.2.1.js'></script></head><body><div class="outer"></div><script> var $ele=$("<p>"); // <p></p> $ele.text("hello world"); // <p>hello world</p></script></body></html>创建节点示例
* 标签内部插入标签对象*
语法
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");$("").appendTo(content) ----->$("p").appendTo("div");$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");$("").prependTo(content) ----->$("p").prependTo("#foo");
注意:可以使用function添加内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='../day47/jquery-3.2.1.js'></script></head><body><div class="outer"> <p>abc</p></div><script> //内部插入 var $ele=$("<p>"); // <p></p> $ele.text("hello world"); // <p>hello world</p> // 追加到最后的位置 $(".outer").append($ele); // $ele.appendTo(".outer"); // 添加到最上面的位置 var $ele2=$("<p>") $ele2.text("thank you"); $(".outer").prepend($ele2); // $ele.prependTo(".outer")</script></body></html>内部插入示例
* 标签外部插入标签对象*
语法
$("").empty() //内容删除$("").remove([expr] //整个标签删除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='../day47/jquery-3.2.1.js'></script></head><body><div class="outer"> <p>abc</p></div><script> // 删除节点,连标签清除 // $(".outer").remove() // 清空节点,内容清除 $(".outer").empty();</script></body></html>删除节点示例
* 替换节点*
语法
$("").replaceWith(content|fn)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='../day47/jquery-3.2.1.js'></script></head><body><div class="outer"> <p>abc</p></div><script> // 替换节点 var $ele=$("<p>"); $ele.text("hello world"); $(".outer p").replaceWith($ele);</script></body></html>替换节点示例
* 拷贝节点*
语法
$("").clone([Even[,deepEven]])
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='../day47/jquery-3.2.1.js'></script></head><body><div class="outer"> <p>abc</p></div><script> // 拷贝节点 var $outer=$(".outer").clone(); $(".outer").after($outer)</script></body></html>拷贝节点示例
动画效果
* 显示与隐藏*
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='../day47/jquery-3.2.1.js'></script></head><body><p>hello world</p><img src="http://img1.imgtn.bdimg.com/it/u=1020860587,2909379450&fm=26&gp=0.jpg" alt=""><hr><button class="hides">hide</button><button class="shows">show</button><button class="toggle">toggle</button><script> //注意:不加时间试一试 //点击事件触发隐藏 $(".hides").click(function () { $("img").hide(1000) }); //点击事件触发显示 $(".shows").click(function () { $("img").show(1000) }); //点击事件触发显示和隐藏的切换 $(".toggle").click(function () { $("img").toggle(1000) })</script></body></html>显示与隐藏示例
* 滑动*
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='jquery-3.2.1.js'></script></head><body><p style="background-color: #2459a2;color: white;text-align: center;line-height: 40px">hello world</p><img src="http://img1.imgtn.bdimg.com/it/u=1020860587,2909379450&fm=26&gp=0.jpg" alt=""><hr><button class="slideUp">slideUp</button><button class="slideDown">slideDown</button><button class="slideToggle">slideToggle</button><script> //注:不加时间试一试 //向上滑动消失 $(".slideUp").click(function () { $("p").slideUp(1000); }); //向下滑动出现 $(".slideDown").click(function () { $("p").slideDown(1000) }); //向上向下切换 $(".slideToggle").click(function () { $("p").slideToggle(1000) })</script></body></html>滑动示例
* 淡入淡出*
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='jquery-3.2.1.js'></script></head><body><p style="background-color: #2459a2;color: white;text-align: center;line-height: 40px">hello world</p><img src="http://img1.imgtn.bdimg.com/it/u=1020860587,2909379450&fm=26&gp=0.jpg" alt=""><hr><button class="fadeIn">fadeIn</button><button class="fadeOut">fadeOut</button><button class="fadeToggle">fadeToggle</button><button class="fadeTo">fadeTo</button><script> //淡入 $(".fadeIn").click(function () { $("img").fadeIn(2000); }); //淡出 $(".fadeOut").click(function () { $("img").fadeOut(2000) }); //淡出淡入切换 $(".fadeToggle").click(function () { $("img").fadeToggle(1000) }) //淡出或淡入的程度 $(".fadeTo").click(function(){ $("img").fadeTo(1000,0.4); })</script></body></html>淡入和淡出示例
* 回调函数*
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src='../day47/jquery-3.2.1.js'></script></head><body><button>hide</button><p>hello world</p><script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) }) })</script></body></html>回调函数示例
CSS操作
* CSS位置操作*
语法
$("").offset([coordinates]) //元素移动,定位对象是整个页面,$("").position() //元素偏移(定位对象和offset不一样,是通过父亲标签定位)$("").scrollTop([val]) //上下滚动条的值$("").scrollLeft([val]) //左右滚动条的值
offset元素移动示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ width: 200px; height: 200px; background-color: yellowgreen; } .box2{ width: 200px; height: 200px; background-color: rebeccapurple; } </style> <script src='../day47/jquery-3.2.1.js'></script></head><body><div class="box1"></div><div class="box2"></div><button>change</button><script> //元素移动的是根据整个页面的距离实现的,通过改变元素的上侧、左侧和整个页面的上侧和左侧的距离改变 $("button").click(function () { //.box1向下移动200px $(".box1").offset({left:0,top:200}); //.box2向下移动400px,向右移动200px $(".box2").offset({left:200,top:400}); })</script></body></html>元素移动示例
position元素偏移
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ width: 200px; height: 200px; background-color: wheat; } .box2{ width: 200px; height: 200px; background-color: green; } .outer{ position: relative; } </style> <script src='../day47/jquery-3.2.1.js'></script></head><body><div class="box1"></div><div class="outer"> <div class="box2"></div></div><button>change</button><script> $("button").click(function () { alert("left"+$(".box1").position().left + "top" + $(".box1").position().top) alert("left"+$(".box2").position().left + "top" + $(".box2").position().top)</script></body></html>position示例
scrollTop滚动条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100%; height: 2000px; background-color: wheat; } #returnTop{ width: 70px; height: 40px; background-color: #2459a2; color: white; font-weight: 800; text-align: center; line-height: 40px; position: fixed; bottom: 20px; right: 20px; display: none; } </style> <script src='../day47/jquery-3.2.1.js'></script></head><body><div class="box"></div><div id="returnTop">TOP</div><script> //scroll事件,滚动进度条时候 $(window).scroll(function () { console.log($(window).scrollTop()); if($(window).scrollTop()>200){ $("#returnTop").show(); } else { $("#returnTop").hide(); } }); //scrollTop括号里加数字,表示将滚动条位置滚至数字像素,不加数字表示取值 $("#returnTop").click(function () { $(window).scrollTop(0) })</script></body></html>scrollTop示例
* 尺寸操作*
语法
$("").height([val|fn])$("").width([val|fn])$("").innerHeight()$("").innerWidth()$("").outerHeight([soptions])$("").outerWidth([options])
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; padding: 50px; border: 10px red solid; background-color: green; margin: 20px; } </style> <script src='../day47/jquery-3.2.1.js'></script></head><body><div class="box">DIV</div><script> console.log($(".box").height()); //内容区高度200 console.log($(".box").width()); //内容区宽度200 console.log($(".box").innerHeight()); //内容区+padding区高度300 console.log($(".box").innerWidth()); //内容区+padding区宽度300 console.log($(".box").outerHeight()); //内容区+padding区+border边框区高度 320 console.log($(".box").outerWidth()); //内容区+padding区+border边框区宽度 320 console.log($(".box").outerHeight(true)); ///内容区+padding区+border边框区宽度+margin区高度 320 console.log($(".box").outerWidth(true)); ///内容区+padding区+border边框区宽度+margin区高度 320</script></body></html>尺寸操作示例
阅读全文
1 0
- DAY62 jQuery基础3
- jQuery基础总结3
- jQuery基础(3)
- jQuery实用工具类--jQuery基础知识点(3)
- jQuery(3)__jQuery基础<事件>
- js关于propotype的一些事-------Day62
- 开始刷leetcode day62: Subsets II
- JQuery基础
- jquery基础
- jquery基础
- jQuery基础
- jquery基础
- jquery基础
- jquery 基础
- jquery基础
- jQuery基础
- jquery 基础
- Jquery 基础
- xml序列化
- 【HTML5学习笔记】27:CSS3前缀和新单位rem
- 密码学实践-读书笔记四五
- list,set,queue
- 基础的TCP socket 使用
- DAY62 jQuery基础3
- 剑指offer——从上往下打印二叉树
- Session
- 计网|实验三 VLAN的设计与实现
- NYOJ284
- 项目结构(.gitignore LICENSE README.md...)的了解
- 网络
- 剑指Offer [02] 替换空格
- (实用篇)PHP7.0新特性