JQuery笔记(基础)

最新推荐文章于 2023-05-02 10:41:25 发布

Ma_programmer

最新推荐文章于 2023-05-02 10:41:25 发布

阅读量452

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/ma_programmer/article/details/120281627

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、引入及使用

1. jQuery的兼容性引入方式

//在head中使用条件注释

!--<![ endif]-->

<!--[if lte IE 8]>

<![endif]-->

2. jQuery的使用

jQuery入口：

$(document).ready(function (){

//自己的代码

})

简写$(function(){

//自己的代码

})

$(document).ready和window.onload的区别：

ready 表示页面中DOM加载完毕后触发，load 表示事件页面中所有的一切加载完毕后触发

3. jQuery DOM对象

使用jQuery选择器获取的对象,不是原生的DOM对象,称之为 jQuery dom对象
jQuery dom对象本质上是由原生dom对象组成的集合
原生dom转为 jquery dom $(原生dom对象)

$(box).css("border", "2px solid red");

jquery dom转为原生dom使用[ ]指定下标

$box[0].style.backgroundColor="yellow";

4. jQuery全局变量

全局对象 jQuery别名是$
$的参数如果是dom对象,把该对象转为 jquery dom

$(box).css("border","2px solid red");

$的参数如果是字符串,作为jQuery的选择器

$("#box").css("border", "2px solid red");

$的参数如果是字符串,并以<开头，以>结尾,会创建一个新的元素(jquery对象)

$("<div>").html("创建一个div标签").appendTo("body")

二、jQuery选择器(没有优先级)

1. 基本选择器

· ID选择器 "#IDName"

· CLASS选择器 ".classname"

· 标签名选择器 "tagName"

· 组合选择器 "li.item"

· 全局选择器 "*"

· 多元素选择器 "selector1,selector2,selector3"

2. 层级选择器

· 后代选择器：$("ul li")

· 子元素选择器：$("ul > li")

· 相邻兄弟元素选择器：$("div + p")

· 同父元素选择器：$("div ~ p") <div> 元素同级的所有 <p> 元素

3. 筛选选择器

冒号前有限制的元素集合，也可以用于冒号前无限制的

· $("li: first")： // 第一个<li>元素

· $("li: last")： //最后一个<li>元素

· $("li: eq(index)")： // 第index个<li>元素

· $("li: gt(index)")： //大于index的<li>元素

· $("li: lt(index)")： //小于index的<li>元素

· $("li: odd")： //奇数<li>元素

· $("li: even")： //偶数<li>元素

· $("li: not(选择器)")： //除了...之外的<li>元素

· $("li: lang(语言)")： //选择使用某种预言的那个<li>元素

.....

冒号前无限制元素集合，相当于*

· $(":first")： //相当于 *: first

· $(":header")： //筛选有标题的

· $(":animated")： //筛选正在执行动画的

· $(":focus")： //筛选已经获取焦点的元素 <input type=”text” autofocus >

· $(":root")： //文档的根元素，就一个

· $(":target")： //筛选已获取锚点的元素

.....

4. 内容选择器

· $(":contains(text)")： //筛选出包含text内容的元素

· $(":has(条件)")： //筛选出后代元素满足条件的元素，例li :has(“.item”)

· $(":empty")： //筛选出不能有内容，也不能有子元素的元素

· $(":parent")： //匹配所有含有子元素或者文本的父元素

.....

5. 可见性选择器

· $(":hidden")： //筛选出隐藏的元素

· $(":visible")： //筛选出可见的元素

6. 属性选择器

· 元素[attrname="value"]//元素的属性等于value的那个例$( "img[alt='abc']")

· 元素[attrname !="value"] //元素的属性不等于value的那个

· 元素[attrname ^="value"] //元素的属性值以value开头的那个

· 元素[attrname $="value"] //元素的属性值以value结尾的那个

· 元素[attrname *="value"] //元素的属性值包含value的那个

· 元素[attrname ] //筛选元素有attrname属性的那个

· 元素[attrname="value"][attrname ][attrname ] //筛选满足多个条件的那个

7. 子元素选择器

*-child和*-of-type的区别：

*-child：筛选的是其父元素下某子元素的集合，不管元素的类型是否相同。比如：

<ul>

</ul>

$( "li :nth-child(2)") //因为li 兄弟元素集合中的第二个是p标签，所以找不到。

