jQuery的基础用法

2021-09-23

jQuery 的工厂函数

在 jQuery 中，无论使用哪种类型的选择器都需要从一个”$”符号和一对”()”开始。

$(“div”):用于获取文档中全部的

；//对应标签内容获取
$(“#username”):用于获取文档中 ID 属性值为 username 的一个元素；//getElementById
$(“.btn_grey”):用于获取文档中使用 CSS 类名为 btn_grey 的所有元素。

基本选择器

ID 选择器

实例:在页面中添加一个 ID 属性值为 textInput 的文本输入框和一个按钮，通过单击按钮来获取文本输入框中的值。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>//引用百度的jq
<script>
$(document).ready(()=>{
    $("input[type='button']").click(()=>{
        var inputValue = $("#textInput").val();
        alert(inputValue);
    })
})
</script>

eq 与 get

获取对应标签下的第 N 个元素

<body>
  <div>人在娱乐圈</div>
  <div>空降热搜</div>
  <input type="button" value="点我有惊喜" />
</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(()=>{
    $("input[type='button']").click(()=>{
        $("div").eq(0).html("刚吃完拌面")//html和innerHTML不能换着玩
        $("div").get(1).innerHTML="黑胡椒卡喉咙"
    })
})
</script>

运行结果：按了后改字

复合选择器的使用

1 2	$("div", "span").addClass("change"); //添加所使用的css类前提是该change被提前编写ok //想要修改css类的话用.css就行

ancestor descendan 选择器

语法：$(“ul li”)
这样就调用到了

parent > child 选择器

语法:$(“form > input”)//不加空格也行

prev + next 选择器

两者都是同辈元素。
语法:$(“div + img”)

1	$("label + p").addClass("background");

添加的只是 label 标记后的单个 p 标记的 class(p 在/label 后[视频])

prev ~ siblings 选择器

两者都是同辈元素。
语法:$(“div ~ p”)
只有 div 标签之后的 p (好几个 p 连着应该都行)才会被使用(p 在/div 之后[视频])

简单过滤器

:first               匹配找到的第一个元素，它是与选择器结合使用的，如$(“tr:first”)。
:last                匹配找到的最后一个元素，它是与选择器结合使用的，如$(“tr:last”)。
:event             匹配所有指引值为偶数的元素，索引值从 0 开始计算，如$(“tr:event”)。
:odd               匹配所有指引值为奇数的元素，索引值从0开始计算，如$(“tr:odd”)。
:eq(index)       匹配一个给定索引值的元素，如$(“tr:eq(1)”)。
:gt(index)       匹配所有大于给定索引值的元素，如$(“tr:gt(0)”)。
:it(index)        匹配所有小于给定索引值的元素，如$(“tr:it(2)”)。
:header          匹配如 h1,h2,h3……之类的标题元素，如$(“:header”)。
:not(selector) 去除所有与给定选择器匹配的元素，如$(“input:not(:checked)”)。
:animated      匹配所有正在执行动画效果的元素，如$(“:animated”)