jquery的学习

最新推荐文章于 2022-07-10 18:22:23 发布

星锅

最新推荐文章于 2022-07-10 18:22:23 发布

阅读量289

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/yjx568135132/article/details/77099927

版权

web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

jquery_01

01库引用

<title>库引用</title>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>

</head>
<body id="d1">
	<p>奔跑吧，兄弟</p>
</body>
<script type="text/javascript">
	//alert($);    //有对象则表示引入成功！
	alert(jQuery);
	//问题：$符号代表的是什么？  $代表的是jq的一个对象---------jQuery对象 
	
	//jQuery对象：是 jq里面最 重要的对象，所有元素以及方法的使用都是通过该对象来进行调用 
	
	//语法结构
	var obj=10;  //js变量 
	
	var $obj=20; //jq变量 
	
	alert(obj+$obj); //可以直接运算 
	
	//元素的获取
	var a = document.getElementById("d1");//js获取方式
	//内容的设置 
	a.innerHTML="我是通过js设置的内容 ！";
	//样式的设置 
	a.style.color="red";
	a.style.fontSize="50px";
	
	//a.css("backgroud","gray"); //js对象不能使用jq里面的方法 ，反之一样 
	alert(a);
	
	var $a=$("#d1"); //jq获取方式
	$a.html("我是通过jq方式设置的内容！");//设置方式 
	
	//样式的设置 
	$a.css("color","green");
	/* $a.css("fontSize","20px"); */
	$a.css("color","green").css("fontSize","35px"); //连贯写法 
	alert($a);
</script>
</html>

02加载模式

<title>加载模式</title>
<style type="text/css">
	img{
		width:250px;
		height:250px;	
	}

</style>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
 <script type="text/javascript">
 //js里面的加载函数
 /*
	window.onload = function(){
		setTimtout(function() {
       var obj = document.getElementById("p1");
       
       obj.style.color="red";
       slert("ok");
	},2000);
	}
 */
 	//jq里面的加载函数
 	/* $(document).ready(
 		function(){
 			//等页面加载完毕后需要执行的代码------ 代码包括js代码以及jq代码
 		/*	var obj = document.getElementById("p1");
 			obj.style.color = "green";
 			alert("ok");
 			var $obj=$("#p1");
 			$obj.css("color","blue");	
 		}		
 	) */
 	
</script> 
</head>
<body>
	<p id="p1">你好啊，闫建兴</p>
	<img alt="" src="IMG_0270.JPG">
	<ul>
		<li>中国</li>
		<li>美国</li>
		<li>英国</li>
		<li>法国</li>
	</ul>
</body>
 <script type="text/javascript">

       var obj = document.getElementById("p1");
       
       obj.style.color="red";
	
	   //对象转换
	   //jq对象 --->js对象
	   var $a = $("li");
	   
	   //第一种方式
	   var a = $a[0];
	   a.style.color="red";
	   
	   //第二种方式
	   var b =$a.get(2);
	   b.style.color="green";
	   
	   alert($a.size());//jq对象
	   
	   //js 对象 --〉 jq对象
	   var obj = document.getElementById("p1"); //js对象
	   
	   obj.style.color = "red";
	   
	   var $obj = $(obj); //jq对象
	   $obj.css("color","yellow").html("js对象转换后的文字");
	
</script> 
</html>

03库冲突

<title>库冲突</title>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
	//解决库冲突三种方式
	
	//第一种
	/* $.noConflict();//释放该$对象,其他的库，才能够用$代表自己库的特殊对象
	
	alert($);//undefined 不可用
	alert(jQuery); //可用 
	
	jQuery(document).ready(
		function(){
			jQuery("#d1").css("color","blue");	
			
		}		
	); */
	
	//第二种 
	/* var jq = $.noConflict();//接受一个对象，用来操作后续的juery
	jq(document).ready(
		function(){
			jq("#d1").css("color","green");			
		}			
	); */
	
	//第三种 
	/* $.noConflict();
	jQuery(document).ready(
		function($){//后续jq操作还可以用 $代表 
			$("#d1").css("color","yellow");	
		}		
	); */	
	</script>
</head>
<body>
	<p id="d1">我有一个家</p>
</body>
</html>

04基本选择器

<title>基本选择器 </title>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	//基本选择器的使用    类  标签 id 通配符  多条件 
	
	/* alert($); */
	$(document).ready(function(){
		/* $("#d3").css("color","red");
		$(".c1").css("color","red");
		$("li").css("color","red");
		$("*").css("color","green"); 
		$("*").css("color","gray");	*/
		$()
	});
	
	

</script>
</head>
<body>
	<p id="d1">id选择器</p>
	<p class="c1">类选择器</p>
	<p id="d4">类选择器</p>
	<p id="d2">类选择器</p>
	<p id="d3">类选择器</p>
	<ul>
		<li>深圳</li>
		<li id="d2">北京</li>
		<li>上海</li>
		<li>广州</li>
	
	</ul>
</body>
</html>

05表单提交的三种方式

<title>表单提交的三种方式</title>
<script type="text/javascript">
	//button按钮结合submit（）提交表单  
	function checkForm(){
		if(document.form1.in1.value==""){
			alert("用户名不能为空");
		}else if(document.form1.in2.value.length==0){
			alert("密码不能为空。。。");
		}else{
			alert("提交成功！");
			form1.sumbit();//提交表单 
		}
	}
		function checkForm2(){
			if(document.form1.in1.value==""){
				alert("用户名不能为空");
				return false;
			}else if(document.form1.in2.value.length==0){
				alert("密码不能为空。。。");
				return false;
			}else{
				alert("提交成功！");
				return true;
			}	
		}
		//区别：调用方式以及具有返回值 
		
		//submit按钮结合onsubmit(方法)
		function checkForm3(){
			if(document.form1.in1.value==""){
				alert("用户名不能为空");
				return false;
			}else if(document.form1.in2.value.length==0){
				alert("密码不能为空。。。");
				return false;
			}else{
				alert("提交成功！");
				return true;
			}	
		}
</script>
</head>
<body>
	<form action="#" name="form1" method="post" οnsubmit="return checkForm3()">
	用户名：<input type="text" name="in1"/><br>
	密 码：<input type="text" name="in2"/><br>
	<!-- <input type="button" value="提交" οnclick="checkForm()"/>	 -->
	<!-- <input type="submit" value="提交" οnclick="return checkForm2()"/> -->
	<input type="submit" value="提交"/>
	</form>
</body>
</html>