jQuery----2.12第一次课_以下关于奇偶选择器论述正确的是-优快云博客

本文链接：https://blog.youkuaiyun.com/Rococoberry/article/details/104306746

本文全面介绍了jQuery框架，包括其简介、属性操作、选择器、子元素选择器、表单元素选择器以及文本/值操作等内容。jQuery简化了JavaScript编程，通过提供一系列封装好的功能，使开发者能够快速进行网页开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 jQuery简介

jQuery是JS封装的一个框架，用于快速开发。优点：代码少，做的多，处理浏览器之间的兼容性。
jQuery在网页里如何实现： jQuery库，有很多库，按照需求使用，不一定越新的越好，一般用于开发的 jQuery库版本有：1.9.1 3.4.1。
关于 jQuery库引入到网页中：在head与 body里都可以引入，如下：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery/jquery.js"></script>
</head>
<body>
<script src="jquery/jquery.js"></script>
</body>

只有先引入 jQuery库，才可以写 jQuery代码：先跑库，再执行相关jQuery代码。
注意： jQuery()与$()是等价的。

二 jQuery里面的属性操作

attr、prop：设置属性。可以设置单个属性，也可以设置多个属性。
二者区别： prop 设置自定义属性值，可以设置，但不会显示出来，可以通过.log获取；而attr设置的属性可以显示出来；
data：设置自定义属性：不显示但可以获取，类似于prop；
removeAttr：移除自带的属性，也可以移除自定义属性。attr 移除和添加都可以显示出来；
removeProp：不能移除添加的属性，可移除自带属性；
CSS类：
addClass 添加类：可链式操作单独添加，也可以多个一起添加，中间用空格隔开；
removeClass 移除类：不写参数就是全部移除；
toggleClass 切换类：有则删除，没有就添加。
JQ的优势：可以进行链式操作：

//JQ的链式操作
            $("input").addClass("txt").addClass("btn");
            //也可以一次添加多个类，中间用空格隔开
            $("input").addClass("txt btn file");

三 jQuery选择器

JQ加载函数类似于：浏览器的加载完成事件：window.onload，

$(document).ready(function (){
}

*：获取所有元素；

console.log($("*"));//获取所有的元素

层次选择器

+：代表下一个元素

console.log($(".li2+li"));

~：获取当前匹配元素之后的所有

console.log($(".li2~li"));

基本筛选器

first、last、not（）：代表元素的第一个、最后一个、出去第几个；
even、odd：偶数、奇数获取；
eq（index）：按照索引来获取；
gt（Index）：获取大于索引的、lt（index）：获取小于索引的；
:header：获取所有的h标签；
input:focus：获取获得焦点的元素；
:root：直接获取html；

内容选择器

内容选择器：下述空元素是指空的，没有空格没有回车的

 console.log($("div:contains('今')"));//包含某个内容
 console.log($("div:empty"));//直接获取空元素
 console.log($("ul:has(.li2)"));//匹配包含某个元素的父元素
 console.log($("div:parent"));//匹配的元素必须是父元素：不能为空

可见性：hidden、visible;
根据button元素的可见性选择：

console.log($("button:visible"));
console.log($("button:hidden"));

属性

！：表示非；
^：以什么开头；
$：以什么结尾；
*：包含什么；

console.log($("button[id]"));
            console.log($("button[id][class]"));
            console.log($("button[id='btn']"));
            console.log($("button[id='btn'][class='btn]"));
            console.log($("button[id!='btn']"));
            console.log($("button[id!='btn'][class!='btn']"));
            console.log($("button[id^='b']"));//获取的属性以什么开头
            console.log($("button[id$='n']"));//以什么结尾
            console.log($("button[id*='b']"));//包含什么

四子元素选择器

:first-child：匹配第一个子元素；
first-of-type1.9+：匹配父元素里面元素的第一个；
last-child：匹配最后一个子元素；
last-of-type1.9+：匹配父元素里面元素的最后一个；
nth-child（）：匹配第几个，括号里面是索引值，数字；
nth-last-child()1.9+：匹配第几个，括号里面是索引值，数字，从后往前；
nth-last-of-type()1.9+：后往前按类型获取标签里面的最后一个；
nth-of-type()1.9+：按类型获取标签里面的第一个；
only-child：匹配的元素必须是父元素的唯一子元素；
only-of-type1.9+*：获取父元素里面同类型标签里面只有唯一的一个标签全部获取到；

五表单元素选择器

input：匹配所有 input, textarea, select 和 button 元素；
text ：获取单行文本框的；
password ：获取密码框的；
radio ：获取单选按钮的；
checkbox ：获取复选框的；
submit：获取表单提交的；
image：获取图像信息；
reset ：获取重置按钮；
button ：获取button；
file ：获取文件路径；

表单对象属性获取

enabled ：获取可用的标签；
disabled ：获取不可用的；
checked：获取事先被选择的；
selected ：下拉菜单；

六文本 / 值

（一）

html ：获取或设置元素的html值；
text ：获取或设置元素的文本值；
val：获取或设置元素的value值；

console.log($("div").html());//获取当前元素的html值
 console.log($("div").text());//获取当前元素的text值
 console.log($("input").val());

 //设置值
 $("div").html("<p>测试html</p>");
$("div").text("<p>测试text</p>");//不会自动解析标签
 $("input").val("你好");//设置元素的value值

（二） css() 操作元素css样式

获取或者设置元素的css，参数是获取的css的样式名称，如：

console.log($("button").css("border"));//获取border样式

不能获取多个样式那么css如何设置多个样式？

$("button").css({
                color:"blue",
                backgroundColor:"red",
                borderWidth:"10px"
            });

设置多个css的时候样式名称要规范，如上，css样式名称的书写，第二个单词大写；

（三）位置

offset() 返回值是一个对象 {left:0,top:0}；

参数是设置的偏移设置offset 自动添加相对定位，如：

$("button").offset({left:100,top:100});

position 相对于当前的父元素的偏移返回值{left:0,top:0}；

（四）滚动距方法

获取或设置滚动条的距离，可以设置网页刷新无效网页重新打开是有效的。设置的时候不带像素单位

$(window).scrollTop(100);
$(window).scrollLeft(300);
console.log($(window).scrollTop());
console.log($(window).scrollLeft());