*-of-type：筛选的是某限制条件集合中兄弟元素中相同类型的元素

上边例子中的结果就是<li>3</li>

*-child和*-of-type都有相同的五项选择器：

· $("p :first-child")： //兄弟元素中的第一个

· $("p :last-child")： //兄弟元素中的倒数第一个

· $("p :nth-child(index)")： //兄弟元素中的第index个，数的时候从1开始

· $("p :nth-last-child(index)")： //兄弟元素中的倒数第index个，数的时候从1开始

· $("p :only-child")： //没有兄弟元素的那个

· $("p :first-of-type")： //兄弟元素中相同类型的第一个

· $("p :last-of-type")： //兄弟元素中相同类型的倒数第一个

· $("p :nth-of-type(index)")： //兄弟元素中相同类型的第index个，数的时候从1开始

· $("p :nth-last-of-type(index)")： //兄弟元素中相同类型的倒数第index个，数的时候从1开始

· $("p :only-of-type")： //没有相同类型兄弟元素的那个

8.表单选择器

· $(":input")： //所有的表单控件( input textarea select button...)

· $(":text/password/radio/checkbox/file/reset")： //根据input的type值

· $(":submit")： //所有具有提交功能的按钮( button input: submit)

· $(":button")： //button元素 input:button

9.表单对象选择器

· $(":enabled")： //筛选可用的标签

· $(":disabled")： //筛选不可用的标签

· $(":checked")： //筛选单选框和复选框中被选中的标签

· $(":selected")： //筛选select中被选中的那个option

10. 混淆选择器

· $.escapeSelector(selector) //className或IDName是有特殊符号的

例：<div class="box id="#item"></div>

$("#"+$.escapeSelector("#item")) //实现字符串拼接

三、jQuery属性与样式

1. 属性

attr(attrName , [attrValue]) // 获取/修改/添加所有属性(自定义和内置的)
prop(attrName , [attrvalue]) // 获取/修改/添加HTML元素内置属性

PS：如果是对集合的操作，修改属性会将集合的所有元素的属性都修改，获取属性只会获取到集合的第一个元素的属性值

removeAttr(attrName) // 删除属性
removeProp(attrName) // 并不能删除HTML元素上的属性

2. CSS类

addClass(classname) // 添加一个class值
hasClass(classname) // 判断是否有class值，返回true/false
removeClass(classname) // 删除一个class值
toggleClass(classname) // 切换一个class值，有就删除，没有就添加

3. HTML代码/文本/值

html("需要添加的值，没有就是获取当前值") // 设置或获取元素里面的html代码类似于 innerHTML
text("需要添加的值，没有就是获取当前值") // 设置或获取元素里面的文本内容类似于 innerText
val("需要添加的值，没有就是获取当前值") // 设置或获取表单控件里的值

4. CSS操作

// 获取元素的css属性值(计算css属性)

$("#box").css( "border");

$("#box").css("height" );

// 设置css属性的值

可连续设置

$("#box").css("width","500px").css("height","200px");

可用对象参数设置

$("#box").css({

"width": "400px",

"background-color": "#f5f5f5",

"color": "green"

})

5. 位置

获取位置

$(".box").offset(); // 得到的是一个对象

$(".box").offset().left

$(".box").offset().top

$(".box").position() // 得到的是一个对象

$(".box").position().left

$(".box").position().top

PS：offset() 和position()的区别：

offset()获取的是该元素距页面top和left的距离；offset()可以改变元素位置；position()获取的是该元素距最近一个定位祖先元素的top和left的距离；position()是只读的，不可以改变元素的位置。

改变位置

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

scrollLeft/scroolTop 滚动距离

$("#box").scrollLeft($("#box").scrollLeft()+ 100);

$("#box").scroolTop($("#box").scroolTop()+ 100);

6. 尺寸

width() / height() // 元素内容的尺寸
innerWidth() / innerHeight() // 元素content+padding
outerWidth() / outerHeight() // 元素content+padding+border

PS：加参数就可以设置元素尺寸的大小，不加参数就是获取元素的尺寸

四、jQuery筛选操作

1. 过滤操作

first() // 第一个元素

$(".my-list li").first().css("border-color","red");

last() // 最后一个元素

$(".my-list li").last().css("border-color","red");

eq(index) // 第index个元素

$(".my-list li").eq(1).css("border-color","red");

