jQuery操作一

表单对象选择器 

$("input:enabled") // 所有可用表单元素
$("input:disbaled") // 所有禁用表单元素
$("input:checked") // 所有选中的表单元素 -- 重点
$("option:selected") // 被选中的下拉框元素 -- 重点

筛选器方法

$("li").first() // 元素集合中的第一个
$("li").last() // 元素集合中的最后一个
$("div").next() // div的下一个兄弟元素
$("div").prev() // div的上一个兄弟元素
$("div").nextAll() // div后面的所有兄弟元素
$("div").prevAll() // div前面的所有兄弟元素
$("div").parent() // div的父元素
$("div").parents() // div的所有直系祖宗元素
$("div").eq(数字) // 指定下标的div元素
$("div").find(选择器) // div后代中的的指定元素
$("div").siblings() // div的所有兄弟元素
$("div").children() // div下的所有子元素

属性操作

设置属性:

$("div").prop(属性名,属性值);

获取属性:

$("div").prop(属性名);

设置自定义属性:

$("div").attr(属性名,属性值);

获取自定义属性:

$("div").attr(属性名);

遍历伪数组的方法:

each(function(i,v){
    //i表示遍历的下标
    //v表示遍历的每个元素
})

 

删除属性:

$("div").removeProp(属性名);$("div").removeAttr(属性名); // 删除自定义属性

样式操作

设置样式:

$("div").css(css属性名,值); // 设置一个样式
$("div").css({ // 设置多个样式
    css属性名:值,
    css属性名:值
})

获取样式:

$("div").css(css属性名);

类名操作

$("div").addClass(类名); // 添加类名
$("div").removeClass(类名); // 删除类名
$("div").toggleClass(类名); // 在添加和删除之间切换
$("div").hasClass(类名); // 判断元素是否有这个类名,有是true,没有是false

补充知识点:

$(this).index() // index方法是获取元素的下标
$("li").index(3) // 将li标签的index下标设置为3

元素内容操作

$("div").text(); // 获取元素内容 === 相当于 div.innerText
$("div").text("盒子"); // 设置元素内容 === 相当于 div.innerText = "盒子"
$("div").html(); // 获取元素代标签的内容 === 相当于 div.innerHTML
$("div").html("<b>文字</b>"); // 设置元素带标签的内容 === 相当于 div.innerHTML = "<b>文字</b>"
$("input").val(); // 获取表单元素的值 === 相当于 input.value
$("input").val("请输入用户名"); // 设置表单元素的内容 === 相当于 input.value = "请输入用户名"

 

posted @ 2022-06-07 22:00  减淡  阅读(31)  评论(0)    收藏  举报