51 jquery 节点操作和 bootstrapt
jquery 和 bootstrapt
1.jquery each 函数 1.each 循环方式一：
可循环对象: var arr =["alex","deng","wang"] 或 var dic ={"name":"deng","age":18}
$.each(可循环对象，function（index,value）{}) 2.each 循环方式二：
$("选择器").each(function(){})
例子： $("p").each(function () {
if ($(this).html()=="yuan"){
// return false // 类似break
return // 类似continue
}
//console.log(this.innerHTML); // this 当前循环的dom对象
console.log($(this).html()); // this 当前循环的dom对象
//$(this).html($(this).html()+"!") }) 3.节点操作
1.创建节点
$("<p>")
2.添加节点
$("父节点").append("<p></p>") //可以直接添加标签字符串
$("父节点").append($("<p>"))
3.删除节点
$("p").remove()
4.替换节点
$("旧节点").replaceWith("新节点") 5.克隆节点
$("p").clone()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<div class="box">
<div class="item">
<button>+</button><input type="text">
</div>
</div> <script>
$("button").click(function () {
var obj = $(this).parent().clone();
//box最后添加一个孩子，在把button中的按钮的加号改为—
$(".box").append(obj).children().last().children(":first").html("-").attr("class","rem");
});
$(".box").on("click",".rem",function () {
$(this).parent().remove();
}) </script> </body>
</html>
克隆节点事例
4.获取和设置query（input）对象的value值
1. $("input").val() //获取属性值
2. $("input").val("值") //设置属性值 $("td").html("<input type ='text'>") //可以直接 替换的作用，标签替换文本 便签《======》文本
5.轮播图中涉及的知识点：
1.定时器操作：
设置定时器 var ID = setIntval(GO_R,1000); //自动轮播的时候开启定时器
清除定时器 clearInval(ID) // 鼠标悬停在大框上时，清除定时器，移开时又开起定时器
该处用到 .hover 事件，接两个函数，第一个函数为鼠标在其上要进行的操作，第二个函数为鼠标移开时要进行的操作
// 停止定时器 .hover 事件 括号中接两个函数
$(".outer").hover(function(){},function(){}) $(".outer").hover(function () {
console.log(123);// 暂停定时器
clearInterval(ID)
},function () {
ID=setInterval(GO_R,2000);
}) 2. 淡入淡出 fadeIn(时间) ：淡入
fadeOut(时间)：淡出
$("li").stop():表示停下之前的操作，直接跳到当前的操作。主要是防止用户连续点击后，图片跳转不过来 $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);//淡入或淡出经过一秒完成
$(".num li").eq(index).addClass("active").siblings().removeClass("active") 3.$(this).index() 获取索引值，鼠标放在li小圈上，可以用
$(".num li").mouseover(function () {
console.log($(this).index());
$(".img li").eq($(this).index()).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
$(".num li").eq($(this).index()).addClass("active").siblings().removeClass("active")
index=$(this).index()
}) 二.bootstrapt
1.注意事项：
1. bootstrapt 是基于jquery的，所有在导入bootstrapt 文件时，需要先导入jquery
2.bootstrapt 中文文档地址：https://v3.bootcss.com 2.Bootstrapt 尺寸控制
1.宽度的控制
栅格系统 ：需要用层div,外层设置class ="row" 属性，内层div 设置class ="col-md-num"属性，内层div装input标签
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div> 2.高度 3.大小的控制
-lg , -md ,-sm , -xs
<input type="button" class="btn btn-danger btn-xs" value="anwo">
<input type="button" class="btn btn-danger btn-sm" value="anwo">
<input type="button" class="btn btn-danger btn-md" value="anwo">
<input type="button" class="btn btn-danger btn-lg" value="anwo"> 3.颜色控制
文本颜色 text-muted , -primary ,-success ,-info ,-warning, -danger
情境背景色： bg-primary, bg-success, -info,-warning,-danger
按钮色 ：btn-primary , ......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> .container .row td{
padding: 10px;
} #box{ padding-top:50px;
} .add{
margin:20px 0;
} td{
width: 15%;
} </style>
</head>
<body> <div class="container-fluid">
<div class="row"> <div class="col-md-10 col-lg-offset-1" id="box" >
<div>
<button type="button" class="btn btn-success add" data-toggle="modal" data-target="#myModal">
添加员工信息
</button>
</div> <table class="table table-striped">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
<th>薪水</th>
<th>操作</th>
</tr> <tr>
<td>1</td>
<td>张三</td>
<td>23</td>
<td>销售部</td>
<td>3000</td>
<td>
<button class="btn btn-danger btn-sm del">删除</button>
<button class="btn btn-info btn-sm edit">编辑</button>
<button class="btn btn-primary btn-sm">查看</button>
</td>
</tr> <tr class="handle">
<td>2</td>
<td>李四</td>
<td>32</td>
<td>保安部</td>
<td>5000</td>
<td>
<button class="btn btn-danger btn-sm del">删除</button>
<button class="btn btn-info btn-sm edit">编辑</button>
<button class="btn btn-primary btn-sm">查看</button>
</td>
</tr>
</table>
</div> </div> </div> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"> <div class="row"> <div class="col-md-5 col-lg-offset-3">
<form class="add_form edit_form">
<div class="form-group">
<label for="username">姓名</label>
<input type="text" class="form-control" id="username" placeholder="username">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="age">
</div>
<div class="form-group">
<label for="dep">部门</label>
<input type="text" id="dep" placeholder="dep" class="form-control"> </div> <div class="form-group">
<label for="salary">薪水</label>
<input type="text" class="form-control" id="salary" placeholder="salary">
</div>
</form>
</div>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary add_save">Save changes</button>
<button type="button" class="btn btn-primary edit_save" style="display: none">Save changes</button> </div>
</div>
</div>
</div> <script>
// 提炼出一个创建tr的函数
function createTr(){
var $tr=$("<tr>");
var l=$("tr").length;
$tr.append("<td>"+l+"</td>")
$(".add_form :text").each(function(){ $tr.append($("<td>").html($(this).val()))
}); $handle="<td><button class=\"btn btn-danger btn-sm del\">删除</button> <button class=\"btn btn-info btn-sm edit\">编辑</button> <button class=\"btn btn-primary btn-sm\">查看</button></td>" $tr.append($handle); return $tr
} // 添加按钮 $(".add_save").click(function(){ $("#myModal").modal("hide"); var $tr=createTr(); $(".table tbody").append($tr); $(".add_form :text").val("");
}); // 删除按钮
$("table").on("click",".del",function(){
$(this).parent().parent().nextAll().children(":first").each(function () {
$(this).html(parseInt( $(this).html())-1)
});
$(this).parent().parent().remove(); }); //编辑按钮 $("table").on("click",".edit",function(){ $(this).attr("class","btn btn-warning btn-sm keep").html("保存"); console.log($(this).parent().prevAll(":lt(4)"));
$(this).parent().prevAll(":lt(4)").each(function () {
let val=$("<input type='text' class='edit_input'>").val($(this).html())
$(this).html(val)
}) }); /*
$("table").on("click",".edit",function(){
var $edit_obj=$(this).parent().parent();
var arr=[];
$(this).parent().siblings().each(function(){
arr.push($(this).text()) }); $(".edit_form :text").each(function(i){
$(this).val(arr[i])
}); $("#myModal").modal("show"); $(".edit_save").show().prev().hide();
$(".edit_save").click(function(){
$("#myModal").modal("hide"); // 创建tr标签
var $tr=createTr();
$edit_obj.replaceWith($tr);
$(".edit_save").hide().prev().show();
}); }) */
// 保存事件
$("table").on("click",".keep",function(){
$(this).parent().prevAll(":lt(4)").each(function () {
let val=$(this).children("input").val();
$(this).html(val)
});
$(this).attr("class","btn btn-info btn-sm edit").html("编辑"); }); /*
$("table").on("blur",".edit_input",function(){
console.log(">>>",$(".edit_input").parent()) $(this).parent().parent().find(".keep").attr("class","btn btn-info btn-sm edit").html("编辑");
$(".edit_input").parent().each(function () {
let val=$(this).children("input").val();
$(this).html(val)
}); }) */ </script> </body>
</html>
表格的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin: 100px auto;
width: 70%; } ul{
list-style: none;
background-color: gray;
height: 40px;
line-height: 40px;
}
ul li{
display: inline-block;
width: 80px;
margin-left: 40px;
}
.content{
margin-top: -15px;
}
.content div{
height: 200px;
background-color: lightgoldenrodyellow;
} .active{
background-color: #e4393c;
color: white;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body> <div class="box">
<ul>
<li rel="introduce" class="active"> 商品介绍</li>
<li rel="after-sale"> 售后</li>
<li rel="comment"> 评价</li>
</ul> <div class="content">
<div class="introduce">商品介绍....</div>
<div class="after-sale hide">售后....</div>
<div class="comment hide">评价....</div>
</div>
</div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
/*
$("ul li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
let val=$(this).attr("rel");
$("."+val).removeClass("hide").siblings().addClass("hide");
}); */ // JS版本 let lis=document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++){
lis[i].onclick=function () {
this.classList.add("active"); let val=this.getAttribute("rel");
let rel2=document.getElementsByClassName(val)[0];
rel2.classList.remove("hide"); for (var j=0;j<lis.length;j++){
if(lis[j]!=this){
// 去除样式
lis[j].classList.remove("active");
// 隐藏内容
let val=lis[j].getAttribute("rel");
let rel_sib=document.getElementsByClassName(val)[0];
rel_sib.classList.add("hide"); }
}; }
} </script>
</body>
</html>
tab栏 jquery 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <style>
.outer{
margin: 100px auto;
width: 590px;
height:470px ;
border: solid red 1px;
position: relative;
} .outer ul{
list-style: none;
}
ul.img li{
position: absolute;
top: 0;
left: 0; } .num {
width: 100%;
position: absolute;
left: 40px;
bottom: 20px;
list-style: none;
;}
.num li{
display: inline-block;
width: 30px;
height: 30px;
background-color: gray;
margin-left: 40px;
border-radius: 50%;
text-align: center;
line-height: 30px;
} .btn{
position: absolute;
top: 50%;
width: 60px;
height: 90px;
background-color: darkgray;
font-size: 36px;
text-align: center;
line-height: 70px;
margin-top: -45px;
opacity: 0.4; }
.btn:hover{
opacity: 1;
} .left{
left:0;
}
.right{
right:0
} .hide{
display: none;
}
.active{
background-color: red!important;
} </style> </head>
<body> <div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li>
</ul> <ul class="num"> </ul> <div class="action">
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
</div> <script>
// 动态添加num li
let img_num=$("ul.img li").length;
let s
for(var i=0;i<img_num;i++){
if (i==0){
s="<li class='active'></li>"
}else{
s="<li></li>"
}
$(".num").append(s)
} // 自动轮播
var ID=setInterval(GO_R,2000);
var index=0;
function GO_R() {
if(index==img_num-1){
index=-1;
}
index++;
$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
$(".num li").eq(index).addClass("active").siblings().removeClass("active")
} function GO_L() {
if(index==0){
index=img_num;
}
index--;
$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
$(".num li").eq(index).addClass("active").siblings().removeClass("active")
}
// 停止定时器 $(".outer").hover(function () {
console.log(123)// 暂停定时器
clearInterval(ID)
},function () {
ID=setInterval(GO_R,2000);
}) // 手动轮播 $(".right").click(function () {
GO_R()
});
$(".left").click(function () {
GO_L()
}) // 悬浮显示 $(".num li").mouseover(function () {
console.log($(this).index());
$(".img li").eq($(this).index()).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
$(".num li").eq($(this).index()).addClass("active").siblings().removeClass("active")
index=$(this).index()
}) </script> </body>
</html>
轮播图 定时器 fadeIn/fadeOut
51 jquery 节点操作和 bootstrapt的更多相关文章
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- 第四章 jQuery节点操作
1.DOM操作分为三类:(1)DOM Core:任何一种支持DOM的编程语言都可以使用用它如:getElementById()(2)HTML-DOM:用于处理HTML文档,如document,form ...
- JQuery --- 第五期 (JQuery节点操作)
学习笔记 1.JQuery添加节点相关方法 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- jquery节点操作
很久没有jquery写东西了,最近使用jquery的时候发现很多节点的操作都不太熟悉了,于是就进行了一个小小的总结. 创建节点:var dom=$('<div></div>') ...
- jquery 节点操作大全
$para.attr("title"); 实例: <script type="text/javascript"> //<![CDATA[ $( ...
- jQuery 节点操作（创建 插入 删除 复制 替换 包裹）
一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...
- jQuery——节点操作
创建节点 1.$():创建一个li标签 $("<li class='aaa'>我是li标签</li>") 2.html():创建一个li标签并同时添加到ul ...
- 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...
随机推荐
- C++原创应用类库和工具类库
此博文记载着自编C++应用类库和生成器库的源代码的链接地址,并且对库的开发环境.开发过程.缺陷以及改进更新进行说明. 分数类 利用中午的时间,自己在Visual Studio 2013环境下编写了一个 ...
- Windows10 64位下安装TensorFlow谷歌人工智能系统已官方原生支持
Windows10 64位下安装TensorFlow谷歌人工智能系统已官方原生支持 GitHub - tensorflow/tensorflow: Computation using data flo ...
- php 写内容到文件,把日志写到log文件
php 写内容到文件,把日志写到log文件 <?php header("Content-type: text/html; charset=utf-8"); /******** ...
- bzoj1658: [Usaco2006 Mar]Water Slides 滑水
Description It's a hot summer day, and Farmer John is letting Betsy go to the water park where she i ...
- switch to hexo !
用 hexo 搭了个博客 但是由于本博客内容过多,所以对于少数内容搬迁,而且本博客和那个博客相关联,但是这个博客不再更新. 新站地址 再见!
- 【前端】javascript+jQuery实现360开机时间显示效果
实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将displ ...
- linux下kermit工具的使用
1.环境: ubuntu16.04 2.背景: 想更换下位机内核 3.使用kermit进行串口传输 举例:传输文件到下位机 2.1首先进入下位机的uboot 2.2 使用uboot自带的命令从串口接收 ...
- HDU1540 Tunnel Warfare（线段树区间维护&求最长连续区间）题解
Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- 第十四章 数字签名算法--RSA
注意:本节内容主要参考自 <Java加密与解密的艺术(第2版)>第9章“带密钥的消息摘要算法--数字签名算法” <大型分布式网站架构(设计与实践)>第3章“互联网安全架构” 1 ...
- javascript版的quine程序-返回自身源码
引用自Wikipedia: 一个quine是一个计算机程序,它不接受任何输入,且唯一的输出就是自身的源代码. @cowboy (Ben Alman) 给出了一个用JavaScript写的quine程序 ...