jquery_01

来源：互联网发布：ubuntu 安装lnmp 编辑：程序博客网时间：2024/05/29 12:16

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();//接受一个对象，用来操作后续的jueryjq(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" onsubmit="return checkForm3()">用户名：<input type="text" name="in1"/><br>密 码：<input type="text" name="in2"/><br><!-- <input type="button" value="提交" onclick="checkForm()"/> --><!-- <input type="submit" value="提交" onclick="return checkForm2()"/> --><input type="submit" value="提交"/></form></body></html>

阅读全文

0 0