本帖最后由 郝永亮 于 2018-4-11 23:04 编辑
先要明白的概念
属性节点 dom对象的attributes属性被称为属性节点.属性节点中的内容在页面可以看到.属性节点中的内容一般是不修改的
属性 dom对象的其他属性被称为属性.属性名包括属性值在页面看不到,属性中的内容我们经常修改,
val("值")获取和设置的的是value属性中的值,因为属性节点中的值一般不修改,获取到的可能不是最新的,而属性中的内容我们经常修改,获取到的是最新的
特点:
1、jQuery使用同一个方法既可以当getter用又可以当setter用,而不是定义一对方法。
2、用作setter时,这些方法会给jQuery对象中的每一个元素设置值,然后返回该jQuery对象
3、用作getter时,这些方法只会查询元素集合中的第一个元素,返回单个值。如果要遍历所有元素,请使用map()
4、用作setter时,这些方法经常接受函数参数。在这种情况下,会调用该函数来计算需要设置的值。调用该函数时的this值是对应的元素,第一个参数是该元素的索引值,当前值则作为第二参数传入
设置和获取,删除普通属性attr
$("form").attr("action"); //获取第一个form元素的action属性。见特点3,如果没有该属性获取到的是undefined.该方法针对的是属性节点的操作
$("#icon").attr("src","icon.gif"); //设置src属性
$("#banner").attr({src:"banner.gif",alt:"Advertisement",width:720});//一次设置4个属性
$("a").attr("target","_blank"); //使用所有链接在新窗口打开
删除:removeAttr()
设置和获取CSS属性
$("h1").css("font-weight");//获取第一个<h1>的字体重量
$("h1").css("fontWeight");//也可以采用驼峰命名
$("div.note").css("brder","solid black 2px");//设置复合样式
$("div.note").css({backgroundColor:"red",border:"dotted black 4px"});//一次设置多个样式
删除:remove
注意事项
css()方法会将样式简单添加到该元素的style属性中。css()方法允许CSS央视名中使用连字符("background-color")或使用驼峰格式("backgroundColor")
在获取样式时,css会把数值转换成带有单位后缀的字符串返回。而在设置时会将数字转换成字符串,必要时添加"px"后缀
设置和获取CSS类
class属性值(在js里通过className访问)会被解析成为一个由空格分隔的CSS类名列表。通常,我们想要往列表中添加、删除某一项,或判断某一项是否存在列表中,而不是将该列表替换成另一个。JQUERY提供了一些便捷方法用来操作class属性
addClass()
添加类
$("h1").addClass("class1");
$("h1").addClass("class1 class2");
$("h1").addClass(function(n){
return "section"+n;
});
removeClass()
删除类
$("div").removeClass() 删除div上的所有类
$("div").removeClass("class1 class2");
$("div").removeClass("class1");
toggleClass()
当元素还没有某些类时,给元素添加这些类,反之则删除。切换CSS类.toggle:切换的意思
$("tr:odd").toggleClass("oddrow")//如果该类不存在则添加
$("h1").toggleClass("big bold");//一次切换两个类
$("h1").toggleClass("hilite",true);//类似于addClass
$("h1").toggleClass("hilite",false);/类似于removeClass
hasClass()用来判断是否存在。不如addClass,removeClass,toggleClass灵活,hasClass只接受单个类名uowei参数,并且不支持函数参数。
设置获取,删除表单属性prop
比如获取<input >标签的属性
$("").prop(“checked”);
$("").prop("checked",true);
$("").removeProp()
获取和设置HTML表单值
val()方法用来设置和获取HTML表单元素的value属性,还是可以获取和设置复选框,单选框按钮以及<select>元素的选中状态:
val("值")获取和设置的的是value属性中的值,因为属性节点中的值一般不修改,获取到的可能不是最新的,而属性中的内容我们经常修改,获取到的是最新的
$("#surname").val() //获取surname文本域的值
$("#usstate").val() //从<select>中获取单一值
$("select").val() //从<select multiple>中获取一组值
$("input:radio[name=ship]:checked").val() //获取选中的单选按钮的值
$("#email").val("Invalid email address"); //给文本域设置值
$("input:checkbox").val([]); //选中多选下拉框的选项
获取和设置元素内容
通过text(),和html(),当不带参数调用时,text()返回所有匹配元素的所有子孙文本节点的纯文本内容。当不带参数调用html()方法,它会返回第一个匹配元素的HTML内容。如果传入字符串给text()和html(),该字符串会用作该元素的纯文本或格式化的HTML文本内容,他会替换掉所有存储在的内容。包括事件也会覆盖。
获取和设置元素的位置高宽
width() height(),不加参数是获取,加参数是设置。获取到的值不带px单位,而通过css()获取到的带单位
坐标值操作:
offset():获取和设置元素的位置,相对于文档计算位置,带有left和top属性,相当于x,y坐标
$("").offset().left;//获取值
$("").offset().left = 300;//设置值
position():和offset类似,但只能用于getter,相对于其偏移父元素的距离
scrollTop()和scrollLeft():获取和设置元素的滚动条位置
|
|