基础选择器
先导入jQuery的核心文件
将jQuery 文件放在js文件夹下的导入:
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
基础选择器 Basics
ID选择器-----$("#ID属性值") 若有同名的只会获取第一个
类选择器-----$(".class属性值")
元素选择器---$("元素名/标签名")
选择所有-----$("*") 选择所有标签 ,包括HTML/CSS中的所有标签
层次选择器
1.后代选择器,ncestor descendant:
2.子代选择器,parent>child:
3.相邻选择器,prev +next,+号往下找,只找一个,找的该元素必须和选择器位置处于相邻的状态
4.同辈选择器,prev~sibling,波浪号往下找,找到 所有同辈的 指定元素
例:
<div>大伯</div>
<div id="parent">老爹
<div>大儿子
<div>大孙子</div>
<p>大孙女</p>
<div>小孙子</div>
</div>
<p>大女儿<p>外孙女</p></p>
<div>二儿子</div>
<div>三儿子</div>
</div>
<div>大叔</div>
<p>小姑</p>
<div>二叔</div>
<div>三叔</div>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript">
// 后代选择器 ncestor descendant
var houdai = $("#parent div");
console.log(houdai);
// 子代选择器 parent>child
var zidai = $("#parent>div");
console.log(zidai);
zidai.each(function(){
console.log(this);
});
// 相邻选择器 prev + next
var xl = $("#parent + p");
console.log(xl);
// 同辈选择器 prev ~ sibling
var tb = $("#parent ~ p");
console.log(tb);
其他选择器
<!--
表单选择器
$(":radio") 选择所有单选框按钮
$(":checkbox") 选择所有复选框按钮
过滤选择器
$(":checked") 选择所有选中状态的元素(单选框和复选框)
$(":checkbox:checked") 选择所有复选框被选中的元素
$(":checkbox:checked:eq(index)") 匹配被选中的选择的指定下标的元素
$(":checkbox:checked").eq(index)
$(":checked:gt(index)") 选择下标大于指定值的元素
$(":odd") 选择所有的奇数下标的元素
$(":even") 选择所有的偶数下标的元素
属性选择器
$("[属性名]") $("[name]") 选择所有设置过name属性值的元素
$("[属性名=属性值]") $("[id='myId']") 选择所有属性名等于指定属性值的元素
-->
样式
attr("class")方法:获取class属性的值,
attr("class","样式名"):升级版,里面传入一个class名称时返回此名称对应的值,若穿入第二个值则会改变原本的值(替换掉)
addClass ("样式名"),添加样式名,添加样式,原本的样式保留;如果出现相同的样式名,则以样式中后定义的为准
css()添加样式,添加具体的样式名,相当于写在style属性中的样式,样式会叠加,优先级最高
removeClass(class),删除指定样式名称
操作元素
方法 说明
html() 获取元素的 html 内容
html("html 内容") 设定元素的 html 内容
text() 获取元素的文本内容,不包含 html
text("text 内容") 设置元素的文本内容,不包含 html
val() 获取元素 value 值
val(‘值’) 设定元素的 value 值
---------------------------------------------------------------------------------
remove() 删除所选元素或指定的子元素,包括整个标签和内容一起删。
empty() 清空所选元素的内容
添加元素
方法 说明
prepend(content) 在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
$(content).appendTo(selector) 把 content 元素或内容插入 selector 元素内,默认是在尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)
注:如果被追加对象是已存在的元素,则该元素会被直接剪切到指定位置
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element 是当前的元素,此时是 dom 元素。