jQuery

发布时间：2023-09-06 01:51责任编辑：蔡小小关键词：jQuery

jQuery是一个一个优秀的Javascript框架

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

一、导入方式

<script src="jquery-3.2.1.js"></script>

二、选择标签

基本选择器

- ID选择器 ?????????????????$("#id的值")
- 类选择器（class） ?????????$(".class的值")
- 标签选择器(html标签) ??????$("标签的名字")
- 所有标签 ?????????????????$("*")

层级选择器

- 从一个标签的子子孙孙去找 ???$("父亲 子子孙孙")
- 从一个标签的儿子里面找 ?????$("父亲>儿子标签")
- 找紧挨着的标签 ????????????$("标签+下面紧挨着的那个标签")
- 找后面所有同级的 ??????????$("标签~兄弟")

基本筛选器
- $("li:first")
- $("li:last")
- $("li:eq(2)") //索引为2
- $("li:gt(2)") //索引大于2
- $("li:lt(2)") //索引小于2
- $("li:even") //偶数
- $("li:odd") //奇数
- $("li:focus") //焦点
- $("li:not（‘‘）") //非
属性选择器
- $(‘[id="div1"]‘)

筛选器

过滤筛选器
- $("li").eq(2)
- $("li").first()
- $("ul li").hasclass("test")

查找筛选器

 $("div").children(".test") ????$("div").find(".test") ?????????????????????????????????$(".test").next() ???$(".test").nextAll() ???$(".test").nextUntil() ????????????????????????????$("div").prev() ??????$("div").prevAll() ?????$("div").prevUntil() ???????????????????????????$(".test").parent() ?$(".test").parents() ?$(".test").parentUntil() ?$("div").siblings() ????//所有兄弟标签

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>tab</title> ???<script> ??????????function tab(self){ ??????????????var index=$(self).attr("xxx"); ??????????????$("#"+index).removeClass("hide").siblings().addClass("hide"); ??????????????$(self).addClass("current").siblings().removeClass("current"); ??????????} ???</script> ???<style> ???????*{ ???????????margin: 0px; ???????????padding: 0px; ???????} ???????.tab_outer{ ???????????margin: 0px auto; ???????????width: 60%; ???????} ???????.menu{ ???????????background-color: #cccccc; ???????????/*border: 1px solid red;*/ ???????????line-height: 40px; ???????} ???????.menu li{ ???????????display: inline-block; ???????} ???????.menu a{ ???????????border-right: 1px solid red; ???????????padding: 11px; ???????} ???????.content{ ???????????background-color: tan; ???????????border: 1px solid green; ???????????height: 300px; ???????} ???????.hide{ ???????????display: none; ???????} ???????.current{ ???????????background-color: darkgray; ???????????color: yellow; ???????????border-top: solid 2px rebeccapurple; ???????} ???</style></head><body> ?????<div class="tab_outer"> ?????????<ul class="menu"> ?????????????<li xxx="c1" class="current" onclick="tab(this);">菜单一</li> ?????????????<li xxx="c2" onclick="tab(this);">菜单二</li> ?????????????<li xxx="c3" onclick="tab(this);">菜单三</li> ?????????</ul> ?????????<div class="content"> ?????????????<div id="c1">内容一</div> ?????????????<div id="c2" class="hide">内容二</div> ?????????????<div id="c3" class="hide">内容三</div> ?????????</div> ?????</div></body></html>

tab切换

三、jQuery对象

用jQuery选择器查出来的就是jQuery对象
只能使用jQuery方法

　　两者之间转换：　

$(".c1")[0] --> DOM对象
$（DOM对象）----->jQuery对象

四、对象属性

--------------------------属性$("").attr(属性名|属性值);　　　　　　//一个参数是获取属性的值，两个参数是设置属性值$("").removeAttr(属性名);$("").prop(属性名|属性值); ??????//只能获取固有属性$("").removeProp();--------------------------CSS类$("").addClass(class|fn)$("").removeClass([class|fn])--------------------------HTML代码/文本/值$("").html([val|fn])$("").text([val|fn])$("").val([val|fn|arr])---------------------------$("").css("color","red")

-------------------循环-------------
- $.each(数组/对象, function(i, v){})
- $("div").each(function(){})

------------CSS类-------------------
- addClass 添加类属性
- removeClass 移除类属性
- toggleClass 开关|切换（有就移除，没有就添加）

标签增删改查

//创建一个标签对象 ???$("<p>")//内部插入 ???A.append(B) ??????吧B添加到A的后面 ???A.appendTo(B) ????吧A添加到B的后面 ???A.prepend(B) ?????吧B添加到A的前面 ???A.prependTo(B) ???吧A添加到B的前面//外部插入 ???A.after(B) ???????吧B添加到A的后面 ???A.insertAfter(B) ?吧A添加到B的后面 ???A.before(B) ??????吧B添加到A的前面 ???A.insertBefore(B) 吧A添加到B的前面//替换 ???????A.replaceWith(B) ?--> B替换A ???A.replaceAll(B) ??--> A替换B//删除 ???$("").empty() ?内部清空 ???$("").remove([expr]) ???整体都删除//复制 ???$("").clone([Even[,deepEven]])

css操作

CSS ???????$("").css(“name”)
　　　　 ?$("").css("name","sf") ???位置 ???????$("").offset([coordinates]) ??????????//获取相对窗口的位置 ???????$("").position() ?????????????????????//获取相对已经定位的父标签的位置 ???????$("").scrollTop([val]) ???????????????//滚动条位置 ???????$("").scrollLeft([val]) ???尺寸

　　 　　height([val|fn])
 ???　　 ??- 元素的高度
 ??　　 width([val|fn])
 ???　　 ??- 元素的宽度
　　 ???innerHeight()
 ?　　 ????- 带padding的高度
 　　 ??innerWidth()
 ??　　 ???- 带padding的宽度
 ?　　　 outerHeight([soptions])
 ?　　　　 ?- 在innerHeight的基础上再加border的高度
 　　　　outerWidth([options])
 ?　　　　 ?- 在innerHeight的基础上再加border的高度

动画

基本 ??show([s,[e],[fn]]) ??hide([s,[e],[fn]]) ??toggle([s],[e],[fn])滑动 ??slideDown([s],[e],[fn]) ??slideUp([s,[e],[fn]]) ??slideToggle([s],[e],[fn])淡入淡出 ??fadeIn([s],[e],[fn]) ??fadeOut([s],[e],[fn]) ??fadeTo([[s],o,[e],[fn]]) ?????- 淡出到0.66透明度 ??fadeToggle([s,[e],[fn]]) ?????- .fadeToggle(3000, function () { ???????????alert("真没用3"); ???????});自定义animate(p,[s],[e],[fn])1.8* ??- css属性值都可以设置 ???- 图片变小（漏气）

五、事件绑定

$("").on("click", function(){})
$("").on("click",".btn-warning",function(){}) jQuery的事件委派

$("button").on("click",function () { ???????$(window).scrollTop(0);// 给一个滚动条位置 ???}); ???$(window).scroll(function () { ???????//滚动的时候做的操作 ???????if ($(window).scrollTop()>100){ ???????????$("button").removeClass("hide") ???????} ???????else{ ???????????$("button").addClass("hide") ???????} ???});

滚动条监听

jQuery

原文地址：https://www.cnblogs.com/ls-2018/p/8945051.html

jQuery

jQuery是一个一个优秀的Javascript框架

标签增删改查

知识推荐