1.jquery页面初始化函数
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
window.onload=function(){
alert(javascript页面初始化函数);
}
$(function(){
alert("导入jquery的函数库文件");
})
</script>
2.Jquery对象与javascript对象的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("p").css("font-size","30px");
$("#p1").css("color","red");
$(".p2").css("color","blue");
var pjquery=$("#p1");
var pdao=pjquery.get();
alert(pdao);
})
</script>
</head>
<body>
<h4>基础语法： $(selector).action()</h4>
<h4>$(selector)----jquery的元素选择器【选中需要被控制的html元素，并转换成jquery对象】</h4>
<h4>action()----具体的函数名称，需要什么功能，就写那个功能的函数名称</h4>
<h4>基础语法： jquery对象.函数名称()</h4>
<h4>javascript-1.document.getElementById("id")[dom对象]--jquery--$("#id")[jquery对象]</h4>
<h4>javascript-2.document.getElementsTagName("元素名称")[数组]--jquery--$("元素名称")[数组]</h4>
<h4>javascript-3.document.getElementsClassName("class")[数组]--jquery--$(".class")[数组]</h4>
<p id="p1">测试$("#id")</p>
<p>测试$("元素名称")</p>
<p class="p2">测试$(".class")</p>
</body>
</html>
3.jQuery 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(":text").val("input type='text'表单元素值");
})
</script>
</head>
<body>
<h4>javascript获取html元素的值</h4>
<h4>dom对象.innerText[不会得到包含其中的html标记]</h4>
<h4>dom对象.innerHTML[会得到包含其中的html标记]</h4>
<h4>dom对象.value[得到表单元素的值]</h4>
<h4>javascript修改html元素的值</h4>
<h4>dom对象.innerText="数据值"[不会显示包含其中的html标记]</h4>
<h4>dom对象.innerHTML="数据值"[会显示包含其中的html标记]</h4>
<h4>dom对象.value="数据值" [设置表单元素的值]</h4>
<hr>
<h4>jQuery获取html元素的值</h4>
<h4>jQuery对象.text()[不会得到包含其中的html标记]</h4>
<h4>jQuery对象.html()[会得到包含其中的html标记]</h4>
<h4>jQuery对象.val()[得到表单元素的值]</h4>
<h4>jQuery修改html元素的值</h4>
<h4>jQuery对象.text("数据值")[不会显示包含其中的html标记]</h4>
<h4>jQuery对象.html("数据值")[会显示包含其中的html标记]</h4>
<h4>jQuery对象.val("数据值")[修改表单元素的值]</h4>
<p id="p1">测试<span>jquery</span>的获取/修改html元素的值<p>
<input type="text" value="表单元素值">
</body>
</html>
4.jQuery - 添加元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("#div1").after("<h3>在div之后插入内容</h3>");
$("#div1").before("<h3>在div之前插入内容</h3>");
})
</script>
</head>
<body>
<h4>append() - 在被选中元素中插入内容</h4>
<h4>after() - 在被选元素之后插入内容</h4>
<h4>before() - 在被选元素之前插入内容</h4>
<div id="div1" style="width: 300px;height: 300px;background-color: red;"></div>
</body>
</html>
5.jQuery - 删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("#div1").empty();
})
</script>
</head>
<body>
<h4>remove() - 删除被选元素（及其子元素）【有过滤功能】</h4>
<h4>empty() - 删除从被选元素中的子元素</h4>
<div id="div1" style="width: 300px;height: 300px;background-color: red;">
<div id="div2" style="width: 250px;height: 250px;background-color:blue;">
<img src="imgs/avatar2.png">
</div>
<h3>我是id="div1"的子元素</h3>
</div>
</body>
</html>
6.jQuery的CSS 操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<style>
.mydiv{width: 300px;height: 300px;background-color: red;}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("#but1").click(function(){
$("#div1").addClass("mydiv");
});
$("#but2").click(function(){
$("#div1").removeClass("mydiv");
});
$("#but3").click(function(){
$("#div1").toggleClass("mydiv");
});
})
</script>
</head>
<body>
<h4>javascript得到css样式值</h4>
<h5>dom对象.style.css属性名称</h5>
<h4>javascript修改css样式值</h4>
<h5>dom对象.style.css属性名称="属性值"</h5>
<h4>jquery得到css样式值</h4>
<h5>jquery对象.css(属性名称)</h5>
<h4>jquery修改css样式值</h4>
<h5>jquery对象.css(属性名称,属性值)----修改一个css属性值</h5>
<h5>jquery对象.css({属性名称:属性值,属性名称:属性值})----修改多个css属性值</h5>
<h5>jquery对象.addClass("class属性值")----为有class属性值的html元素设置style中的样式</h5>
<h5>jquery对象.removeClass() - 从被选元素删除一个或多个类</h5>
<h5>jquery对象.toggleClass() - 对被选元素进行添加/删除类的切换操作</h5>
<input id="but1" type="button" value="addClass">
<input id="but2" type="button" value="removeClass">
<input id="but3" type="button" value="toggleClass">
<div id="div1" ></div>
</body>
</html>
7.jQuery 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("#but1").click(function(){
alert("按钮点击事件");
});
$("#but2").dblclick(function(){
alert("按钮双击事件");
});
})
</script>
</head>
<body>
<h4>1、页面初始化事件--$(document).ready(function)</h4>
<h4>2.click(function) 方法是当按钮点击事件被触发时会调用一个函数</h4>
<input id="but1" type="button" value="按钮">
<h4>3.dblclick(function)双击元素时，会发生 dblclick 事件。</h4>
<input id="but2" type="button" value="按钮">
<h4>4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。</h4>
<h4>5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。</h4>
<h4>6.hover(function)方法用于模拟光标悬停事件。</h4>
<h4>7.focus(function)当元素获得焦点时，发生 focus 事件。</h4>
<h4>8.blur(function)当元素失去焦点时，发生 blur 事件。</h4>
</body>
</html>
8.元素的隐藏和显示动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("#but1").click(function(){
var butvalue=$("#but1").val();
if(butvalue=="隐藏"){
$("#img1").hide(5000,function(){
$("#but1").val("显示");
});
}else{
$("#img1").show(5000,function(){
$("#img1").css({"border":"10px solid red"});
$("#but1").val("隐藏");
});
}
})
$("#but2").click(function(){
var butvalue=$("#but2").val();
if(butvalue=="隐藏"){
$("#img2").fadeOut(5000,function(){
$("#but2").val("显示");
});
}else{
$("#img2").fadeIn(5000,function(){
$("#img2").css({"border":"10px solid red"});
$("#but2").val("隐藏");
});
}
})
$("#but3").click(function(){
var butvalue=$("#but3").val();
if(butvalue=="隐藏"){
$("#img3").slideUp(5000,function(){
$("#but3").val("显示");
});
}else{
$("#img3").slideDown(5000,function(){
$("#img3").css({"border":"10px solid red"});
$("#but3").val("隐藏");
});
}
})
})
</script>
</head>
<body>
<h4>hide([毫秒数],[success-function]) 隐藏元素</h4>
<h4>show([毫秒数],[success-function]) 显示元素</h4>
<input id="but1" type="button" value="隐藏"><br>
<img id="img1" src="imgs/avatar2.png">
<h4>fadeIn([毫秒数],[success-function]) 显示元素。</h4>
<h4>fadeOut([毫秒数],[success-function]) 隐藏元素。</h4>
<input id="but2" type="button" value="隐藏"><br>
<img id="img2" src="imgs/avatar2.png">
<h4>slideDown([毫秒数],[success-function]) 显示元素</h4>
<h4>slideUp([毫秒数],[success-function]) 隐藏元素</h4>
<input id="but3" type="button" value="隐藏"><br>
<img id="img3" src="imgs/avatar2.png">
</body>
</html>
9.jQuery 效果- 动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<style>
#img1{
position: relative;
padding-top: 0px;
padding-left: 0px;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("#but1").click(function(){
$("#img1").animate({"padding-top":"200px","padding-left":"200px"},
5000,
function(){ $("#img1").css({"border":"10px solid red"});});
})
$("#but2").click(function(){
$("#img1").stop();
})
})
</script>
</head>
<body>
<h4>$(selector).animate({params},speed,callback);</h4>
<h4>{params}---设置修改样式</h4>
<h4>speed---设置执行时间</h4>
<h4>callback--函数，动画执行完成以后的动作</h4>
<h4>jQuery stop() 方法用于停止动画或效果，在它们完成之前。</h4>
<input id="but1" type="button" value="开始动画"><input id="but2" type="button" value="停止动画"><br>
<img id="img1" src="imgs/avatar2.png">
</body>
</html>
10.jQuery each() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<style>
#img1{
position: relative;
padding-top: 0px;
padding-left: 0px;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
var parray=$("p");
parray.each(function(index,element){
var size=index*10+20;
$(element).css("font-size",size+"px");
});
})
</script>
</head>
<body>
<h4>$(selector).each(function(index,element){ })</h4>
<h4>$(selector)---数组</h4>
<h4>each函数中的function的</h4>
<h4>参数1-index--被遍历出的每一个元素在数组中的位置[下标]</h4>
<h4>参数2-element--被遍历出的每一个元素具体元素【DOM对象】</h4>
<h4>each函数中的function中没有element时，可以被this代替</h4>
<p>测试用的p元素1</p>
<p>测试用的p元素2</p>
<p>测试用的p元素3</p>
<p>测试用的p元素4</p>
</body>
</html>
1896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
