JQuery 学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

wu_bangbang

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量195

点赞数

分类专栏：笔记文章标签： jquery sublime

本文链接：https://blog.csdn.net/wu_bangbang/article/details/61624145

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

$ (this) $1" p. intro") $1" .intro") *intro") li:first") .head" HTML Ffiß class="intro" Ffiß class="intro" "intro" "intro" < div> ref class="head"

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

JQuery HTML 就是通过jquery 对原先写好的html样式进行修改，，，和js一样的感觉，

JQuery 遍历感觉和之前学的数据结构中的树的遍历一样通过已知节点来找我们需要的节点然后对其进行样式的改变。

jquery 看到这儿，我自己感觉就是还是通过元素选那择器对元素进行css的改变。

jquery 的动画效果用css3 也是可以实现的。

贴一下自己学习时候敲的demo。网页就不展示了，，，动态图不好贴，想看效果的同学可以把我的demo粘贴到自己的sublime text 上在浏览器中打开。如果没有的话可以点击下方链接我百度云里面有。

链接：http://pan.baidu.com/s/1kV4Z49L 密码：gmyd

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery</title>
	<script src="E:/web/jquery/jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#hide").click(function(){
			$("#p1").hide();
		});
		$("#show").click(function(){
			$("#p1").show();
		});
	  
	        $("#button1").click(function(){
		    $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(3000);
        });
	    $("#button2").click(function(){
	    	$("#div4").fadeOut();
	    	$("#div5").fadeOut("slow");
	    	$("#div6").fadeOut(3000);
	    });
	    $("#button3").click(function(){
	    	$("#div7").fadeToggle();
	    	$("#div8").fadeToggle(5000);
	    	$("#div9").fadeToggle("slow");
	    });
	    $("#button4").click(function(){
            $("#div10").fadeTo("slow",0.15);
   			$("#div11").fadeTo("slow",0.4);
    		$("#div12").fadeTo("slow",0.7);
        });
	    $(".flip").click(function(){
            $(".panel").slideToggle("slow");
  		});

  		$("#button5").click(function(){
   		 var div=$(".div1");
   			    div.animate({height:'300px',opacity:'0.4'},"slow");
   				div.animate({width:'300px',opacity:'0.8'},"slow");
   				div.animate({fontSize:'3em'},"slow");
    			div.animate({height:'100px',opacity:'0.4'},"slow");
    			div.animate({fontSize:'1em'},"slow");
   				div.animate({width:'100px',opacity:'0.8'},"slow");
        });
 		$("#flip").click(function(){
    			$("#panel").slideDown(5000);
  		});
  		$("#stop").click(function(){
    			$("#panel").stop();
 		});





	});



	</script>
    <style type="text/css"> 
       div.panel,p.flip
   {
       	margin:0px;
       	padding:5px;
		text-align:center;
		background:#e5eecc;
		border:solid 1px #c3c3c3;
	}
		div.panel
	{
		height:120px;
		display:none;
	}
	#div13{
		margin-top: 116px;
	}
	#panel,#flip
	{
		padding:5px;
		text-align:center;
		background-color:#e5eecc;
		border:solid 1px #c3c3c3;
	}
	#panel
	{
		padding:50px;
		display:none;
	}
</style>
</head>
<body>
	<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>


<p>演示带有不同参数的 fadeIn() 方法。</p>
<button id="button1">点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>


<p>演示带有不同参数的 fadeOut() 方法。</p>
<button id="button2">点击这里，使三个矩形淡出</button>
<br><br>
<div id="div4" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div5" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div6" style="width:80px;height:80px;background-color:blue;"></div>


<p>演示带有不同参数的 fadeToggle() 方法</p>
<button id="button3">点击这里，使三个矩形淡出淡入</button>
<br><br>
<div id="div7" style="width:80px;height:80px;background-color:red;" ></div>
<br>
<div id="div8" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div9" style="width:80px;height:80px;background-color:blue;"></div>


<p>演示带有不同参数的 fadeTo() 方法。</p>
<button id="button4">点击这里，使三个矩形淡出</button>
<br><br>
<div id="div10" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div11" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div12" style="width:80px;height:80px;background-color:blue;"></div>

<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>



<button id="button5">开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div class="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">QWQ</div>

<div id="div13">
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>
</div>





</body>
</html>

wu_bangbang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 学习笔记

我们的实例中的所有 jQuery函数位于一个 document ready函数中：$(document).ready(function(){--- jQuery functions go here----});这是为了防止文档在完全加载（就绪）之前运行 jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：试
复制链接

扫一扫