A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 郝永亮 于 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():获取和设置元素的滚动条位置

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马