JQuery 的基础使用

最新推荐文章于 2021-09-08 22:59:05 发布

pindu002

最新推荐文章于 2021-09-08 22:59:05 发布

阅读量284

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/pindu002/article/details/71084834

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先，jQuery的jar包可以到jQuery.com官网下载

                           学习心得
一、专业课
   1.表单提交三种方式
   //1.button按钮结合submit() 提交表单
   function checkForm() {
       if(document.form1.in1.value==""){
           alert("用户名不能为空");
       }else if (document.form1.in2.value.length==0) {
           alert("密码不能为空");
       }else {
           alert("提交成功！");
           //普通的button按钮没有提交表单功能
           form1.submit();//提交表单
       }
   }

   //2.submit按钮结合onclick方法
   //与1的区别：调用方式以及具有返回值
   function checkFrom2() {
       if(document.form1.in1.value==""){
           alert("用户名不能为空");
           return false;
       }else if (document.form1.in2.value.length==0) {
           alert("密码不能为空");
           return false;
       }else {
           alert("提交成功！");
           return true;
       }
   }

   //3.submit按钮结合onsubmit()方法
   function checkFrom3() {
       if(document.form1.in1.value==""){
           alert("用户名不能为空");
           return false;
       }else if (document.form1.in2.value.length==0) {
           alert("密码不能为空");
           return false;
       }else {
           alert("提交成功！");
           return true;
       }
   }

   2.引用jquery

   //引用外部css标签
   <link>
   <script type="text/javascript" src="./libs/jquery-   1.12.4.min.js"></script>

   <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获取方式
   alert(a);
   </script>

   3.加载模式
   <html>
   <head>
   <meta charset="UTF-8">
   <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">
   /* //浏览器从上到下加载网页，为了防止空可以将此代码放到body   后面
   var obj = document.getElementById("p1");
   obj.style.color = "red"; */
   //网页加载完再执行此代码
   window.onload = function(){
       var obj = document.getElementById("p1");
       obj.style.color = "red";
   }
   </script>
   <script type="text/javascript">
   //js中加载函数
   /* window.onload = function(){
       setTimeout(function(){
           var obj = document.getElementById("p1");
           obj.style.color = "red";
           alert("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");
       alert("ok");
       }
   );
   </script>
   </head>
   <body>
   <p id="p1">我是p1</p>
   <img alt="" src="./one.jpg">
   <ul>
       <li>中国</li>
       <li>美国</li>
       <li>英国</li>
       <li>法国</li>
       <li>韩国</li>
   </ul>
   </body>
   <script type="text/javascript">
   var obj = document.getElementById("p1");
   obj.style.color = "green";
   //对象转换
   //jq对象-->js对象
   var $a = $("li");
   //第一种方式，通过数组
   var a=$a[0];
   a.style.color = "blue";
   //第二种方式,通过get方法
   var b=$a.get(2);
   b.style.color = "red";
   alert($a.size());
   //js --> jq对象
   var $obj = $(obj);
   $obj.css("color","orange").html("js对象装换为jq对象");
   </script>
   </html>

   4.库冲突
   <html>
   <head>
   <meta charset="UTF-8">
   <title>库冲突</title>
   <script type="text/javascript" src="./libs/jquery-   1.12.4.min.js"></script>
   <script type="text/javascript">
   //解决库冲突的三种方式
   //one
   //释放该$对象，其他库才能够用$代表自己库的特殊对象
   /* $.noConflict();
   alert($);//undefined，不可用
   alert(jQuery);//可用
   jQuery(document).ready(function(){
   jQuery("#d1").css("color","orange")
   }); */
   //two
   //接收一个对象,用于后续操作
   /* var jq = $.noConflict();
   jq(document).ready(
       function(){
           jq("#d1").css("color","green");
       }
   ); */
   //three
   $.noConflict();
   jQuery(document).ready(
       function($){   //后续可以继续用$
           $("#d1").css("color","blue");
       });
   </script>
   <style type="text/css">
   </style>
   </head>
   <body>
   <p id="d1">我是d1段落</p>
   </body>
   </html>

   5.基本选择器的使用
   <html>
   <head>
   <meta charset="UTF-8">
   <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","blue");
           $("li").css("color","green"); */
           //$("*").css("color","orange");   //全部变成orange
           $("#d2,#d3").css("color","yellow")
           });
   </script>
   <style type="text/css">
   </style>
   </head>
   <body>
   <p id="p1">我是p1</p>
   <p id="d1">我是d1ID选择器</p>
   <p class="c1">我是c1类选择器</p>
   <p id="d2">我是d2</p>
   <p id="d3">我是23</p>
   <ul>
       <li>深圳</li>
       <li>深圳</li>
       <li>深圳</li>
       <li>深圳</li>
   </ul>
   </body>
   </html>


   学习心得：
   1.不会有人怜悯弱者，唯有强者才能让人畏惧。

pindu002

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 的基础使用

首先，jQuery的jar包可以到jQuery.com官网下载学习心得一、专业课 1.表单提交三种方式 //1.button按钮结合submit() 提交表单 function checkForm() { if(document.form1.in1.value==""){
复制链接

扫一扫