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 ...
随机推荐
- DAY 2模拟赛
DAY2 依旧是yyx出题 依旧毒瘤 滞空(jump/1s/64M) 题目描述: pyy在平面上第一象限内发现了顺序n个平台(她可以踩在这些平台上,但必须从第i-1号平台跳跃至i-1号平台),这些平台 ...
- CAN波特率设置
通过对CAN位定时寄存器CANBIT以及CAN波特率预分频扩展寄存器CANBRPE的设置可以得到需要的CAN通信波特率. CAN的位定时配置不当,将使得CAN模块无法按照目标波特率接入CAN网络,将导 ...
- [Flask]通过render_form快捷渲染表单
依赖: Bootstrap-Flask 实例化方式与flask_bootstrap相同. 关于render_form(): Bootstrap-Flask内置了两个用于渲染WTForms表单类的宏,r ...
- UI自动化关于图片验证码识别的解决方法
def __save_screenshot(self): self.driver.save_screenshot('full_snap.png') self.page_snap_obj = Image ...
- Linq之旅：Linq入门详解（Linq to Objects）(转)
http://www.cnblogs.com/heyuquan/p/Linq-to-Objects.html 示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细 ...
- No module named 'pip'
https://blog.csdn.net/wuyepiaoxue789/article/details/84033651 可以首先执行 python -m ensurepip 然后执行 pyth ...
- Oracle 无备份情况下的恢复--临时文件/在线重做日志/ORA-00205
13.5 恢复临时文件 临时文件没有也不应该备份.通过V$TEMPFILE可以找到所有的临时文件. 此类文件的损坏会造成需要使用临时表空间的命令执行失败,不至于造成实例崩溃或session中断.由于临 ...
- JavaScript 奇怪的代码
错误代码: var input = document.getElementsByTagName("input"); for (var i=0; i<input.length; ...
- datagrid——jQuery EasyUI
API文档:[http://www.jeasyui.com/documentation/datagrid.php] 一.创建datagrid 在页面上添加一个div或table标签,然后用jquery ...
- 【VS开发】VS2013多字节工程问题uilding an MFC project for a non-Unicode character set is deprecated
VS2013多字节工程问题 使用VS2013编译旧版VC++程序时,提示Building an MFC project for a non-Unicode character set is depre ...