周日，雨，记录生活分享点滴
参考博客1：https://www.cnblogs.com/yuanchenqi/articles/5663118.html
参考博客2：https://www.cnblogs.com/5poi/p/6362208.html
jquery
jquery对象
<script src="js/jquery-3.5.1.js">script>
-
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
-
jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象，使用 jQuery 里的方法：$(“#test”).html();
// jQuery $("#test").html() // 获取ID为test的元素内的html代码，其中html()是jQuery里的方法 // jQuery此方法 等同于 DOM彼方法 // DOM document.getElementById(" test ").innerHTML;
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
-
var $variable = jQuery 对象
-
var variable = DOM 对象
jquery选择器
参考网站：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
// 基本选择器 ---------------------------------------------- $("*") // 选取所有元素 $("#id") // 通过 HTML 元素的 id 属性选取指定的元素 $(".class") // 通过指定的 class 查找元素 $("element") // 所有 element 元素 $(".class,p,div") // 同时满足 class,p,div 标签都可以处理 // 层级选择器 ---------------------------------------------- $(".outer div") // outer 盒子里 所有 div 标签元素 $(".outer>div") // outer 盒子里 子辈 div 标签元素 $(".outer+div") // outer 盒子随后所有 div 标签元素 毗邻 $(".outer~div") // outer 盒子后面所有 div 标签元素 // 基本筛选器 ---------------------------------------------- $("li:first") // 选取第一个元素 $("li:eq(2)") // 给定索引值的元素 $("li:even") // 索引为偶数的元素，从 0 开始 $("li:gt(1)") // 大于给定索引值的元素 // 属性选择器 ---------------------------------------------- $('[id="div1"]') // 选取所有带有 id 值等于 "div1" 的元素 $('["chung="man"][id]') // 满足多个属性的选择条件的标签 // 表单选择器 ---------------------------------------------- $("[type='text']") --简写为--> $(":text") // 所有的单行文本框 // 注意只适用于input标签 $("input:checked") // 所有选中的元素
// 过滤筛选器 ---------------------------------------------- $("li").eq(2) // 当前操作中第N个jQuery对象,类似索引 $("li").first() // 第一个元素 $("ul li").hasclass("test") // 元素是否含有某个特定的类,返回布尔值 // 查找筛选器 ---------------------------------------------- $("div").children(".test") // div中的每个子元素,第一层 $("div").find(".test") // div中的包含的所有.test元素,子子孙孙 $("p").next() // 紧邻p元素后的一个同辈元素 $("p").nextAll() // p元素之后所有的同辈元素 $("#test").nextUntil("#test2") // id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾 $("p").prev() // 紧邻p元素前的一个同辈元素 $("p").prevAll() // p元素之前所有的同辈元素 $("#test").prevUntil("#test2") // id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾 $("p").parent() // 每个p元素的父元素 $("p").parents() // 每个p元素的所有祖先元素,body,html $("#test").parentsUntil("#test2") // id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾 $("div").siblings() // 所有的同辈元素,不包括自己
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menutitle>
<script src="../jquery-3.5.1.js">script>
<script>
function show(self){
// console.log($(self).text())
$(self).next().removeClass("hide")
$(self).parent().siblings().children(".con").addClass("hide")
}
script>
<style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;}
.hide{
display: none;
}
style>
head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this);">菜单一div>
<div class="con">
<div>111div>
<div>111div>
<div>111div>
div>
div>
<div class="item">
<div class="title" onclick="show(this);">菜单二div>
<div class="con hide">
<div>111div>
<div>111div>
<div>111div>
div>
div>
<div class="item">
<div class="title" onclick="show(this);">菜单三div>
<div class="con hide">
<div>111div>
<div>111div>
<div>111div>
div>
div>
div>
<div class="content">div>
div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabtitle>
<script src="../jquery-3.5.1.js">script>
<script>
function tab(self){
var index=$(self).attr("xxx")
$("#"+index).removeClass("hide").siblings().addClass("hide")
$(self).addClass("current").siblings().removeClass("current")
}
script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
style>
head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this);">菜单一li>
<li xxx="c2" onclick="tab(this);">菜单二li>
<li xxx="c3" onclick="tab(this);">菜单三li>
ul>
<div class="content">
<div id="c1">内容一div>
<div id="c2" class="hide">内容二div>
<div id="c3" class="hide">内容三div>
div>
div>
body>
html>
操作元素(属性 CSS 和 文档处理)
属性操作
// 基本属性操作 -------------------------------------------------------- $("div").attr("id"); // 返回文档中所有div的id属性值 $("div").attr("id","4"); // 设置所有div的id属性 $("div").attr({'alex':'sb'}) // 设置多个属性,字典形式 $("div").removeAttr("name"); // 将文档中图像的src属性删除 $("input[type='checkbox']").prop("checked", true); // 选中复选框 $("input[type='checkbox']").prop("checked", false); $("img").removeProp("src"); // 删除img的src属性 // CSS类操作 ----------------------------------------------------------- $("p").addClass("selected"); // 为p元素加上 'selected' 类 $("p").removeClass("selected"); // 从p元素中删除 'selected' 类 $("p").toggleClass("selected"); // 如果存在就删除,否则就添加 // HTML代码/本文/值 ---------------------------------------------------- $('p').html(); // 返回p元素的html内容 $("p").html("Hello nick!"); // 设置p元素的html内容 $('p').text(); // 返回p元素的文本内容 $("p").text("nick"); // 设置p元素的文本内容 $("input").val(); // 获取文本框中的值 $("input").val("nick"); // 设置文本框中的内容
实例 编辑框正反选
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick='selectAll()'>全选button>
<button onclick='cancel()'>取消button>
<button onclick='reverse()'>反选button>
<table border="1" width="100px">
<thead>
thead>
<tbody>
<tr>
<td><input type="checkbox" />td>
<td>1111td>
tr>
<tr>
<td><input type="checkbox" />td>
<td>2222td>
tr>
<tr>
<td><input type="checkbox" />td>
<td>3333td>
tr>
<tr>
<td><input type="checkbox" />td>
<td>4444td>
tr>
tbody>
table>
<script src="jquery-1.8.2.js">script>
<script type="text/javascript">
function selectAll(){
$(":checkbox").prop('checked',true)
}
function cancel(){
$(":checkbox").prop('checked',false)
}
function reverse(){
$(":checkbox").each(function (){
if( $(this).prop('checked')){
$(this).prop('checked',false)
}else{
$(this).prop('checked',true)
}
})
}
script>
body>
html>
实例 模态对话框
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.6);
z-index: 10;
}
.infoedit{
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
background-color: white;
z-index: 20;
}
.hide{
display: none;
}
style>
<script src="jquery-1.8.2.js">script>
<script>
$(function(){
$('[target=edit]').click(function(){
$('.shadow,.infoedit').removeClass('hide');
var server_info = $(this).prevAll();
server_info.each(function(k,v){
var text = $(this).text();
var target = $(this).attr('target');
$('#'+target).val(text);
})
})
$('#cancelEdit').click(function(){
$('.infoedit :text').val('');
$('.shadow,.infoedit').addClass('hide');
})
$('#addInfo').click(function(){
$('.shadow,.infoedit').removeClass('hide');
})
})
script>
head>
<body>
<button id="addInfo">添加button>
<table border="1">
<thead>
<tr>
<th>服务器th>
<th>ip地址th>
<th>端口号th>
<th>操作th>
tr>
thead>
<tbody>
<tr>
<td target='server'>c1.comtd>
<td target='ip'>10.1.1.1td>
<td target='port'>8881td>
<td target='edit'>编辑td>
tr>
<tr>
<td target='server'>c2.comtd>
<td target='ip'>10.1.1.2td>
<td target='port'>8882td>
<td target='edit'>编辑td>
tr>
<tr>
<td target='server'>c3.comtd>
<td target='ip'>10.1.1.3td>
<td target='port'>8883td>
<td target='edit'>编辑td>
tr>
tbody>
table>
<div class="shadow hide">div>
<div class="infoedit hide">
<form action="" method="get">
<p>服务器:
<input type="text" id='server' />
p>
<p>ip地址:
<input type="text" id='ip' />
p>
<p>端口号:
<input type="text" id='port' />
p>
<input type="submit" value="提交" />
<input type="button" value="取消" id='cancelEdit'/>
form>
div>
body>
html>
// 样式 ---------------------------------------------------------------- $("p").css("color"); // 访问查看p元素的color属性 $("p").css("color","red"); // 设置p元素的color属性为red $("p").css({ "color": "red", "background": "yellow" }); // 设置多个属性要用{}字典形式 // 位置 ---------------------------------------------------------------- $('p').offset() //元素在当前视口的相对偏移,Object {top: 122, left: 260} $('p').offset().top $('p').offset().left $("p").position() //元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250} $(window).scrollTop() //获取滚轮滑的高度 $(window).scrollLeft() //获取滚轮滑的宽度 $(window).scrollTop('100') //设置滚轮滑的高度为100 $(window).height() //获取窗口的高度 $(document).height() //获取文档的高度 // 尺寸 ---------------------------------------------------------------- $("p").height(); //获取p元素的高度 $("p").width(); //获取p元素的宽度 $("p:first").innerHeight() //获取第一个匹配元素内部区域高度(包括补白、不包括边框) $("p:first").innerWidth() //获取第一个匹配元素内部区域宽度(包括补白、不包括边框) $("p:first").outerHeight() //匹配元素外部高度(默认包括补白和边框) $("p:first").outerWidth() //匹配元素外部宽度(默认包括补白和边框) $("p:first").outerHeight(true) //为true时包括边距
实例 返回顶部
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
.goTop{
position: fixed;
right: 10px;
bottom: 10px;
width: 40px;
height: 40px;
background-color: darkgray;
text-align: center;
}
.hide{
display: none;
}
style>
head>
<body>
<div style="height: 1000px;">div>
<div class="goTop hide">返回顶部div>
<script src="jquery-1.8.2.js">script>
<script type="text/javascript">
window.onscroll = function(){
if( $(window).scrollTop() > 50 ){
$(".goTop").removeClass('hide')
}else{
$(".goTop").addClass('hide')
}
}
$('.goTop').click(function(){
$(window).scrollTop(0)
})
script>
body>
html>
缓慢返回顶部(带效果):
$('#backTop').bind('click',function(){
$('html,body').animate( {scrollTop:0} );
});
注:html,body需一起使用。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.head{
height: 50px;
background-color: burlywood;
}
.menu{
position: absolute;
left: 0;
background-color: ghostwhite;
width:200px;
height: 600px;
float:left;
}
.menu-fix{
position: fixed;
top:10px;
}
.father{
background-color: gray;
position: absolute;
left: 210px;
}
.item{
width: 800px;
height: 600px;
}
.title{
text-align: center;
}
.active{
background-color: cornflowerblue;
color: darkgreen;
}
style>
head>
<body>
<div class="head">div>
<div class="menu">
<div class="title active" target='c1'>第一张div>
<div class="title" target='c2'>第二张div>
<div class="title" target='c3'>第三张div>
div>
<div class="father">
<div class="content">
<div class="item" con='c1'>第一章div>
<div class="item" con='c2'>第二章div>
<div class="item" con='c3'>第三章div>
div>
div>
<script src="jquery-1.8.2.js">script>
<script>
window.onscroll = function(){
var current = $(window).scrollTop()
if(current > 50 ){
$('.menu').addClass('menu-fix')
}
else{
$('.menu').removeClass('menu-fix')
}
if( current + $(window).height() == $(document).height() ){
$('.menu').children(":last").addClass('active').siblings().removeClass('active');
return
}
$('.item').each(function(){
var item_top = $(this).offset().top;
var item_height = $(this).height();
var title = $(this).attr('con')
if ( current > item_top && current < item_height+item_top){
$(".title[target="+title+"]").addClass('active').siblings().removeClass('active')
}
})
}
script>
body>
html>
// 内部插入 ------------------------------------------------------------ $("p").append("nick"); //每个p元素内后面追加内容 $("p").appendTo("div"); //p元素追加到div内后 $("p").prepend("Hello"); //每个p元素内前面追加内容 $("p").prependTo("div"); //p元素追加到div内前 // 外部插入 ------------------------------------------------------------ $("p").after("nick"); //每个p元素同级之后插入内容 $("p").before("nick"); //在每个p元素同级之前插入内容 $("p").insertAfter("#test"); //所有p元素插入到id为test元素的后面 $("p").insertBefore("#test"); //所有p元素插入到id为test元素的前面 // 替换 ---------------------------------------------------------------- $("p").replaceWith("Paragraph. "); //将所有匹配的元素替换成指定的HTML或DOM元素 $("Paragraph. ").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素 // 删除 ---------------------------------------------------------------- $("p").empty(); //删除匹配的元素集合中所有的子节点，不包括本身 $("p").remove(); //删除所有匹配的元素,包括本身 $("p").detach(); //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来) // 复制 ---------------------------------------------------------------- $("p").clone() //克隆元素并选中克隆的副本 $("p").clone(true) //布尔值指事件处理函数是否会被复制
实例 克隆方法的应用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div class="outer">
<div class="condition">
<div class="icons" style="display:inline-block">
<a onclick="add(this);"><button>+button>a>
div>
<div class="input" style="display:inline-block">
<input type="checkbox">
<input type="text" value="alex">
div>
div>
div>
<script src="jquery-1.8.2.js">script>
<script>
function add(self){
var $duplicate = $(self).parent().parent().clone();
$duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");
$duplicate.appendTo($(self).parent().parent().parent());
}
function removed(self){
$(self).parent().parent().remove()
}
script>
body>
html>
更多请查询：jQuery API 中文在线手册