jquery 的基本语法架构

Original 2019-05-27 19:30:09 270
abstract:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery导入与代码架构</title></head><body> &nb

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jQuery导入与代码架构</title>
</head>
<body>
   <script src="static/js/jquery-3.4.1.js"></script>
   <script>
// jQuery 和 $
console.log( $ ); // 返回一个函数
console.log( jQuery ); // 返回一个函数
console.log( $ === jQuery); // true

       // jQuery中的方法分为二类
// 1. 静态方法, 直接通过 $ 调用,例如: $.ajax(), $.trim()
console.log('   admin   '.length); // 11
console.log($.trim('  admin    ').length); // 5

       // 2. 实例方法, 定义在jQuery.prototype, 即定义在它的原型对象,需要通过它的实例调用
console.log($.prototype); // 查看定义在$原型对象上的,被所有实例所共享的方法
$('body').append($('<h2>Hello jQuery</h2>')).css('color', 'red');
// append(), css()就是定义在$.prototype上的方法, 需要通过jQuery对象的实例来方法

// 代码的基本架构: html文档准备就绪之后,就立即执行ready中的回调函数中的代码
$(document).ready(function (){
// ...
});
// 还可以进一步简化, 功能是一样的, 以后咱们就使用这种语法了
$(function () {
//...
})
</script>
</body>
</html>

Correcting teacher:天蓬老师Correction time:2019-05-28 16:55:45
Teacher's summary:如果你的jquery在在js代码代码之前加载的, 也可以不使用这种结构. <script src="jqueyr.js"></script> <script> 可以直接写jQ代码了, 不必$(function () {}} </script>

Release Notes

Popular Entries