Jquery语法基础

一、Jquery一般语法格式为：$(selector).action()

  • l  美元符号定义 jQuery （又称工厂函数）
  • l  选择器（selector）“查询”和“查找” HTML 元素
  • l  action() 执行对元素的操作

示例：

$(this).hide()            // 隐藏当前元素
$("p").hide()             // 隐藏所有段落
$("p.test").hide()    // 隐藏所有 class="test" 的段落
$("#test").hide()     // 隐藏第 id="test" 的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery的基础语法</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
           $("button").click(function(){
              //$(this).hide();
              //$("p").hide();
              //$("p.test").hide();
              $("#test").hide();
           });
       });
    </script>
  </head>
  <body>
btn</button>
    <p id="test">这是P1段落</p>
    <p class="test">这是P2段落</p>
    <p class="test">这是P3段落</p>
    <p class="test1">这是P4段落</p>
  </body>
</html>

二、jQuery 代码链式风格

a)         对于同一对象不超过3个操作，可直接写一行，添加必要注释。

b)         对同一对象的操作较多，建议每行写一个操作

<!DOCTYPE html>
<html>
  <head>
html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("button").click(function(){
              $(".div1").width(100);
              $(".div1").height(100);
              $(".div1").css({border:"1px solid black",background:"green"});
//            $(".div1").width(100).height(100).css({border:"1px solid black",background:"green"});
           });
      
       });
    </script>
  </head>
  <body>
btn</button>
    <div class="div1"></div>
  </body>
</html>

 

三、文档就绪函数：$(document).ready()

类似 window.onload，定义文档加载完后执行的函数。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

案例

<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
       alert("Hello World!");
    });
</script>
</head
<body>
    This is my HTML page.<br>
</body>
</html>

 

jquery给方法参数值 jquery函数语法格式_javascript

 

window.onload 与 $(document).ready() 的对比：

 

window.onload

$(document).ready()

执行时机

必须等网页中所有内容加载完后（包括图片）才能执行

网页中所有DOM结构绘制完后就执行

编写个数

不能编写多个
window.onload=function(){};
window.onload=function(){};

此时第二个覆盖第一个

能同时编写多个
$(document).ready(function(){}); $(document).ready(function(){});

两个函数都执行

简化写法

无

$( )

<!DOCTYPE html>
<html>
 
<head>
html</title>
   
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
   
<script type="text/javascript">
       //window.onload与$(document).ready()的区别：
       //区别一：执行时机：window.onload：等页面中的所有元素加载完成之后执行
       //$(document).ready():等页面中的dom元素加载完成之后就会执行
       
       //区别二：编写的个数:window.onload:不能编写多个，第二个要覆盖第一个的值
       //$(document).ready():可以编写多个，依次执行
       /*
window.onload=function(){
           document.getElementById("btn").onclick=function(){
              alert("Hello
World!");
           }
       }
       
       window.onload=function(){
           document.getElementById("btn").onclick=function(){
              alert("bbbbbb");
           }
       } */
       
       /*
$(document).ready(function(){
           $("#btn").click(function(){
              alert("aaaaaa");
           });
       });
       
       $(document).ready(function(){
           $("#btn").click(function(){
              alert("bbbbbb");
           });
       
       }); */
       
       //$(document).ready()简写形式：$()
       $(function(){
           alert("Hello
World!");
       });
    </script>
 
</head>
 
<body>
    
<input type="button" id="btn"
value="click">
 
</body>
</html>

 

四、jQuery 对象与 DOM 对象

DOM 对象：HTML的文档对象模型中的元素对象。可通过 javascript 的以下方法获取 

document.getElementById("test")
document.getElementsByTagName("p")

jQuery 对象：经jQuery包装后的DOM对象 

$("#test")
$("p")

jQuery 对象转成 DOM 对象

var $test = $("#test");
var test = $test[0];     //jQuery对象是一个数组，可通过索引得到DOM对象

或

var test = $test.get(0);        //用jQuery提供的get(index)方法得到DOM对象

DOM对象转jQuery对象

var test =
document.getElementById("test");
var $test = $(test);     //用jQuery的工厂方法
<!DOCTYPE html>
<html>
 
<head>
dom相互转换.html</title>
   
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
   
<script type="text/javascript">
       $(function(){
           //1 把jQuery对象转换为dom对象
           /* var
btn=$("#btn")[0];
           btn.onclick=function(){
              alert("aaaaa");
           } */
           
           //2 把dom对象转换为jQuery对象
           var btn=document.getElementById("btn");
           var $btn=$(btn);
           $btn.click(function(){
              alert("bbbb");
           });
       });
    </script>
 
</head>
 
<body>
   
<input type="button" id="btn"
value="click">
 
</body>
</html>


如果jQuery 与其它库有冲突：

可以使用jQuery.noConflict(); 让出$使用权，然后用 jQuery 而不用 $

<!DOCTYPE html>
<html>
 
<head>
jquery关键字冲突.html</title>
   
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../../js/test.js"></script>
    <script type="text/javascript">
//1.只会执行一次$()，里面的所有当做方法参数，没有起作用
       /*
$(function(){
           alert("aaaaa");
           $();
       }); */
//2. jQuery正常执行，test也正常执行
       jQuery(function(){
           alert("aaaaa");
           $();
       });
//3.完美方式
       var $j=jQuery.noConflict();
       $j(function(){
           alert("cccc");
           $();
       });
    </script>
 
</head>
</html>
被包含的test.js内容：
function
$(){
         alert("这是test.js文件中的提示信息");
}