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 ...
随机推荐
- leetcode-easy-listnode-21 merge two sorted lists
mycode 一定要记得创建两个头哦,一个找路,一个找家 # Definition for singly-linked list. # class ListNode(object): # def __ ...
- leetcode 94二叉树的中序遍历
递归算法C++代码: /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; ...
- MVC1:.Net MVC Cotroller向View传值
下面介绍 ASP .Net MVC中 Cotroller 向 View 传值 的4中方式: ViewBag,ViewData,TempData,Model. (注:参数可根据需要为复杂类型,只需在应用 ...
- PythonScript_demo--搭建PXE服务器
前言 是一个测试向的Demo,在实验环境中改改还是可以用的,有助理解PXE服务器的原理.可以结合PXE服务器原理细节来看,传送门:点这里 软件环境 系统 RHEL7 软件 Python 27 RHEL ...
- wpf passwordbox控件 光标移到最后
/// <summary> /// 设置光标位置 /// </summary> /// <param name="passwordBox">&l ...
- asp.net mvc model attribute and razor and form and jquery validate 完美结合
1.创建Model,添加标注. [Serializable] public class BaseUserModel:BaseModel { [StringLength(100)] [Required( ...
- Sqlserver实现故障转移 — 域控（1）
一 .实现目的:实现两台sqlserver数据库服务器的实时备份及故障转移:即:其中一台数据库服务器宕机后,应用程序可自动连接到另一台数据库服务器继续运行. 二.域控:域控制器是指在“域”模式下,至 ...
- HTML DOM Document对象 元素对象 属性对象 事件对象
DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...
- KinectFusion 介绍
原文链接 KinectFusion简介 KinectFusion是微软在2011年发表的一篇论文里提到的点云重建的方法,论文题目是:KinectFusion: Real-Time Dense Surf ...
- 1.2.2 OSI参考模型 下
[今天打酱油了,纯抄书.OSI太重要,不敢随便乱写.] 一.开放系统互联参考模型 答:20世纪80年代初,ISO提出来著名的开放系统互联参考模型[Open Systems Interconnectio ...