JQuery基础_jquery 删除索引大于多少的子元素-CSDN博客

本文链接：https://blog.csdn.net/shyshyshyshy1/article/details/118604022

1、JQuery（辅助js开发的js类库）

1.1 jQuery核心函数 $()

1.1.1 传入参数为函数时

传入参数为函数时，表示页面加载完成之后，相当于window.onload = function(){}。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
    //全写为$(document).ready(function(){})
        $(function () {
            alert("传入参数为函数！");
        })
    </script>
</head>
<body>
</body>
</html>

1.1.2 传入参数为 html字符串时

根据这个字符串创建元素节点对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("<div>\n" +
                "<span>hello!</span>\n" +
                "<span>world!</span>\n" +
                "</div>").appendTo("body");
        })
    </script>
</head>
<body>
<!--    <div>-->
<!--        <span>hello!</span>-->
<!--        <span>world!</span>-->
<!--    </div>-->
</body>
</html>

1.1.3 传入参数为选择器字符串时

$("#id属性值") id选择器，根据id查询标签对象；
$(".class属性值") 类型选择器，根据class属性查询标签对象；
$(“标签名”) 标签名选择器，根据标签名查询标签对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            alert($("#div01").length);
            alert($(".divClass").length);
            alert($("div").length);
        })
    </script>
</head>
<body>
    <div class="divClass" id="div01">hello!</div>
    <div class="divClass" id="div02">world!</div>
</body>
</html>

1.1.4 当传入参数为 Dom对象时

将Dom对象包装为jQuery对象返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            var divObj = document.getElementById("div01");
            alert(divObj);
            alert($(divObj));
        })
    </script>
</head>
<body>
    <div id="div01">hello!</div>
</body>
</html>

1.2 jQuery对象的本质

是Dom对象的数组+jQuery提供的一系列功能函数。

1.2.1 jQuery对象与Dom对象的区别

由getElementById()、getElementByName() 、getElementByTagName()查询、createElement()创建出来的对象是Dom对象。
由jQuery提供的API创建的对象、通过jQuery包装的Dom对象、通过jQuery提供的API查询到的对象为jQuery对象。

1.2.2 jQuery对象与Dom对象在使用上的区别

两者间互相不能使用对方的属性和方法。

1.2.3 jQuery对象和Dom对象之间的互相转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            var divObj = document.getElementById("div01");
            alert(divObj);
            //Dom对象转jQuery对象
            alert($(divObj));
            //jQuery对象取Dom对象
            alert($(divObj)[0]);
        })
    </script>
</head>
<body>
    <div id="div01">hello!</div>
</body>
</html>

1.3 jQuery对象的选择器

1.3.1 基础选择器

$("#id属性值") id选择器，根据id查询元素；
$(".class属性值") 类型选择器，根据class属性查询元素；
$(“标签名”) 标签名选择器，根据标签名查询元素；
$("*")查询所有元素；
$(“selector1, selector2…”)将匹配到的元素合并到一个结果内。

1.3.2 层级选择器

$(“ancestor， descendant”)在给定的的祖先元素下匹配所有的后代元素；
$(“parent>child”)在给定的父元素下匹配所有的子元素；
$(“prev+next”)匹配所有紧接在prev元素后的next元素；
$(“prev~siblings”)匹配prev元素之后的所有siblings元素；

1.3.3 基本过滤选择器

：first获取匹配的第一个元素；
：last获取匹配的最后一个元素；
：not(selector)去除所有与给定选择器匹配的元素；
：even匹配所有索引值为偶数的元素，从0开始计数；
：odd匹配所有索引值为奇数的元素，从0开始计数；
：eq(index)匹配一个给定索引值的元素；
：gt(index)匹配所有大于给定索引值的元素；
：lt(index)匹配所有小于给定索引值的元素；
：header匹配如h1,h2,h3之类的标题元素。
：animated匹配所有正在执行动画效果的元素。

1.3.4 内容过滤选择器

：contains(text)匹配包含给定文本的元素；
：empty匹配所有不包含子元素或文本的空元素；
：parent匹配含有子元素或文本的元素；
：has(selector)匹配含有选择器所匹配的元素的元素。

1.3.5 属性过滤选择器

[attribute]匹配包含给定属性的元素；
[attribute = value]匹配给定的属性是某个特定值的元素；
[attribute != value]匹配所有不含有指定的属性，或者属性不等于特定值的元素；
[attribute ^= value]匹配给定的属性是以某些值开始的元素；
[attribute $= value]匹配给定的属性是以某些值结尾的元素；
[attribute *= value]匹配给定的属性是以包含某些值的元素；
[selector1][selector2][selectorN]需要同时满足多个条件时使用。

