JS六（jQuery）_js6 jq-CSDN博客

本文链接：https://blog.csdn.net/weixin_46628546/article/details/107727723

本文详细介绍了jQuery的核心概念，包括jQuery的简介、特点和工作原理。接着，阐述了如何引入jQuery，以及jQuery的基本规则，如使用$选择元素。重点讲解了jQuery的选择器，包括基本选择器、层级选择器和属性选择器。此外，还讨论了jQuery在DOM操作上的应用，如属性、内容和样式的操作，以及元素的移动、创建、复制和删除。最后，提到了jQuery的动画效果，如显示、隐藏、滑动和淡入淡出等。

摘要由CSDN通过智能技术生成

jQuery入门

初识jQuery

1.jQuery简介

jQuery是一个兼容多浏览器的JavaScript框架。可以使用户方便地处理HTML、事件，实现动画效果，并且为网站提供方便的Ajax交互。

2.jQuery特点

具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

3.jQuery工作原理

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

引入jQuery

1.先引入jquery 用的是js的引入方式

<script src="jquery路径"></script>

在学习中可以使用开发版，代码未进行压缩，是可读的
生产版，是压缩后的，用于生产环境的版本，去掉了所有的不影响使用的代码、空格、换行等，保证了jQuery文件的最小。

jQuery基本规则

jquery会提供一个对象叫 $，它有个别名叫　jquery
Jquery 使用$去获得我们需要用到的元素 $(‘选择器’) 把得到的元素称之为jq对象；
Jq提供的所有的方法只能由jq对象调用 jq对象.jq方法();

1.jQuery 选择器

基本选择器

标签选择器（元素选择器）
语法： $(“html标签名”) 获得所标签名称的元素
id选择器
语法： $("#id的属性值") 获得id属性值匹配的元素
类选择器
语法： $(".class的属性值") 指定的class属性值匹配的元素
并集选择器：
语法： $("选择器1,选择器2…"取多个选择器选中的元素之和
全部选择器
语法： $("*") 获取此页面中的所有元素

层级选择器

后代选择器
语法： $("A B ") 选择A元素所有B元素
子选择器
语法： $(“A > B”) 选择A元素所有直接子元素B
亲弟弟选择器
语法： $("A + B ") 选择紧接在之后同级B元素
弟弟选择器
语法： $(“A ~ B”) 选择A元素所有同级B元素
属性选择器
属性名称选择器
语法： $(“A[属性名]”) 包含指的选择器
属性选择器
语法： $(“A[属性名=‘值’]”) 定属性等于指定值的选择器
可选关系运算符：
!= :属性值不等于该值
^= :属性值以该值开头
$= :属性值以该值结尾
*= :属性值中包含该值
复合属性选择器
语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器,必须都符合

JQuery操作DOM

1.属性操作

使用attr()
获取: 对象.attr(“属性名”) //返回当前值，底层使用的是getAttribute
注意：此种方式不能获取value属性的数据，使用对象名.val()进行获取
修改：对象.attr(“属性名”,“属性值”);
删除：removeAttr(“属性名”) ：删除该属值
使用prop()
使用方法同attr()一致，底层是property
attr和prop区别
如果操作的是元素的固有属性，则建议使prop，某些特定属性attr获取不到
如果操作的是元素自定义的属性，则建议使attr

2.内容操作

获取：
1. html(): 获取元素内的标签体内容，调用的innerHTML
2. text(): 获取元素的标签体纯文本内容底层调用的innerText
3. val()：获取元素的value属性值
修改：
1. html(“新的内容”): 新的内容会将原容覆盖，HTML标签会被解析执行
2. text(“新的内容”): 新的内容会将原容覆盖，HTML标签不会被解析执行
3. val(“新的内容”)：设置元素的value值

3.样式操作

1、使用css()
对象.css(“属性名”) //返回当前属性的式值
对象.css(“属性名”,“属性值”) //增加、修元素的样式
对象.css({“样式名”:“样式值”,“样式名”:“式值”……})//使用json传参，提升代码书写率。
2、使用addClass()
对象.addClass(“类选择器名”) //追加个类样式
对象.removeClass(“类选择器名”) //删一个指定的类样式
对象.toggleClass(“类选择器名”): //切class属性
toggleClass(“one”):
判断如果元素对象上存在class=“one”，则将属性值one删除掉。如果元素对象上不存在class=“one”，则添加

4.获取元素

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
选择表达式可以是CSS选择器：

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass&