首页 > 其他分享 >jQuery

jQuery

时间:2024-10-31 14:44:36浏览次数:4  
标签:jQuery color li 查找 选择符 css red

1.jQuery介绍

1.1jQuery是什么

jQuery是一个快速、简介的JavaScript框架,是prototype之后一个优秀的JavaScript代码库(或者JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,指倡导更少的代码,做更多的事情,他封装JavaScript常用的功能代码,提供一种简介的JavaScript设计模式,优化HTML文档操作、时间处理、动画设计和ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对css选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。

1.2 jQuery的版本

目前市场上 1.x 2.x 3.x 

功能的完善在 1.x

2.x的时候属于删除旧代码,去除对于旧的浏览器兼容代码

3.x的时候增加es的新特性以及调整核心代码的结构。

1.3 jQuery的引入

根本上jQuery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

常用源地址:
https://www.bootcdn.cn/


1.本地引入
<script src="jQuery.js"></script>

2.远端引入
<script scr="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

jQuery选择器

1.直接查找

1.1 基本选择器
1.2 组合选择器
1.3 属性选择器
1.4 表单选择器
1.5 筛选器
/*
//基本选择器
#id # id选择符
element # 元素选择符
.class # class选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符

//组合选择器
ancestor descendant // 包含选择符
parent > child // 父子选择符
prev + next // 下一个兄弟选择符
prev ~ siblings // 兄弟选择符


//属性选择器
[attribute=value] // 获取拥有指定数据attribute,并且置为value的元素
$('[type="checked"]')
$('[class*="xxx"]')



//表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 :
$("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected


//筛选器
:first // 从已经获取的元素集合中提取第一个元素
:even // 从已经获取的元素集合中提取下标为偶数的元素
:odd // 从已经获取的元素集合中提取下标为奇数的元素
:eq(index) // 从已经获取的元素集合中提取指定下标index对应的元素
:gt(index) // 从已经获取的元素集合中提取下标大于index对应的元素
:last // 从已经获取的元素集合中提取最后一个元素
:lt(index) // 从已经获取的元素集合中提取下标小于index对应的元素
:first-child // 从已经获取的所有元素中提取他们的第一个子元素
:last-child // 从已经获取的所有元素中提取他们的最后一个子元素
:nth-child // 从已经获取的所有元素中提取他们的指定下标的子元素
// 筛选器方法
$().first() // 从已经获取的元素集合中提取第一个元素
$().last() // 从已经获取的元素集合中提取最后一个元素
$().eq() // 从已经获取的元素集合中提取指定下标index对应的元素

*/

1.1 基本选择器

#id # id选择符
element # 元素选择符
.class # class选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符

$("#id")
$(".class")
$("element")
$(".class,p,div")
<script>
    $("#i1").css("color","red");    //id选择符
    $("p").css("color","red");      //属性选择符
    $(".c3").css("color","blue")  ;     //class选择符
    $("div.c1#q1").css("color","red");  //同时满足多个元素
    $("p,div").css("color","yellow")    //同时选中多个标签,满足其中一个则执行该代码
</script>

1.2 组合选择器

A B 	//包含选择符
parent > child		//父子选择符
prev + next		//下一个兄弟选择符
prev ~ siblings		//下面兄弟选择符

$(".outer div")
$(".outer>div")
$(".outer+div")
$(".outer~div")
<script>
    $("div div").css("color","red")     //包含选择符
    $("div > div").css("color","red")       //父子选择符
    $("#l1 + div").css("color","red")   //下一个兄弟选择符
    $("#l1 ~ div").css("color","red")      //下面所有兄弟选择符
</script>

1.3 属性选择器

[attribute=value] //获取拥有指定数据attribute,并且置为value的元素

$('[type="checked"]')
$('[class*="xxx"]')

$("[type='text']").css("border","1px solid red")
$("[class*='c']").css("color","yellow")

1.4表单选择器

$("[type='text']")----->$(":text") 注意只适用于input标签 :
$("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected

$("[type='text']").css("border","1px solid red")
$(":password").css("border","2px solid red")

1.5筛选器

/*
    $("ul li").css("color","red")   //所有ul下的li标签都获取到
    $("ul li:first").css("color","red"); //查找ul下的第一个li标签
    $("ul li:last").css("color","red"); //查找ul下的最后一个li标签
    $("ul li:even").css("color","red") ;    //查找ul下为奇数的li标签
    $("ul li:odd").css("color","red");  //查找ul下为偶数的li标签
    $("ul li:eq(2)").css("color","yellow");    //查找ul下索引等于3的li标签
    $("ul li:gt(2)").css("color","red");    //查找ul下索引大于2的li标签
    $("ul li:lt(2)").css("color","green")   //查找ul下索引小于2的li的标签

    $("li:first-child").css("color","red"); //查找父级元素中的第一个li标签
*/

1.6筛选器方法

/*
    var index =3;
    $(".outer li").eq(index).css("color","red");
    $(".outer li").last().css("color","red");
    $(".outer li").first().css("color","red");
	*/

2.导航查找

  //查找子代
  $(".c2").children("ul").css("color","red")   //查找为ul的子代
  $(".outer").children().css("color","red") //查找所有子代
  //查找后代
  $(".outer").find("ul").css("color","blue")  //查询后代

  //向下查找兄弟标签
  $(".c4 .c5").next().css("color","red")  //向下查找一个兄弟标签
  $(".c4 .c5").nextAll().css("color","red") //向下查找所有兄弟标签
  $(".c4 .c5").nextUntil(".c6").css("color","red")  //向下查找所有兄弟标签到那个兄弟标签结束

  //向上查找兄弟标签
  $(".c4 .c5").prev().css("color","red"); //向上查找一个兄弟标签
  $(".c4 .c5").prevAll().css("color","red");  //向上查找所有兄弟标签
  $(".c4 .c6").prevUntil(".c5").css("color","red") //向上查找兄弟标签到那个兄弟标签结束

  //查找所有兄弟标签
、  // $(".c4 .c5").siblings().css("color","blue");  //查找所有兄弟标签

  //查找父标签
  $(".c4 .c5").parent() //查找父亲
  $(".c4 .c5").parent().parent()  //查找父亲的父亲
  $(".c4 .c5").parents()  //查找所有的父亲
  $(".c4 .c5").parentsUntil() //查找到那一层父亲结束

jQuery和DOM对象转化

/*// jquery对象 = [dom1,dom2,...]
var $ele = $(".c3 li")
$ele.css("color","red")
// jquery对象转换dom对象 jquery对象[索引]
$ele[1].style.color="green"

// 将dom对象转换成jq对象:    $(dom)      []
dom = document.getElementById("i1")
$(dom).css("color","red")*/

标签:jQuery,color,li,查找,选择符,css,red
From: https://www.cnblogs.com/megshuai/p/18517772

相关文章

  • jQuery框架
    jQuery语法jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。基础语法:$(selector).action()美元符号定义jQuery选择符(selector)"查询"和"查找"HTML元素jQuery的action()执行对元素的操作实例:$(this).hide()-隐藏当前元素$("p").hide()-隐藏所......
  • jQuery操作(删除内容)
    删除内容:使用`remove()`方法来删除指定的元素及其所有子元素。以下是一些常见的用法示例:删除单个元素假设你有一个HTML结构如下:<divic=”content”><p>Thisisaparagraph.</p></div>//要添加一些属于想要删除的按钮你可以使用以下jQuery代码删除该段......
  • jQuery的复制内容
    1.clone()clone()方法用于复制匹配的DOM元素,并可以选择是否复制事件处理程序。语法:$(selector).clone([withDataAndEvents])//withDataAndEvents(可选):布尔值,如果为 true,则复制元素的所有数据和事件处理程序。 示例:<divid="original"><p>这是一个段落。</p></div><bu......
  • Jquery 元素点击显示隐藏,手风琴效果
    记录一下:jquery常用的手风琴效果<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docu......
  • 认识jQuery函数和对象
    ◼jQuery是一个工厂函数(别名$),调用该函数,会根据传入参数类型来返回匹配到元素的集合,一般把该集合称为jQuery对象。如果传入假值:返回一个空的集合。如果传入选择器:返回在在documnet中所匹配到元素的集合。如果传入元素:返回包含该元素的集合。如果传入HTML字符......
  • jQuery解决变量冲突
    ◼和jQuery库一样,许多JavaScript库也会使用$作为函数名或变量名。在jQuery中,$是jQuery的别名。如果我们在使用jQuery库之前,其它库已经使用了$函数或者变量,这时就会出现冲突的情况。这时我们可以通过调用jQuery中的noConflict函数来解决冲突问题。jQuery在初始化前会......
  • jQuery监听文档加载
    ◼jQuery监听document的DOMContentLoaded事件的四种方案$(document).ready(handler):deprecated$("document").ready(handler):deprecated$().ready(handler):deprecated$(handler):推荐用这种写法,其它可以使用但是不推荐//监听文档加载//方......
  • 原生js实现复选框筛选功能,jquery实现复选框筛选功能
    <div><label><inputtype="checkbox"id="not-effective"onclick="filterItems()">未生效</label><label><inputtype="checkbox"......
  • 认识jQuery
    认识jQuery◼jQuery读音为:/ˈdʒeɪkwɪəri/(简称:jQ),是一个快速、小型且功能丰富的JavaScript库,官网对jQuery的描述:使HTML文档遍历、操作、事件处理、动画和Ajax之类的事情变得更加简单。具有易于使用的API,可在多种浏览器中使用。jQuery结合多功能性和可扩展性,改......
  • jQuery 对基本选择符的运用
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <scripttype="text/javascript"src="js/jquery-3.7.1.js"></script> <script> $(document).ready(f......