Juery入门2
1.Jquery操作文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div class="c1">
<p>pppp</p>
</div> <button id="btn1">add</button>
<script src="jquery-1.12.4.min.js"></script>
<script> //jquery文档处理
//内部插入
$("#btn1").click(function (){
//$(".c1").append("<h1>123</h1>");
var $ele=$("<h1>hello</h1>");
$ele.text("tang");
$ele.css("color","red");
//$(".c1").append($ele); 在元素的子元素后面添加元素
//$ele.appendTo(".c1"); //$(".c1").prepend($ele);//在元素的子元素前面添加元素 //$ele.prependTo($(".c1")) //外部插入
//$(".c1").after($ele);//兄弟标签向下插入
//$ele.insertAfter(".c1") // $(".c1").before($ele);兄弟标签向上插入
//$ele.insertBefore(".c1"); //替换
//$("p").replaceWith($ele) //删除与清空
//$(".c1").empty();//清空元素内容 //$(".c1").remove();//删除元素及元素内容 //clone 复制 var $c1=$(".c1").clone()
$(".c1").after($c1); }) //外部插入 </script>
</body>
</html>
2.clone属性使用
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> <div class="outer">
<div class="item">
<button onclick="add(this)">+</button>
<input type="text" name="">
</div>
</div> <script src="jquery-1.12.4.min.js"></script> <script type="text/javascript">
function add(self){
//var $clone_obj=$(".outer .item").clone();
var $clone_obj=$(self).parent().clone()//克隆父级item属性
$clone_obj.children("button").html("-").attr("onclick","del_obj(this)");//修改克隆父级属性下面的button内容以及添加事件
$(".outer").append($clone_obj);
} function del_obj(self){
$(self).parent().remove()
}
</script> </body>
</html>
3.Jquery模态对话框
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.content{
height: 1800px;
background-color: pink;
} .shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.5;
//opacity 透明度
} .model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px; /*height: 50%*/
} .hide{
display: none;
}
</style> </head>
<body> <div class="content">
<button onclick="func(this)">show</button> </div>
<div class="shade hide"></div>
<div class="model hide">
<button onclick="cancel(this)">show</button>
</div> <script src="jquery-1.12.4.min.js"></script>
<script>
function cancel(self) {
// $(self).parent().addClass("hide").prev().addClass("hide");
//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
$(self).parent().parent().children(".model,.shade").addClass("hide");
} function func(self) {
//siblings返回所有兄弟节点
$(self).parent().siblings().removeClass("hide");
// console.log(123) } </script>
</body>
</html>
4.Jquery事件操作
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="jquery-1.12.4.min.js"></script>
<script>
//页面加载完后再执行 事件准备就绪加载方式一
$(document).ready(function(){
$("ul li").html(5);
}) //事件准备就绪加载方式二
$(function(){ }) //window.onload=function(){} </script>
</head> <body> <ul> <li>111</li>
<li>222</li>
<li>333</li>
<li>444</li> </ul> <button>add</button>
<script src="jquery-1.12.4.min.js"></script>
<script> /*$("doucmunet").ready()*/
//$("ul li").html(5); // $("ul li").click(function(){
// alert("666");
// }) //当script元素集合绑定事件时必须要进行循环绑定
//jquery会帮我们自动循环绑定事件 //绑定事件
// $("ul li").bind("click",function(){
// alert(123)
//只针对当前元素里的内容进行绑定,不包括DOM添加的内容
// }) //on事件维托
// $("ul").on("click","li",function(){
// alert(123)
//只要是在本元素内的元素都可以进行绑定
// }) // $("button").click(function(){
// // var $ele="<li>555</li>"
// // $("ul").append($ele); // var $ele=$("<li></li>");
// var i=$("ul li").length
// $ele.html((i+1)*1111);
// $("ul").append($ele);
// }) //解绑事件
//$("ul li").unbind("click");
</script> </body>
</html>
5.JQuery--scrollTop方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0;
} .div2{
width: 100%;
height: 800px;
} .div1{
height: 150px;
width: 40%;
background-color: yellow;
overflow: auto;
} .div2{
background-color: green;
} .returnTop{
position: fixed;
right: 20px;
bottom: 20px;
width: 90px;
height: 50px;
background-color: gray;
color: white;
text-align: center;
line-height: 50px; } .hide{
display: none;
}
</style>
</head>
<body> <div class="div1">
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
</div>
<div class="div2">
<button onclick="returnTop()">return</button>
</div> <div class="returnTop hide" onclick="returnTop()">返回顶部</div> <script src="jquery-1.12.4.min.js"></script>
<script> window.onscroll=function () {
//监听垂直滚动条
// console.log($(window).scrollTop());
if($(window).scrollTop()>300){
$(".returnTop").removeClass("hide");
} else{
$(".returnTop").addClass("hide");
} } function returnTop(){
$(window).scrollTop(0)
//$(".div1").scrollTop(0);
} $(".div2 button").click(function(){
$(".div1").scrollTop(0)
}) </script>
</body>
</html>
6.Jquery-拓展
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>11</p>
<p>22</p>
<p>33</p> <script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// $.each(obj,function (argument) {
// // body... // }) // $("").each(function(){ // }) //添加自定义函数
//直接调用方法
// $.extend({
// Myprint:function(){
// alert("hello");
// }
// }) // $.Myprint(); //先加标签再调用方法
$.fn.extend({
GetText:function(){
// console.log(this)
// this再这里指的是调用对象的集合
// for (var i = 0;i<this.length;i++) {
// console.log(this[i].innerHTML)
// }
// }
// $.each($(this),function(x,y){
console.log($(y).innerHTML);
})
}
}) $("p").GetText()
</script>
</body>
</html>
7.Jquery-offset方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0;
} .div1,.div2{
width: 200px;
height: 100px;
} .div1{
border: 3px solid red;
padding: 20px;
background-color: yellow;
} .div2{
background-color: green;
position: relative;
left: 20px;
} .outer{
/*//position: relative;*/ }
</style>
</head>
<body> <div class="div1">22</div> <div class="outer"> <div class="div2"></div>
</div> <script src="jquery-1.12.4.min.js"></script>
<script> //css操作 //offset()相对于视口的偏移量
// console.log($(".div1").offset().top);
// console.log($(".div1").offset().left); // console.log($(".div2").offset().top);
// console.log($(".div2").offset().left); //position():相对于已经定位的父标签的偏移量
console.log($(".div1").position().top);
console.log($(".div1").position().left); console.log($(".div2").position().top);
console.log($(".div2").position().left); // console.log($(".div1").height("300px"))只包括元素内容区大小
// console.log($(".div1").width()) // console.log($(".div1").innerHeight())//包括padding的大小
// console.log($(".div1").innerWidth()) // console.log($(".div1").outerWidth())//包括padding，border的大小
// console.log($(".div1").outerHeight()) </script> </body>
</html>
8.JQuery动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ动画</title>
</head>
<body> <p>一段文章</p> <button id="hide">hide</button>
<button id="show">show</button> <script src="jquery-1.12.4.min.js"></script> <script>
// $("p").html("123")
//$("p").hide();//隐藏显示的元素
// $("p").show([s,[e],[fn]);显示隐藏的元素 // $("p").toggle() 如果元素是可见的，切换为隐藏的，如果元素是隐藏的，切换为可见的 /* speed
* 可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。
*
* $(selector).slideDown(speed,callback)
*
* 可选。slideDown 函数执行完之后，要执行的函数。
如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。
除非设置了 speed 参数，否则不能设置该参数。
*
* */ $("#hide").click(function () {
$("p").slideUp(1000)//向上滑动
}); $("#show").click(function () {
$("p").slideDown()//向下滑动
}) </script> </body>
</html>
Juery入门2的更多相关文章
- Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Oracle分析函数入门
一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- directshow播放摄像头卡死问题
最近遇到一个坑,directshow显示摄像头的时候,使用无窗口模式结果在浏览器插件里面界面卡死,但是控制台下面的句柄传过去却能正常播放 刚开始以为是调用的参数问题,琢磨了几天硬是搞不定,最后想到插件 ...
- Dart学习笔记-变量常量数据类型
变量和常量 1.变量的定义 main() { var t_str = 'hello world'; var t_num = 123456; String t_str2 = '你好,我很高兴'; int ...
- ATP检测 BAPI BAPI_MATERIAL_AVAILABILITY
*****ATP检测 DATA: END_RLT LIKE EBAN-LFDAT, NOT_AVAILABLE, AVAILABLE( ...
- Several ports (8005, 8080, 8009) required by Tomcat v8.5 Server at localhost are already in use.
Several ports (8005, 8080, 8009) required by Tomcat v8.5 Server at localhost are already in use. The ...
- Web04_JavaScript
String对象 match()找到一个或多个正则表达式的匹配 substr()从起始索引号提取字符串中指定数目的字符 substring()提取字符串中两个指定的索引号之间的字符 <!DOCT ...
- hibernate 事务处理
Hibernate的事务处理:事务:* 事务就是逻辑上的一组操作,要么全都成功,要么全都失败!!! 事务特性:* 原子性:事务一组操作不可分割.* 一致性:事务的执行前后,数据完整性要保持一致.* 隔 ...
- 【HANA系列】SAP ECLIPSE中创建ABAP项目的步骤
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP ECLIPSE中创建AB ...
- LeetCode.1047-重复删除字符串中的所有相邻重复项
这是小川的第389次更新,第419篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第251题(顺位题号是1047).给定一个小写字母的字符串S,重复删除两个相邻且相等的字母 ...
- python 生成器、三元表达式、列表推倒式、字典生成式、生成器表达式（总结）
1.生成器 def func(): yield g = func() next(g) x = yield 2.三元表达式 res = x if 条件 else y 3.列表推导式,字典生成式,生成器表 ...
- 使用自定义View
1 关于自定义的View的构造函数 java中对构造函数只是调用,不继承.因为整个UI是android系统提供的框架,因此构造函数需要写成它要求的格式,即和View的构造函数一样. 自定义的View中 ...