1.3.6 表单过滤选择器

：input匹配所有input、textarea、select、button元素；
：text 匹配左右单行文本框；
：password匹配左右密码框；
：radio匹配所有单选按钮
：checkbox匹配左右复选框；
：submit匹配所有提交按钮；
：reset匹配所有重置按钮；
：button匹配所有按钮；
：file匹配所有文件域；
：hidden匹配左右不可见的元素，或type="hidden"的元素。
：enable匹配所有可用元素；
：disable匹配所有不可用元素；
：checked匹配所有选中的被选中元素（一般指单选和复选，不包括select中的option）。
PS：
val（）方法可以操作表单项的value属性值，可以设置和获取；
each（）方法时jQuery对象提供的用来遍历元素的方法；

1.4.7 元素筛选

eq(index|-index)获取给定索引值的元素；
first()获取第一个元素；
last()获取最后一个元素；
filter(expr|obj|ele|fn)筛选出与指定表达式匹配的元素，多个中间用逗号分隔；
is(expr|obj|ele|fn)判断是否匹配给定的选择器，只要有一个就返回true；
has(expr|ele)保留包含特定后代的元素，去掉那些不含有指定后代的元素；
not(expr|ele|fn)删除与指定表达式匹配的元素；
children(expr)返回匹配给定选择器的子元素；
find(expr|obj|ele)返回匹配给定选择器的后代元素；
next()返回当前元素的下一个兄弟元素；
nextAll()返回当前元素后面的所有兄弟元素；
nextUntil(expr)返回当前元素到指定匹配元素为止的后面元素；
parent(expr)返回父元素；
prev(expr)返回当前元素的上一个兄弟元素；
prevAll(expr)返回当前元素前面所有的兄弟元素；
prevUntil(expr)返回当前元素到指定匹配元素为指的前面元素；
siblings(expr)返回所有兄弟元素；
add()把add匹配的选择器元素添加到当前的jQuery对象中。

1.4 jQuery的属性操作

html（）可以设置和获取起始标签和结束标签中的内容，和innerHtml一样；
text（）可以设置和获取起始标签和结束标签中的文本，和innerText一样；
val（）可以设置和获取表单项的value属性值，和dom属性value一样。$(":radio,:checkbox").val（[“radio1”,“checkbox1”,“checkbox2”]）可以批量操作单选、复选框和下拉框的选中状态。
attr（）可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等，还可以设置自定义属性的值；
prop（）可以设置和获取属性的值，只推荐操作checked、readOnly、selected、disabled等。

1.5 Dom的增删改

1.5.1 插入

内部插入

a.appendTo(b)把a插入到b子元素末尾，成为最后一个子元素；
a.prependTo(b)把a插入到b所有子元素的前面，成为第一个子元素。
外部插入
a.insertAfter(b)得到ba；
a.insertBefore(b)得到ab。

1.5.2 替换

a.replaceWith(b)用b替换掉a；
a.replaceAll(b)用a替换掉所有b。

1.5.3 删除

a.remove删除a标签；
a.empty清空a标签里的内容。

1.6 CSS样式操作

addClass()添加样式；
removeClass()删除样式；
toggleClass()有就删除，没有就添加样式；
offset()获取和设置元素的坐标。

1.7 jQuery动画

以下动画都可以添加参数：

第一个参数是动画的执行时长，以毫秒为单位；
第二个参数是动画的回调函数，即动画完成以后自动调用的函数。

1.7.1 基本动画

show()将隐藏的元素显示；
hide()将可见的元素隐藏；
toggle()可见的隐藏，不可见的显示。

1.7.2 淡入淡出动画

fadeIn()淡入，即慢慢可见；
fadeOut()淡出，即慢慢消失；
fadeTo()在指定时长内慢慢的将透明度修改到指定的值。0透明，1完全可见，0.5半透明；
fadeToggle()淡入/淡出切换。

1.8 jQuery事件操作

1.8.1 原生js与jQuery页面加载完成之后的区别

触发时间：jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好的Dom对象之后就会马上执行；原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好Dom对象，还要等标签显示时需要的内容加载完成。
触发顺序：1.jQuery页面加载完成之后执行；2.原生js的页面加载完成之后再执行。
执行的次数：原生js的页面加载完成之后，只会执行最后一次的赋值函数；jQuery的页面加载完成之后是全部把注册的function函数依次顺序全部执行。