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 ...
随机推荐
- jquery 登录判断遇到的小问题
1.碰到的第一个问题是: 往body上加载check,用load不管用,可以用ready试试. 2.原来jquery里获取用的val(),我一直以为是value()... 尴尬 3.两个标志位是为了判 ...
- Linux高级调试与优化——进程管理和调度
进程管理 进程和文件是Linux操作系统的两个最基本的抽象. 进程是处于执行期的程序,进程不仅仅局限于一段可执行程序代码,通常还包含其他资源,如打开的文件.挂起的信号.内核内部数据.处理器状态.进程地 ...
- Uep的静态下拉和动态下拉建立
uep的静态下拉和动态下拉的建立极其省事,下面介绍静态下拉的建立 静态下拉 第一步:点击增加,输入信息 第二步: 第三步:保存 第四部: 静态下拉就建立完毕了 下面介绍动态下啦建立,动态下拉更简单 动 ...
- InputNumber计数器
InputNumber 计数器 仅允许输入标准的数字值,可定义范围 要使用它,只需要在el-input-number元素中使用v-model绑定变量即可,变量的初始值即为默认值. <templa ...
- Python_List对象内置方法详解
目录 目录 前言 软件环境 列表List 修改列表的元素 插入列表元素 extend 将序列中的元素迭代的附加到list中 insert 在指定的索引号中插入一个元素 删除列表元素 del 删除Lis ...
- Delphi中的Free和Nil和freeandnil函数
Delphi中的Free和Nil 在Delphi中释放对象资源时一般用Obj.Free(Obj为一个实例名),不过程Delphi中还有一个FreeAndNil(对象名)函数,那么用哪个好呢?Free和 ...
- 查询sq字段逗号分隔的方式
2,3,4 -- select * from t_qs_anlycomagingconfig twhere and ( to_char(','||t.valid_month||',') like '% ...
- java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）
1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...
- 关于Eclipse及JDK安装过程中的一些问题
一,环境变量的配置 1.配置CLASSPATH系统变量 CLASSPATH系统变量为类查找路径 ①.在使用javac进行编译时遇到import时候就会通过这个变量里面配置的路径去查找.如果配置的是目录 ...
- CentOS添加使用
在本机安装虚拟机,虚拟机安装CentSO.也可以装双系统,双系统问题更多 环境:win7 64 位 1.查看电脑是否可虚拟化(在百度查) 2.查看电脑是否打开虚拟机设置,如果没有,百度如何开启 打开虚 ...