1、操作属性
- 1.attr():获取某个标签属性的值,或设置某个标签属性的值
$("input[name=hobby]").attr("value", "篮球")
- 2.removeAttr():删除某个标签属性
$("#ab").removeClass("bb")
- 3.addClass():给某个标签添加class属性值
$("#mydiva").addClass("myclass")
- 4.removeClass():删除某个标签class属性值
$("input[name=hobby]").removeAttr("value")
- 5.prop():和attr()类似,区别在于prop用于属性值为Boolean类型的情况,比如多选
$("input[name=hobby]").prop("checked",true)
2、操作样式
- 获取样式 Jquery对象.css(“样式名”) 所有的样式都可以获取
- 设置样式 Jquery对象.css(“属性名”,“属性值”) 单个设置
- 设置样式 Jquery对象.css({属性名:属性值,属性名:属性值…}) 批量设置
- 注意1:如果属性名带引号 样式名可以和css一样
- 注意2:如果属性名不带引号 样式名要用驼峰命名
- 注意3:属性值是字符串形式 但是可以省略px 写成数字形式
- 注意4:可以使用累加
案例:
一个属性的设置 $("#myid").css("color","red") 多个属性 $("#myid").css({"background-color":"aqua","color":"red"}) 类选择器 $(".aa").css("color","red") 元素选择器 $("li").css("color","red") 通配符选择器 $("*").css("background-color","red") 组合选择器 $(".aa , div").css("color","red") 后代选择器 $("#myid li").css("color","red") 子代选择器 $("#myid>li").css("color","red") 过滤选择器 获取第一个li标签 $("#myid>li:first").css("color","red") 最后一个 $("#myid>li:last").css("color","red") eq(index) 根据标签的下标获取 $("#myid>li:eq(3)").css("color","red") even 获取偶数下标的标签 $("#myid li:even").css("color",'red') odd 获取奇数下标的标签 $("#myid li:odd").css("color","red")
3、each循环
- each 写法1 $(选择器/循环体).each(function(index,item){})
- each 写法2 $.each(循环,function(index,item){})
被选中的复选框的vlaue值 $("input:checkbox:checked").each(function(){ console.log($(this).val()) })
4、操作内容
- 1.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)
console.log($("#mydiva").html()) $("#mydiva").html("<h1>前随疾风前行</h1>")
- 2.text():获取某一个标签体内容(注意:该标签体不能包含子标签)
console.log($("#mydiva").text()) $("#mydiva").text("断剑重铸之日,骑士归来之时")
- 3.val():主要用户获取/设置输入框的值
$("input[name=hobby]").val("篮球") console.log($("input[name=hobby]").val())