jquery的 $(function(){ }) = $(document).ready(function(){ }) ,及页面的加载顺序

原文出处: http://zhidao.baidu.com/question/147418225.html?fr=qrl&index=0&qbl=topic_question_0

document.ready和onload的区别:
一、JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)

二、是onload,指示页面包含图片等文件在内的所有元素都加载完成。

用jQ的人很多人都是这么开始写脚本的:
  $(function(){
// do something
  }); 

其实这个就是jq ready()的简写,他等价于:

  $(document).ready(function(){
//do something
  });

或者下面这个方法,jQuer的默认参数是:“document”;

  $().ready(function(){
//do something
  });

这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况下一个页面响应加载的顺序是:
    域名解析-> 加载html-> 加载js和css ->加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
这行代码是使用 jQuery 选取页面中具有 `detail-content` 类的元素,并将其存储在一个以 `$` 开头命名的变量中。这是一种常见的编码习惯,表示该变量保存的是 jQuery 对象。 --- ### ✅ 代码解析 ```javascript const $detailContents = $('.detail-content'); ``` - `$('.detail-content')`:这是 jQuery 的选择器语法,用于查找所有类名为 `detail-content` 的 DOM 元素。 - `$detailContents`:变量名前加 `$` 是一种约定俗成的命名规范,表明这个变量保存的是一个 jQuery 对象。 - `const`:表示这是一个常量引用,不能将 `$detailContents` 重新赋值为其他对象或值(但可以修改其内容,如调用 jQuery 方法)。 --- ### 🧠 示例说明 假设你有如下 HTML 结构: ```html <div class="detail-content">内容一</div> <div class="detail-content">内容二</div> <div class="detail-content">内容三</div> ``` 执行以下 JavaScript: ```javascript const $detailContents = $('.detail-content'); // 改变所有匹配元素的文本颜色 $detailContents.css('color', 'red'); // 添加点击事件 $detailContents.on('click', function () { $(this).hide(); }); ``` 这段代码: - 将所有 `.detail-content` 元素封装为 jQuery 对象; - 设置它们的文字颜色为红色; - 绑定点击事件,点击后隐藏对应的内容。 --- ### ⚠️ 注意事项 1. **jQuery 必须已加载** 确保在执行此代码之前引入了 jQuery 库,否则会报错:`$ is not defined`。 2. **DOM 加载完成后再操作元素** 推荐将代码写在文档底部或使用 `$(document).ready()`: ```javascript $(document).ready(function () { const $detailContents = $('.detail-content'); // 操作代码 }); ``` 或简写为: ```javascript $(function () { const $detailContents = $('.detail-content'); // 操作代码 }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值