web前端学习笔记——Day10
四、操作元素（属性，css，文档处理）
4.1属性操作
--------------------------属性
$("").attr();//拿到属性对应的值
$("").removeAttr();//
$("").prop();
$("").removeProp();
如果是固有的属性，就用prop，如果是自己定义的属性，就用attr
--------------------------CSS类
$("").addClass(class|fn)//增加一个class名字
$("").removeClass([class|fn])//删除一个class名字
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])//取value值，必须固有value
---------------------------
$("").css("color","red")
$("").css({"color":"red","background":"green"})
eg：举例
<html>
<head>
<title>属性操作title>
head>
<body>
<div class="div1" con="c1 c2">div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见
<input type="text" value="123">
<div id="d1" value="456">
xjy
<p>hellop>
div>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
//console.log($("div").attr("con"))
//拿到属性对应的值
//console.log($("div").attr("con","c2"))
//将属性对应的值改为c2
//console.log($(":checkbox:first").attr("checked"))
//checked
//console.log($(":checkbox:last").attr("checked"))
//undefined
//console.log($(":checkbox:first").prop("checked"))
//true
//console.log($(":checkbox:last").prop("checked"))
//false
//console.log($(".div1").removeAttr("con"));
//console.log($("#d1").html())//hello
//console.log($("#d1").text())//hello
//console.log($("#d1").html("wzq
"))
//将里面的值修改为wzq
//console.log($("#d1").text("wzq
"))
//将里面的文本修改为wzq
//console.log($(":text").val())//123
//console.log($(":text").next().val())//空
//console.log($(":text").val("789"))
//将value值改为789
script>
html>
注意
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
<script>
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// false
// ---------手动选中的时候attr()获得到没有意义的undefined-----------
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// true
console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//checked
script>
实例之全反选(jquery)
<html>
<head>
<title>jquery正反选title>
head>
<body>
<button onclick="selectall();">全选button>
<button onclick="cancel();">取消button>
<button onclick="reverse();">反选button>
<table border="1">
<tr>
<td><input type="checkbox">td>
<td>111td>
tr>
<tr>
<td><input type="checkbox">td>
<td>222td>
tr>
<tr>
<td><input type="checkbox">td>
<td>333td>
tr>
<tr>
<td><input type="checkbox">td>
<td>444td>
tr>
table>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
function selectall(){
$(":checkbox").each(function(){
$(this).prop("checked",true)
})
}
function cancel(){
$(":checkbox").each(function(){
$(this).prop("checked",false)
})
}
function reverse(){
$(":checkbox").each(function(){
if($(this).prop("checked")){
$(this).prop("checked",false)
}
else{
$(this).prop("checked",true)
}
})
}
script>
html>
循环
<html>
<head>
<title>jquery的循环title>
head>
<body>
<p>11111p>
<p>22222p>
<p>33333p>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
arr=[11,22,33]
// for (var i=0;i
// $("p").eq(i).html(arr[i])
// }
//方式一
// $.each(arr,function(x,y){
// console.log(x);//下标
// console.log(y);//对应的值
// })
//方式二
// $("p").each(function(){
// console.log($(this))
// $(this).html("hello")
// })
script>
html>
实例之模态对话框
<html>
<head>
<title>模tai对话框jQuerytitle>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: gold;
}
style>
head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action1(this)">
div>
<div class="shade hide">div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action2(this)">
div>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script>
function action1(self){
$(self).parent().siblings().removeClass("hide");
}
function action2(self){
//$(self).parent().parent().children(".models,.shade").addClass("hide")
$(self).parent().addClass("hide").prev().addClass("hide")
}
script>
html>
4.2文档处理
//创建一个标签对象
$("<p>")
//内部插入（插入子标签）
$("").append(content|fn) ----->$("p").append("<b>Hellob>");//放在后面
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hellob>");//放在前面
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入（插入兄弟标签）
$("").after(content|fn) ----->$("p").after("<b>Hellob>");//放在下面
$("").before(content|fn) ----->$("p").before("<b>Hellob>");//放在上面
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
eg：举例：
<html>
<head>
<title>文档处理title>
head>
<body>
<div class="c1">
<p>pppp>
div>
<button>addbutton>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
$("button").click(function(){
//内部添加标签(子标签)append在后面添加,prepend在前面添加
//$(".c1").append("wzq
")
//添加一个h1标签，内容为wzq
//var $ele=$("");//创建一个标签，也可写为
//$ele.html("hello")//创建标签的文本
//$ele.css("color","red")//创建标签的样式
// $(".c1").append($ele)//将创建的标签添加
//$ele.appendTo(".c1")
//$(".c1").prepend($ele);
//$ele.prependTo(".c1")
//外部添加(兄弟标签)after和before
// var $ele=$("");//创建一个标签，也可写为
// $ele.html("hello")//创建标签的文本
// $ele.css("color","red")//创建标签的样式
// $(".c1").after($ele)//下面添加兄弟标签
// $ele.insertAfter(".c1")
// $(".c1").before($ele)//上面添加兄弟标签
// $ele.insertBefore(".c1")
//替换
// var $ele=$("");//创建一个标签，也可写为
// $ele.html("hello")//创建标签的文本
// $ele.css("color","red")//创建标签的样式
// $("p").replaceWith($ele)
//用h1标签替换p标签
//删除与清空
// $(".c1").empty()//只将内容删除
// $(".c1").remove()//将内容和标签全部删除
//克隆()复制
// var $ele2=$(".c1").clone()
// $(".c1").after($ele2)
})
script>
html>
实例之复制样式条
<html>
<head>
<title>练习title>
head>
<body>
<div class="outer">
<div class="item">
<button onclick="add(this)">+button>
<input type="text" name="">
div>
div>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
function add(wzq){
var $clone_obj=$(wzq).parent().clone();
$clone_obj.children("button").text("-").attr("onclick","remove_obj(this)")
$(".outer").append($clone_obj);
}
function remove_obj(self){
$(self).parent().remove()
}
script>
html>
4.3css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])//offset()关于视口的偏移量
$("").position()
//position()关于已经设定定位的父标签的偏移量
$("").scrollTop([val])//上下滑轮
$("").scrollLeft([val])//左右滑轮
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
eg：举例：
<html>
<head>
<title>css操作title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.outer{
position: relative;
}
.div1, .div2{
width: 200px;
height: 100px;
}
.div1{
border:5px solid yellow;
padding: 20px;
margin: 2px;
background-color: red;
}
.div2{
background-color: green;
}
style>
head>
<body>
<div class="div1">div>
<div class="outer">
<div class="div2">div>
div>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
//offset()关于视口的偏移量
// console.log($(".div1").offset().top)
// console.log($(".div1").offset().left)
// console.log($(".div2").offset().top)
// console.log($(".div2").offset().left)
//position()关于已经设定定位的父标签的偏移量
// console.log($(".div1").position().top)
// console.log($(".div1").position().left)
// console.log($(".div2").position().top)
// console.log($(".div2").position().left)
//尺寸
//console.log($(".div1").height())
//只是文本的高度
//console.log($(".div1").innerHeight())
//包括padding的高度
//console.log($(".div1").outerHeight())
//包括padding和border的高度
//console.log($(".div1").outerHeight(true))
//包括padding和border和margin的高度
//console.log($(".div1").height("300px"))
//将height改为300px
script>
html>
4.3.1滑轮滚动事件和返回顶部
<html>
<head>
<title>滚动滑轮——返回顶部title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.div2{
width: 100%;
height: 1000px;
background-color: green;
}
.div1{
width: 40%;
height: 400px;
background-color: red;
overflow: auto;
}
.returnTop{
position: fixed;
right: 20px;
bottom: 10px;
width: 100px;
height: 50px;
background-color: gray;
color: yellow;
text-align: center;
line-height: 50px;
}
.hide{
display: none;
}
style>
head>
<body>
<div class="div1">
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
<h1>wzqh1>
div>
<div class="div2">
<button onclick="returnTop2()">返回button>
div>
<div class="returnTop hide" onclick="returnTop()">返回顶部div>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
//监听事件
window.onscroll=function(){
//console.log($(window).scrollTop());
if ($(window).scrollTop()>100){
$(".returnTop").removeClass("hide")
}
else{
$(".returnTop").addClass("hide")
}
}
function returnTop(){
$(window).scrollTop(0);
}
function returnTop2(){
$(".div1").scrollTop(0);
}
script>
html>
五、事件
5.1页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
5.2事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件；
[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：
//$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
//li：$('ul').append('js new li ')；这个新加的li是不会被绑上click事件的
//但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
//li:$('ul').append('js new li ');这个新生成的li被绑上了click事件
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
<html>
<head>
<title>事件title>
head>
<body>
<ul>
<li>11li>
<li>22li>
<li>33li>
<li>44li>
<li>55li>
ul>
<button>addbutton>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
//页面载入,解决因加载顺序不同找不到标签的问题
// $(document).ready(function(){
// $("ul li").html(5);
// });
//上面的简写
// $(function(){
// $("ul li").html(5);
// });
//绑定事件
// $("ul li").click(function(){
// alert("6666")
// });
// //第一个绑定方式是第二个的简写方式
// $("ul li").bind("click",function(){
// alert("888")
// });
//事件委托
// $("ul").on("click","li",function(){
// alert(999);
// });
// $("button").click(function(){
// var $ele=$("");
// var len=$("ul li").length;
// $ele.html((len+1)*11);
// $("ul").append($ele);
// });
//解除事件
//$("ul li").unbind("click")
script>
html>
5.3实例之面板拖动
<html>
<head>
<title>页面拖动title>
<style type="text/css">
.div1{
border:1px solid #ddd;
width: 600px;
position: absolute;
}
.div2{
background-color: black;
height: 40px;
color: white;
}
.div3{
height: 30px;
}
style>
head>
<body>
<div class="div1">
<div id="title" class="div2">
标题
div>
<div class="div3">
内容
div>
div>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
script>
html>
5.4实例之放大镜
<html>
<head>
<title>放大镜title>
<style>
*{
margin: 0;
padding:0;
}
.outer{
height: 350px;
width: 350px;
border: dashed 5px cornflowerblue;
}
.outer .small_box{
position: relative;
}
.outer .small_box .float{
height: 175px;
width: 175px;
background-color: darkgray;
opacity: 0.4;
fill-opacity: 0.4;
position: absolute;
display: none;
}
.outer .big_box{
height: 400px;
width: 400px;
overflow: hidden;
position:absolute;
left: 360px;
top: 0px;
z-index: 1;
border: 5px solid rebeccapurple;
display: none;
}
.outer .big_box img{
position: absolute;
z-index: 5;
}
style>
head>
<body>
<div class="outer">
<div class="small_box">
<div class="float">div>
<img src="F://我鱼//1//-1c4f77f2262c4c10.jpg">
div>
<div class="big_box">
<img src="F://我鱼//1//-4dce4e221befaa35.jpg">
div>
div>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
$(function(){
$(".small_box").mouseover(function(){
$(".float").css("display","block");
$(".big_box").css("display","block")
});
$(".small_box").mouseout(function(){
$(".float").css("display","none");
$(".big_box").css("display","none")
});
$(".small_box").mousemove(function(e){
var _event=e || window.event;
var float_width=$(".float").width();
var float_height=$(".float").height();
console.log(float_height,float_width);
var float_height_half=float_height/2;
var float_width_half=float_width/2;
console.log(float_height_half,float_width_half);
var small_box_width=$(".small_box").height();
var small_box_height=$(".small_box").width();
// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
var mouse_left=_event.clientX-float_width_half;
var mouse_top=_event.clientY-float_height_half;
if(mouse_left<0){
mouse_left=0;
}else if (mouse_left>small_box_width-float_width){
mouse_left=small_box_width-float_width;
}
if(mouse_top<0){
mouse_top=0;
}else if (mouse_top>small_box_height-float_height){
mouse_top=small_box_height-float_height;
}
$(".float").css("left",mouse_left+"px");
$(".float").css("top",mouse_top+"px");
var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
console.log(percentX,percentY);
$(".big_box img").css("left", -percentX*mouse_left+"px");
$(".big_box img").css("top", -percentY*mouse_top+"px")
});
});
script>
html>