文章目录
jquery
jQuery与2006年 创建的一个轻量级的javaScript库
对javaScript做了轻量级的封装,简化了语法
理念:写得少,做的多
误区: jquery代替了javaScript 这是错误
jquery对象
原生DOM对象 与 jquery对象的区别
原生DOM对象实际表示网页中的标签.
jquery对象是一个数组对象,将原生的DOM包含在里面,然后在数组对象中封装了许多方法.
dom对象中的方法 与 jquery对象中的方法完全不同,不能相互调用
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript"></script>
jquery对象与DOM对象转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function test(){
var tobj = document.getElementById("textid");//原生态DOM对象
//alert(tobj.value);
//var jobj = jQuery("#textid");
var jobj = $("#textid");//jquery的语法获得标签对象 jQuery对象
//alert(jobj.val());
//dom对象转为jquery对象
//alert($(tobj));
//jquery对象转为dom对象
jobj[0];
jobj.get(0);
alert(jobj[0]);
/*
原生DOM对象 与 jquery对象的区别
原生DOM对象实际表示网页中的标签.
jquery对象是一个数组对象,将原生的DOM包含在里面,然后在数组对象中封装了许多方法.
dom对象中的方法 与 jquery对象中的方法完全不同,不能相互调用
*/
}
</script>
</head>
<body>
<!--
jQuery与2006年 创建的一个轻量级的javaScript库
对javaScript做了轻量级的封装,简化了语法
理念:写得少,做的多
误区: jquery代替了javaScript 这是错误
-->
<input type="text" id="textid" />
<input type="button" value="测试" onclick="test()" />
</body>
</html>
jquery选择器
基本选择器
后台可以拿到对应对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function test(){
//id选择器
//var objs=$("#textid");
//标签选择器
//var objs=$("input");
//类选择器 值为2
//var objs=$(".incss");
//选择器组合
//var objs=$(".incss,input")
//通配选择器 值为12
//var objs=$("*");
//var objs=$("li:first");
//var objs=$(".lis:first");
//var objs=$(".lis:last");
//var objs=$("li:odd") //拿到偶数行数组长度2
//var objs=$("li:even") //拿到奇数行3
//var objs=$("li:gt(0)")
//var objs=$("li[name]")
var objs=$("li[name='aa']") //为1行
console.log(objs.length)
}
</script>
</head>
<body class="incss">
<!--<input type="text" id="textid" class="incss"/>-->
<input type="text" id="textid" class="incss" />
<ul>
<li class="lis" name="aa">list item 1</li>
<li class="lis" name="bb">list item 2</li>
<li class="lis">list item 3</li>
<li class="lis">list item 4</li>
<li class="lis">list item 5</li>
</ul>
<input type="button" value="测试" onclick="test()" />
</body>
</html>
jquery标签属性
操作标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function test(){
//val() 获取第一个匹配标签的value属性值
//val(v) 设置所有匹配标签的value属性值
//$("#textid2").val($("#textid1").val()); //第二个文本框获取到第一个文本框的value值
//console.log($("input").val()); //控制台为111
//console.log($("input").val());
//$("input").val("aaa"); 第二个获取到第一个aaa,文本框输入都改为aaa
//attr("属性名") 获取指定属性值
//console.log($("input").attr("type")); 获取到第一个的文本框类型
//attr("name","value"); 设置匹配标签的属性值
//$(":checkbox").attr("checked",true) 获取到checkbox的checked 三个都会改为ture
//删除属性
//$(":checked").attr("checked",false); 反选 选中后会取消三个勾选
$(":checked").removeAttr("checked"); 将对象取消,控制台html不会显示
}
</script>
</head>
<body class="incss">
<input type="radio" id="textid1" />
<input type="text" id="textid2" />
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" />
<input type="button" value="测试" onclick="test()" />
</body>
</html>
操作css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.divcss{
background-color: purple;
width: 200px;
height: 200px;
color: wheat;
font-size: 20px;
}
</style>
<script type="text/javascript">
function test(){
//获得相应属性的值
//console.log($("#div1").css("background-color")); //点击测试按钮，控制台拿到id为div1的rgb(255, 0, 0)
//设置一个属性值
//$("#div1").css("background-color","green"); //点击测试按钮div变色
//设置多个个属性值 css(name,value) 设置的是行内样式表，优先级高
//$("#div1").css({"background-color":"blue","width":"200px","height":"200px"})
//添加类
//$("#div2").addClass("divcss");
//删除类
//$("#div2").removedClass("divcss");
//切换类 有就删除 没有就添加
$("#div2").toggle("divcss");
}
</script>
</head>
<body>
<div id="div1" style="background-color: red;">
div2
</div>
<div id="div2">
div3
</div>
<input type="button" value="测试" onclick="test()" />
</body>
</html>
操作标签内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var i=0;
function test(){
i++;
//获得html内容(包含标签)
//alert($("#div1").html()); //弹出显示整个div1内容 <b>div2</b>
//只能获得文本内容
//alert($("#div1").text()); //弹出显示div1的文本内容div2
//设置html内容 可以解析字符串中的标签
//$("#div2").html("<b>aaaaa<b>"+i); //将div2内容显示 i会变为123456...
//设置文本内容 不会解析字符串中的标签
//$("#div2").text("<b>aaaaa<b>"); //将div2文本显示
//向标签末尾追加内容
//$("#div2").append("<b>aaaa<b>"); //会一直加aaaa,aaaa
//向标签之前追加html内容
//$("#div2").before("<b>aaaa<b>");
//向标签之后追加html内容
//$("#div2").after("<b>aaaa<b>");
//将指定的标签 移动到指定的标签中
//$("p").appendTo("#div1") //将p标签移动到b标签之后
//$("#div1").remove(); //删除网页中div1标签
$("#div1").empty(); //清空标签中的内容
}
</script>
</head>
<body>
<div id="div1" style="background-color: red;">
<p>段落</p>
<b>div2</b>
</div>
<div id="div2">
div3
</div>
<input type="button" value="测试" onclick="test()" />
</body>
</html>
筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function test(){
//祖先(直接父级，父级的父级
//控制台只能获得上级标签body
//var objs=$("#div1").parent();
//获得所有的父级标签 body&html
//var objs=$("#div1").parents();
//获得祖先中指定的父级标签
//var objs=$("#div1").parents("html");
//后代(子级 孙子)
//获得儿子级别的标签
//var objs=$("#div1").children("b"); //控制台输出 <b>div的儿子</b>
//获得指定儿子级别的标签
//var objs=$("#div1").children("p");
//获得指定的后代(孙子)标签
//var objs=$("#div1").find("b");
//同胞
//获得上下所有兄弟标签
//var objs=$("#div1").siblings(); //8
//获得上下指定的兄弟标签
//var objs=$("#div1").siblings("p"); //4
//var objs = $("#div1").next();
//var objs = $("#div1").nextAll();
//var objs = $("#div1").nextAll("p");
//var objs = $("#div1").prev();
//var objs = $("#div1").prevAll();
//console.log(objs[0]) //jquery对象转换为dom对象 objs.
//console.log(objs.length);
console.log(objs.text())
}
</script>
</head>
<body>
<!--
筛选 ：在选择器的基础上，对获得的标签再次过滤，是选择器的补充
-->
<p>同胞标签</p>
<p>相邻同胞标签上</p>
<div id="div1" >
div2
<p>
<b>div的孙子</b>
</p>
<b>div的儿子</b>
</div>
<p>相邻同胞标签下</p>
<p>同胞标签</p>
<!--
<div id="div2">
div3
</div> -->
<input type="button" value="测试" onclick="test()" />
</body>
</html>
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//window.onload function(){
//ready(fn) 等同于onload事件 网页加载就绪后执行
/*$(document).ready(function(){
$("#btnid").click(function(){
alert("按钮");
})
}); */
//ready的简写方式
$(function(){
//为标签动态添加事件，及事件的处理函数
/*$("#btnid").click(function(){
test();
}); */
/*$("#btnid").dblclick(function(){ //双击按钮触发事件。调用函数 窗口输出显示”按钮”
test();
//alert();
}); */
//批量的为标签添加事件 及 处理函数
/*$("input[type='button']").click(function(){
alert($(this).val());
}); */
//添加事件 删除指定事件
/*$("#btnid").bind("click",function(){
alert(this.value);
})
$("#btnid").unbind("click"); */
//hover(over,out) over鼠标移入触发的函数 out鼠标移出处罚的函数
/*
$("#div1").hover(
function(){
$(this).css("background-color","red");
},
function(){
$(this).css("background-color","purple");
}
) */
//事件切换 toggle(fn1,fn2,fn3...)
/*
$("#btnid").toggle(
function(){
$(this).css("background-color","red");
},
function(){
$(this).css("background-color","pink");
},
function(){
$(this).css("background-color","purple");
},
); */
//一次执行
/*$("#btnid").one("click",function(){
alert($(this).val());
}); */
//监听浏览器窗口发生变化时触发
/*$(window).resize(function(){
//alert("Stop it!")
console.log(window.innerWidth+"::"+window.innerHeight)
}); */
})
function test(){
alert("按钮");
}
</script>
</head>
<body>
<input type="button" value="按钮1" id="btnid" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />
<div id="div1" style="background-color: green;">
div1
</div>
</body>
</html>
浏览器对象
windowDemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(msg){
var msgdiv=document.getElementById("msgshow");
msgdiv.innerHTML=msg;
}
function openNewWin(e){
var x=e.screenX;
var y=e.screenY;
window.open("child.html","child","height=400,width=400,left="+x+",top="+y);
}
</script>
</head>
<body>
父
<div id="msgshow"></div>
<iframe src="child.html"></iframe>
<input type="button" value="打开新窗口" onclick="openNewWin(event)" />
<a href="http://www.baidu.com" target="child">百度</a>
</body>
</html>
child.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function send(){
var msg=document.getElementById("msg").value;
/*var msgdiv=window.parent.document.getElementById("msgshow");
msgdiv.innerHTML=msg; //子窗口,sg获得父窗口 */
window.parent.show(msg); //在子窗口中调用父窗口方法
}
</script>
</head>
<body>
子
<input type="text" id="msg"/>
<input type="button" value="发送" onclick="send()"/>
</body>
</html>
location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//alert(location.href); 获得当前窗口中页面地址
//location.href='child.html'; 重新设置新的地址 重定向
function assigndemo(){ //加载新页面，保留原来页面
location.assign("child.html")
}
function reloaddemo(){ //刷新当前页面
location.reload("");
}
function replacedemo(){ //加载新页面，替换当前页面
location.replace("child.html")
}
</script>
</head>
<body>
<input type="button" value="assign" onclick="assigndemo()" />
<input type="button" value="reload" onclick="reloademo()" />
<input type="button" value="replace" onclick="replacedemo()" />
</body>
</html>
计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
alert();
}
//在指定时间后，调用指定的函数
//var t=setTimeout("test()",5000);
//每隔指定时间，调用一个指定的函数
var t=setInterval("test()",2000);
function clearTime(){ //取消指定的定时器
clearTime(t);
}
</script>
</head>
<body>
<input type="button" value="取消定时" onclick="clearTime()" />
</body>
</html>
每隔两秒执行一次，取消定时后，不会间隔时间
js实现轮播图
lunbotu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--引入CSS代码-->
<link rel="stylesheet" type="text/css" href="./lunbotu.css"/>
<!--引入Js代码-->
<script src="./lunbotu.js"></script>
<title>Js实现轮播图</title>
</head>
<body>
<div class="lunbo">
<div class="content">
<ul id="item">
<li class="item">
<a href="#"><img src="img/1.png" ></a>
</li>
<li class="item">
<a href="#"><img src="img/2.png" ></a>
</li>
<li class="item">
<a href="#"><img src="img/3.png" ></a>
</li>
<li class="item">
<a href="#"><img src="img/4.png"></a>
</li>
</ul>
<div id="btn-left"><</div>
<div id="btn-right">></div>
<ul id="circle">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
</div>
</body>
</html>
lunbotu.css
*{
margin: 0;
padding: 0;
}
a{
list-style: none;
}
li{
list-style: none;
}
.lunbo{
width: 100%;
}
.content{
width: 500px;
height: 300px;
margin: 20px auto;
position: relative;
}
#item{
width: 100%;
height: 100%;
}
.item{
position: absolute;
opacity: 0;
transition: all 1s;
}
.item.active{
opacity:1;
}
img{
width: 100%;
}
#btn-left{
width: 30px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left:5px;
z-index: 10;/*始终显示在图片的上层*/
position: absolute;
left: 0;
top: 50%;
transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
cursor: pointer;
opacity: 0;/*平时隐藏*/
}
.lunbo:hover #btn-left{
/*鼠标滑入，显示图标*/
opacity: 1;
}
#btn-right{
width: 26px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left: 5px;
z-index: 10;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(-60%);
}
.lunbo:hover #btn-right{
opacity: 1;
}
#circle{
height: 20px;
display: flex;
position: absolute;
bottom: 35px;
right: 25px;
}
.circle{
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid white;
background: rgba(0,0,0,0.4);
cursor: pointer;
margin: 5px;
}
.white{
background-color: #FFFFFF;
}
lunbotu.js
window.οnlοad=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.content');
var index=0;
var timer=null;
//清除class
var clearclass=function(){
for(let i=0;i<items.length;i++){
items[i].className="item";
circles[i].className="circle";
circles[i].setAttribute("num",i);
}
}
/*只显示一个class*/
function move(){
clearclass();
items[index].className="item active";
circles[index].className="circle white";
}
//点击右边按钮切换下一张图片
rightBtn.οnclick=function(){
if(index<items.length-1){
index++;
}
else{
index=0;
}
move();
}
//点击左边按钮切换上一张图片
leftBtn.οnclick=function(){
if(index<items.length){
index--;
}
else{
index=items.length-1;
}
move();
}
//开始定时器，点击右边按钮，实现轮播
timer=setInterval(function(){
rightBtn.onclick();
},1500)
//点击圆点时，跳转到对应图片
for(var i=0;i<circles.length;i++){
circles[i].addEventListener("click",function(){
var point_index=this.getAttribute("num");
index=point_index;
move();
})
}
//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
content.οnmοuseοver=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},3000)
}
//鼠标移出又开启定时器
content.οnmοuseleave=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},1500)
}
}
3256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
