web前端学习笔记——Day10

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量161 收藏
点赞数 1
分类专栏： web前端学习笔记 文章标签： 前端 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43338468/article/details/90692952
版权

四、操作元素（属性，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：举例
<!DOCTYPE html>
<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>hello</p>
	</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())//<p>hello</p>
	//console.log($("#d1").text())//hello
	//console.log($("#d1").html("<h1>wzq</h1>"))
	//将里面的值修改为wzq
	//console.log($("#d1").text("<h1>wzq</h1>"))
	//将里面的文本修改为<h1>wzq</h1>
	//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)

<!DOCTYPE html>
<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>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </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>

循环

<!DOCTYPE html>
<html>
<head>
	<title>jquery的循环</title>
</head>
<body>
	<p>11111</p>
	<p>22222</p>
	<p>33333</p>
</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<arr.length;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>

实例之模态对话框

<!DOCTYPE html>
<html>
<head>
	<title>模tai对话框jQuery</title>
	<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>Hello</b>");//放在后面
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");//放在前面
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入（插入兄弟标签）

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");//放在下面
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");//放在上面
    $("").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：举例：
<!DOCTYPE html>
<html>
<head>
	<title>文档处理</title>
</head>
<body>
	<div class="c1">
		<p>ppp</p>
	</div>
	<button>add</button>
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$("button").click(function(){

		//内部添加标签(子标签)append在后面添加,prepend在前面添加

		//$(".c1").append("<h1>wzq</h1>")
		//添加一个h1标签，内容为wzq

		 //var $ele=$("<h1></h1>");//创建一个标签，也可写为<h1>
		 //$ele.html("hello")//创建标签的文本
		 //$ele.css("color","red")//创建标签的样式
		// $(".c1").append($ele)//将创建的标签添加

		//$ele.appendTo(".c1")


		//$(".c1").prepend($ele);

		//$ele.prependTo(".c1")	



		//外部添加(兄弟标签)after和before

		// var $ele=$("<h1></h1>");//创建一个标签，也可写为<h1>
		// $ele.html("hello")//创建标签的文本
		// $ele.css("color","red")//创建标签的样式

		// $(".c1").after($ele)//下面添加兄弟标签
		// $ele.insertAfter(".c1")
		// $(".c1").before($ele)//上面添加兄弟标签
		// $ele.insertBefore(".c1")



		//替换
		// var $ele=$("<h1></h1>");//创建一个标签，也可写为<h1>
		// $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>

实例之复制样式条

<!DOCTYPE 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：举例：
<!DOCTYPE html>
<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滑轮滚动事件和返回顶部

<!DOCTYPE html>
<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>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		<h1>wzq</h1>
		
	</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('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
        //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)

<!DOCTYPE html>
<html>
<head>
	<title>事件</title>
</head>
<body>
	<ul>
		<li>11</li>
		<li>22</li>
		<li>33</li>
		<li>44</li>
		<li>55</li>
	</ul>
	<button>add</button>
</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=$("<li>");
	// 		var len=$("ul li").length;
	// 		$ele.html((len+1)*11);
	// 		$("ul").append($ele);	
	// });

	//解除事件
	//$("ul li").unbind("click")
</script>
</html>

5.3实例之面板拖动

<!DOCTYPE html>
<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实例之放大镜

<!DOCTYPE html>
<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>
小小鱼@✔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端学习笔记——Day5
qq_43338468的博客
05-08 168
七、css的float属性（最重要） 先来了解一下block元素和inline元素在文档流中的排列方式。 ​ block元素通常被实现为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； ​ inline元素不会独占一行，多个相邻的行内元素会排在同一行里，直到一行排列...
web前端学习笔记——Day2
qq_43338468的博客
05-07 164
六、表单标签form ​ 表单用于向服务器传输数据。 ​ 表单能够包含input元素；比如文本字段、复选框、单选框、提交按钮等。 ​ 表单还可以包含textarea、select、fieldset和label元素。 1、表单属性 ​ HTML表单用于接收不同类型的用户输入，用户提交表单时1向服务器传输数据，从而实现用户与web服务器的交互。表单标签，要提交的所有内容都应该在该标签中。 ​ acti...
web前端学习笔记——Day4
qq_43338468的博客
05-08 157
五、css的常用属性 1、颜色属性 1、color:red;直接颜色的英文 2、color:#ffee33;十六进制表示 3、color:rgb(255,0,0);rgb三原色表示，取值0~255 4、color:rgba(255,0,0,0.5);a表示透明度 2、字体属性 1、font-size:50px/50%/larger (大小) 2、font-family:'lucida Brig...
web前端学习笔记——Day11
qq_43338468的博客
05-30 287
六、动画效果 6.1显示隐藏 hide show toggle三个函数方法 <!DOCTYPE html> <html> <head> <title>显示隐藏</title> </head> <body> <p>hello</p> <button id="hide">...
web前端学习笔记——Day7
qq_43338468的博客
05-12 249
六、JavaScript的循环与异常 try{ //这段代码从上往下运行，其中任何一个语句可抛出异常改代码块就结束运行 } catch (e){ //如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向error对象或者其他抛出的对象 } finally{ //无论try代码是否有异常抛出（甚至是try代码块中有retu...
web前端学习笔记——Day8
qq_43338468的博客
05-12 242
十五、js的history对象和location对象 1、History对象 History对象属性 ​ History对象包括用户（在浏览器窗口中）访问过的URL。 ​ History对象是window对象的一部分，可通过window.history属性对其进行访问 length 返回浏览器历史列表中的URL数量。 History对象方法 back() 加载history列表中的前一个URL...
web前端学习笔记——Day6(js)
qq_43338468的博客
05-10 295
一、JavaScript的引入方式 {#1直接编写 <script> alert("hello") </script> } {#2导入js文件 <script src="路径+文件名.js"></script> } 一般情况下习惯于放在</body>和</html>之间，这样不会存在当要找标签...
web前端学习笔记——Day1(html)
qq_43338468的博客
05-07 455
heda标签 meta ​ meat标签的组成：meat标签共有两个属性，它们分别是http—equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 ​ 1、name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 <meta name='keywords' conten...
web前端学习笔记——Day3(css)
qq_43338468的博客
05-08 1160
css：层叠样式表，用来控制网页数据的表现，可以使用网页的表现与数据内容分离 一、css的四种引入方式 1、行内式 ​ 行内式是在标记的style属性中设定css样式。 <p style="background-color:rebeccapurple">hello</p> 2、嵌入式 嵌入式是将css样式集中写在网页的head标签对的style标签对中。格式如下： &lt...
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
note:前端学习笔记——https
03-08
本前端学习笔记主要探讨HTTPS的工作原理、重要性以及如何在项目中应用它。 首先，理解HTTPS的基本概念至关重要。HTTPS是HTTP（超文本传输协议）与SSL/TLS（Secure Sockets Layer/Transport Layer Security）的结合...
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 181
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 928
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 83
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 69
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值