jQuery01-jQuery的简单使用

小云很优秀

已于 2024-01-04 17:23:03 修改

阅读量242

点赞数

分类专栏： Java 笔记知识点总结 jQuery 文章标签： jquery

于 2020-05-09 00:05:57 首次发布

本文链接：https://blog.csdn.net/fine_Ning/article/details/106009533

版权

Java 笔记知识点总结同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

jQuery简介

jQuery 是一个优秀的 Javascript 框架。是轻量级的 JS 库，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。是免费、开源的。兼容多浏览器的 Javascript 库，核心理念是 write less，do more（写得更少，做得更多）。

版本介绍

jQuery1.x：经典版本，兼容 IE6，7，8。

jQuery2.0：改进版本，及后续版本将不再支持 IE6，7，8 浏览器。

jQuery 能干什么

jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 Ajax 交互。

jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。

jQuery 文件介绍

jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。

jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用。

以上两个版本都可以从 jquery.com 中下载。

jQuery引入

拷贝 jQuery 文件到项目中

引入 jQuery

引入 jQuery 的标签应该放在使用 jQuery 之前

<script type="text/javascript" src="/static/js/jQuery-1.11/jquery-1.11.3.min.js"></script>

验证引入jQuery
```
<script type="text/javascript">
	alert($);
</script>
```
若控制台出现 ReferenceError:$ is not defined 这样的错误，证明引入 jQuery 失败。

区分 DOM 对象 jQuery 对象两者, 千万不要混用

通过 jQuery 方法获取的页面元素，都是 jQuery 对象。
jQuery 对象其实就是对 DOM 对象进行了包装，增强相关了方法，让开发者使用起来更加便利。
虽然 jQuery 对象包装了 DOM 对象但是两种不能混用，各位可以理解为 jQuery 对象与 DOM 对象是两个不类型的对象，但是我们调用 jQuery 对象的方法，事实上底层代码还是操作的是 DOM 对象。

$与jQuery

$ 表示 jQuery对象，即 $ === jQuery。

jQuery对象与DOM对象之间转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/jquery-1.11.3.min.js"></script>
    <script>
        window.onload = function(){
            var btn = document.getElementById('btn');
            console.log(btn); // DOM对象

            var $btn = $('#btn');
            console.log($btn); // jquery对象

            // dom对象转成jQuery对象
            console.log($(btn));
            // jquery对象转成dom对象
            console.log($btn.get(0));

            console.log($ === jQuery);
        }
    </script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>

使用 jQuery 找页面元素(选择器)

$(‘#id属性值’)

用法：$(“#myDiv”) 返回值单个元素的组成的集合。说明：这个就是直接选择 html 中的 id=“myDiv”。
$(‘元素名’)

返回值元素集合。说明：element 的英文翻译过来是“元素”，所以 element 其实就是 HTML 已经定义的标签元素，例如 div，input，a 等等。
$(‘.class属性值’)

用法：$(”.myClass“) 返回值元素集合。说明：这个标签是直接选择 HTML 代码中 class=”myClass” 的元素或元素组（因为在同一 HTML 页面中 class 是可以存在多个同样值的元素）。
$(‘[属性名=属性值]’)
$(‘:selected’)

使用 jQuery 给元素绑定事件

jQuery对象.事件方法名(匿名函数) // 触发事件就会执行这个函数
$(匿名函数) // 页面加载完执行这个函数

$(function () { // 页面加载完执行这个函数
	$('#append').click(function () { // 触发事件就会执行这个函数
		console.log(1);
	});
});

使用 jQuery 操作页面元素

css 方法针对 style 属性

jQuery对象.css(‘样式名’[, ‘样式值’]) // 无值就获取, 有值设置
val 方法针对 value 属性

jQuery对象.val([值]) // 无值就获取, 有值设置
prop 方法针对 checked selected 属性

jQuery对象.prop(‘checked|selected’[, true|false]) // 无值就获取, 有值设置
addClass 方法 removeClass 方法, 针对 class 属性

jQuery对象.addClass(‘class属性值’)

jQuery对象.removeClass(‘class属性值’)
data 方法, 针对 data-开头的属性, 获取, 若值是 JSON 格式, 自动转成 JS 对象

jQuery对象.data(‘data-后面剩下属性名’)
attr 方法针对除上面以外的属性

jQuery对象.attr(‘属性名’[, ‘属性值’]) // 无值就获取, 有值设置

jQuery对象.size()
jQuery对象.html([标签中间的内容])	// 无参数就获取, 有参数设置
jQuery对象.text([标签中间的内容])       // 无参数就获取, 有参数设置

jQuery对象.append(子元素)
jQuery对象.after(弟弟元素)
jQuery对象.empty()		// 断子绝孙
jQuery对象.remove|detach()	// 自杀,儿子孙子没了

jQuery对象.each(匿名函数) // 遍历jQuery对象, 没遍历一次执行这个函数, 定义几个参数取决需求 arguments
$.inArray(元素值, 数组)   // 返回该元素在数组中的索引, 若不存在返回 -1

小云很优秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery01-jQuery的简单使用

jQuery简介jQuery 是一个优秀的 Javascript 框架。是轻量级的 JS 库，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。是免费、开源的。兼容多浏览器的 Javascript 库，核心理念是 write less，do more（写得更少，做得更多）。版本介绍jQuery1.x：经典版本，兼容 IE6，7，8。jQuery2.0：改进版本，及后续版本将不再支持 IE6，7，8 浏览器。jQuer
复制链接

扫一扫