本文已参加「新人创作礼」活动,一起开启掘金创作之路。
哈喽大家好,这里是颜颜颜yan_的掘金博客~
个人主页:颜颜颜yan_
❀欢迎关注👀点赞👍收藏❤留言🖊
还请大家多多指教吖~
前言
什么是jQuery?jQuery是一个快速、简洁的JavaScript库,其设计宗旨是“write less,do more”,倡导用更少的代码,做更多的事情。通过这段时间的学习,我感觉jQuery是一个“语法糖”,就像是包在糖果外面的包装,让js看起来更好看。
jQuery基本概念
jQuery的特点
jQuery是一个轻量级的脚本,其代码非常小巧。语法简洁易懂,学习速度快,文档丰富。支持CSS1~ CSS3定义的属性和选择器。跨浏览器,支持的浏览器包括IE6~IE11和FireFox、Chrome等。实现了JavaScript脚本和HTML代码的分离,便于后期编辑和维护。插件丰富,可以通过插件扩展更多功能。
获取jQuery
jQuery的官方网站:jquery.com(可能无法访问)
jQuery的中文网站是:jQuery API 中文文档 | jQuery 中文网
jQuery下载网址,这里可以下载jQuery的所有版本:jQuery CDN
使用jQuery
引入jQuery
先创建一个文件夹,下载jQuery,然后使用script标签引入jQuery。
< script src="jquery-3.3.1.min.js">< /script>
jQuery书写
简写形式:
$(function() { // 页面DOM加载后执行的代码});
完整形式:
$(document).ready(function() {
// 页面DOM加载完成后执行的代码
});
jQuery中的加载事件
| 对比项 | window.onload | $(document).ready() |
|---|---|---|
| 执行时机 | 必须等待网页中的所有内容加载完成后才能执行 | 网页中的所有DOM绘制完成后就执行,可能关联内容并未加载完成 |
| 编写个数 | 不能编写多个 | 能编写多个,依次执行 |
| 简化写法 | 无 | $0 |
jQuery对象
jQuery对象的表达方法有两种,可以使用$符号,也可以使用jQuery。
// 使用“$”
$(function () {
});
// 使用“jQuery”
jQuery(function () {
});
jQuery对象的静态方法
console.log($("div")); // 创建div元素的jQuery对象
console.log($.trim(" a ")); // 利用trim()方法去掉字符串两端的空白字符
DOM对象不能使用jQuery方法hide()来隐藏匹配的元素,但可以使用display来隐藏。
DOM对象和jQuery对象可以相互转换:
jQuery对象转换为DOM对象的方法
从jQuery对象中取出DOM对象,取出对象后就可以用DOM对象的方式来操作元素了。
方法一:$("div")[0];
方法二:$("div").get(0);
DOM对象转换为jQuery对象的方法
先获取DOM对象,var myDiv = document.querySelector('div');
然后进行转换,var div = $(myDiv);
总结
以上就是本期的学习内容啦~