一级目录
二级目录
jq选择器
id选择器 $('#box')
类选择器 $('.box')
标签选择器 $('p')
并集选择器 $('li,a,#box')
交集选择器 $('div.abc')
//子代选择器
$(‘ul>li’).css(‘border’,‘3px dotted pink’);
//后代选择器
$(‘ul li’).css(‘border’,‘3px dotted pink’);
//过滤选择器 :qe()
$(‘ul li:eq(2)’).css(‘backgroundColor’,‘pink’)
//child() 子代 //find() 后代 //siblings() 其他兄弟们 参数可选 //parent()父级
<ul>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ul>
<div id="box">
<em>111</em>
<p>222</p>
<p>333</p>
<span>444</span>
</div>
<script>
//child() 子代
$('ul').children().css('border','2px solid green');
$('#box').children('em').css('color','red');
//find() 后代
$('ul').find('li').css('background','gray');
//siblings() 其他兄弟们 参数可选
$('#box span').siblings('p').css('border','2px dashed black');
//parent()父级
$('span').parent().css('border','5px solid orange');
//parents()父级们
$('span').parents().css('border','5px solid orange');
</script>
选项卡小案例
<style>
.wrap{
width: 200px;
text-align: center;
}
.menuGroup{
border: 1px solid black;
background-color: cadetblue;
}
.menuGroup>div{
height: 200px;
background-color: cornflowerblue;
display: none;
}
span{
border-bottom: 1px solid seagreen;
cursor: pointer;
display:block;
height: 28px;
line-height: 20px;
font-size: 16px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul class="wrap">
<li class="menuGroup">
<span>1</span>
<div>1</div>
</li>
<li class="menuGroup">
<span>12</span>
<div>12</div>
</li>
<li class="menuGroup">
<span>123</span>
<div>123</div>
</li>
<li class="menuGroup">
<span>1234</span>
<div>1234</div>
</li>
</ul>
<script>
$('.wrap>li').children('span').click(function(){
$(this).siblings().css('display','block');
$(this).parent().siblings().find('div').css('display','none');
})
</script>
## js jq对比
```javascript
window.onload = function(){
console.log('js 入口')
}
window.onload = function(){
console.log('js 入口无法写多个会覆盖')
}
$(function(){
console.log('123')
})
$(function(){
console.log('456')
})
$(document).ready(function(){
console.log('789')
})
//123 456 789 js 入口无法写多个会覆盖
1.入口函数 js无法写多个 jq不会覆盖 jq 入口函数触发时机更早
2.代码容错性 js报错会停止运行 jq不会报错 容错性更强
3.兼容性 js有很多兼容问题 jq几乎没有容错性问题(内部已经处理)
$ 本质
<script>
$(); //本质上是一个函数 可以接受很多参数
//$(funciton(){}) 意味着需要写入口函数
//$('#box') 意味着获取id为box的元素
console.log($('#box')) //jq对象
//$('#box').style.background='red';
//报错 jq对象无法使用js的属性和方法
// js :document.getElementById('box').style.background='red';
$('#box').css('backgroundColor','blue');
//jq 和 js 可以一起共存 但是不能混用
</script>
jq和js dom 相互转换
<script>
//jq=>js dom
$('#box').get(0).style.backgroundColor='red';
//$('#box')[0].style.backgroundColor='red';
//js dom=>jq
var oBox = document.getElementById('box');
$(oBox).css('border','3px solid blue');
</script>
jq显示隐藏
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">
<div id="box">
</div>
<script>
$('input:eq(0)').click(function(){
$('#box').show("slow",function(){
alert("show")
})
});
$('input:eq(1)').click(function(){
$('#box').hide("fast",function(){
alert("fast")
})
});
$('input:eq(2)').click(function(){
$('#box').toggle(2000,function(){
alert("toggle")
})
});
</script>
自用小插件
悬浮可拖拽导航
拖动时候用到的三个事件:mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.touches[0].clientX和event.touches[0].clientY。
网上借鉴 下载地址如下
http://www.jq22.com/jquery-info21190
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div拖拽</title>
<style>
.myk {
width: 100px;
height: 100px;
background-color: orange;
position: fixed;
z-index: 999;
top: 150px;
left: 50px;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: white;
letter-spacing: 2px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="myk" id="t1">
首页
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="drag.js"></script>
<script>
moveDivs("t1"); //传入容器ID就可以
</script>
</html>
//div视野拖拽
function moveDivs(_id) {
var _block = document.getElementById(_id);
var _init_left, _init_top, _div_top, _div_left, _box_width, _box_heiht;
var _win_height = $(window).height();
var _win_width = $(window).width();
_block.addEventListener('touchstart', function(e) {
_init_left = parseInt(e.touches[0].clientX);
_init_top = parseInt(e.touches[0].clientY);
_div_top = $("#" + _id).offset().top - $(window).scrollTop();
_div_left = $("#" + _id).offset().left;
_box_width = $("#" + _id).width();
_box_heiht = $("#" + _id).height();
});
_block.addEventListener('touchmove', function(e) {
e.preventDefault();
var _left = parseInt(e.touches[0].clientX);
var _top = parseInt(e.touches[0].clientY);
var _need_left = _div_left + (_left - _init_left);
var _need_top = _div_top + (_top - _init_top);
//检测_block是否还存在可视区域
var _max_left = _win_width - _box_width;
var _max_top = _win_height - _box_heiht;
if (_need_left < 0) _need_left = 0;
if (_need_left > _max_left) _need_left = _max_left;
if (_need_top < 0) _need_top = 0;
if (_need_top > _max_top) _need_top = _max_top;
$(".myk").css({ 'z-index': 9, })
$('#' + _id).css({
'top': _need_top + 'px',
'left': _need_left + 'px',
'z-index': 999,
})
});
_block.addEventListener('touchend', function(e) {
});
}
//保留多位小数
function fixedNum(_val, _num = 2) {
var val = (_val * 100) / 100;
return val.toFixed(_num);
}
点击查看详情
<!DOCTYPE html>
<html>
<head>
<title>复制</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="container" style="height:200px;width:200px;background-color: aqua;">
:hidden 选择器选取隐藏的元素。 以下几种情况的元素是隐藏元素: 设置为 display:none 带有 type="hidden" 的表单元素 隐藏的父元素(这也会隐藏子元素) 注释:该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。</div>
<a href="javascript:void(0);" id="detail">点击这里</a>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/jquery-3.3.1.js"></script>
<script>
$(function() {
$('#detail').click(function() { //点击a标签
if ($('#container').is(':hidden')) { //如果当前隐藏
$('#container').show(); //那么就显示div
} else { //否则
$('#container').hide(); //就隐藏div
}
})
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.cWrap,
.cWrap div {
display: inline-block;
margin: 0;
padding: 0;
}
.cWrap {
width: 90%;
margin: auto;
height: 30px;
overflow: auto;
}
.cWrap>div {
width: 200%;
transition: 0.5s all ease;
overflow-x: auto;
white-space: nowrap;
display: inline-block;
}
.cWrap>div>div {
width: 10%;
height: 20px;
border: 1px solid black;
}
#leftMove,
#rightMove {
margin: 0;
padding: 0;
}
</style>
<body>
<div style="width: 100%;">
<button id="rightMove"><</button>
<div style="width: 100%;overflow: hidden;">
<div class="cWrap">
<div id="box">
<div class="day">
1
</div>
<div class="day">
2
</div>
<div class="day">
3
</div>
<div class="day">
4
</div>
<div class="day">
5
</div>
<div class="day">
6
</div>
<div class="day">
7
</div>
<div class="day">
8
</div>
</div>
</div>
</div>
<button id="leftMove">></button>
</div>
</body>
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
var x = 0;
var box = document.getElementById('box');
var a = box.style.left;
console.log(a);
$("#leftMove").click(function() {
x++;
console.log(x);
var p = -10;
var xp = x * p + "%";
$(".cWrap").children("div").css("margin-left", xp);
x = x > 15 ? 10 : x;
})
$("#rightMove").click(function() {
console.log(x);
var p = -10;
var xp = x * p + "%";
$(".cWrap").children("div").css("margin-left", xp);
x--;
x = x < 0 ? 0 : x;
})
</script>
</html>