not(选择器) // 除“选择器”之外的其他元素

$(".my-list li").not(":first").css("background-color", "yellow");

filter(选择器) // 满足“选择器”要求的元素和not相反

$(".my-list li").filter(".item").css("background-color","pink");

slice(开始位置，结束位置) // 截取从开始位置到结束位置之间的元素，不包括结束位置，结束位置为选填，不填默认截取到最后

$(".my-list li").slice(1,3).css("background-color","green");

has() // 筛选出后代元素满足条件的那个元素

$(".my-list li").has(".item").css("background-color","pink");

2. 查找(选择器可选填)

获取子元素系列

children([选择器]) // 选择该元素的子元素

$("#firstList").children("li").css("border","5px solid red");

find(选择器) // 选择该元素的后代元素

$("#firstList").find("li").css("border","5px solid red");

获取父元素和祖先元素系列

parent([选择器]) // 选择该元素的父元素

$("#myitem").parent("ul").css("border","5px solid red");

parents([选择器]) // 选择该元素的祖先元素

$("#myitem").parents("ul").css("border","5px solid red");

parentsUntil([选择器]) // 获取选择器以下的祖先元素的集合

$("#myitem").parentsUntil("body").css("border","5px solid red");

offsetParent() // 获取第一个定位的祖先元素

$("#myitem").offsetParent().css("border","5px solid red");

获取兄弟元素系列

next() // 获取该元素的下一个兄弟元素

$("#myitem").next().css("border","5px solid red");

nextAll([选择器]) // 获取该元素的后面的所有兄弟元素

$("#myitem").nextAll("li").css("border","5px solid red");

nextUntil([选择器]) // 获取该元素的后面的所有兄弟元素中“选择器”之前的兄弟元素集合。

$("#myitem").nextUntil("p").css("border","5px solid red");

prev() // 获取该元素的上一个兄弟元素

$("#myitem").prev().css("border","5px solid red");

prevAll([选择器]) // 获取该元素的前面的所有兄弟元素

$("#myitem").prev("p").css("border","5px solid red");

prevUntil([选择器]) // 获取该元素的前面的所有兄弟元素中“选择器”之后的兄弟元素集合。

$("#myitem").prevUntil(".Odiv").css("border","5px solid red");

siblings() // 选择该元素的所有的兄弟元素集合

$("#myitem").siblings(".Odiv").css("border","5px solid red");

closest([选择器]) // 选择自身以及祖先元素中满足“选择器”条件的那个

$("#myitem").closest("ul").css("border","5px solid red");

3. 串联

add(选择器) // 把选中的元素加入当前集合

$("#myList").find("li").add("p").css("background-color","pink");

addBack() // 把调用该方法的元素加入当前集合

$("#myList").find("li").addBack().css("background-color","pink"); //返回li+#myList

end() //返回最后一次破坏性操作之前的DOM

$("#myList").find("li").end("p").css("background-color","pink"); //返回的就是#myList

contents() // 返回所有子节点的集合(元素，文本，注释等)

$("#box").contents().css("background-color","pink");

4. jQuery DOM对象操作

each(遍历的对象，function(索引, 数组的成员){..}) //遍历

$("#myList li").each(function(index, ele){

console.log(index,ele);

ele.innerHTML+="喜欢我";

$(ele).append("爱我");

})

map() // 遍历，返回新的集合

$("#myList li").map(function(index, ele){

return $(ele).html();

})

length // 集合中元素的数量

console.log($("#myList li").length);

index() // 返回该元素在父元素中的索引位置

console.log($("#myList li: last"). index());

$("#myList 1i").click(function(){

alert($(this).index));

})

get([index]) // 返回集合指定索引的dom对象，还可以把jquery dom集合转为纯数组(没参数)

$("#myList li").get(1) = $("#myList li")[1]

$("#myList li").map(function(index, ele){

return $(ele).html();

}).get() // 将li中的内容转为数组。

is(选择器) // 判断该jquery dom是否满足某个条件返回布尔值

$("#myList li").is(":hidden");

Ma_programmer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery笔记(基础)

一、引入及使用jQuery的兼容性引入方式//在head中使用条件注释<script src="../jquery-3.3.1.min.js"></script>!--<![ endif]--><!--[if lte IE 8]><script src="./jquery-1.12.4.min.js"></script><![endif]--
复制链接

扫一扫