zoukankan      html  css  js  c++  java
  • jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。
    实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用一些别人封装好的js库来辅助我们的工作,jQuery就是这些辅助库中的一员。

    常用选择器

    选择器说明
    element $('标签名'),$('a')选取页面上的所有a标签,返回类型是DOM元素数组
    class $('.类名'),$('.cls')选取页面上class属性为cls的标签,返回类型是DOM元素数组
    id $('#value'),选取页面上id=value的标签
      $('[name]'),选取带有name属性的标签,返回类型是DOM元素数组
      $('[name="tag"]'),选取name=tag的标签,返回类型是DOM元素数组
    attribute $('[name!="tag"]'),选取name不等于tag的标签,返回类型是DOM元素数组
      $('[href=".jpg"]'),选取所有href属性值以 ".jpg" 结尾的标签,返回类型是DOM元素数组

    :说明
    :hidden $("label:hidden"),所有隐藏的label元素,返回类型是DOM元素数组
    :visible $("lable:visible"),所有可见的label元素,返回类型是DOM元素数组
    :first $("p:first"),选择页面上的第一个p元素
    :last $("p:last"),选择页面上的最后一个p元素
    :even $("tr:even"),选取页面上索引为偶数的tr元素,返回类型是DOM元素数组
    :odd $("tr:odd"),选取页面上索引为奇数的tr元素,返回类型是DOM元素数组
    :not() $("input:not(:empty)"),所有不为空的 input 元素

    input      说明
    :input         选取页面上的所有input元素,返回类型是DOM元素数组
    :type         $(":text")等价于$('input[type=text]'),选取页面中所有type="text"的input元素。input常用type值有text,radio,checkbox,text,submit,password等。
    选择器的综合使用
    //操作多种标签
    $('p,div,input').attr('name','multi');
    
    // 一个标签使用多个样式类
    <div class='main-title ng-binding ng-scope'></div>
    $('.main-title.ng-binding.ng-scope');
    
    //选取被选中的radiobutton
    $(':radio[name=""]:checked');
    或
    $(':radio:checked');//选取页面上所有被选中的radiobutton
    
    //选取class属性值是style的p标签
    $('p.style');
    
    //选取div所有子元素中的p标签
    $('div p');
    或
    $('div>p').;
    
    //获取值是★的td标签
    $('td:contains("★")')
    
    //选择id='table'的标签中的第一个tr标签
    $('#table tr:first');
    
    //选取id='table'标签中的索引为奇数且没有使用类名为'last'的所有tr标签
    //且为选择的元素添加even类
    $('#table tr:odd:not(.last)').addClass('even');
    
    //对id='table'标签中的索引大于0小于3的所有tr标签使用类名为'three'的样式
    $('#table tr:gt(0):lt(3)').addClass('three');
    
    //表单
    $("#form1 :enabled");//选取id为form1的表单内所有启用的元素
    $("#form1:enabled");//选取id为form1的已启用的表单,注意这里#form1和:enabled之间没有空格,有空格表示选取子元素
    $("#form1 :disabled");//选取id为form1的表单内所有禁用的元素
    View Code

    常用方法

    jQuery的方法只有jQuery对象才可以调用,DOM对象不能调用。

    DOM对象和jQuery对象的相互转换

    //DOM转jQuery
    var win=$(window);//将window转换为jQuery对象
    //jQuery对象win转DOM对象
    win.get[0];
    //
    win[0];
    样式属性说明
    attr() $('#key').attr('id'),获取id属性值;$('#key').attr('name','tag'),设置name属性值为tag,$('#key').attr('id',''),将id属性值设为默认值
    removeAttr 删除属性,删除的属性不再占用内存资源,在源代码中看不到
    css() $('#key').css('color','red'),设置id=key的标签文本颜色为红色
    addClass('className') 给元素添加样式
    removeClass('className') 移除样式
    toggleClass('className') 启用或关闭样式
    内容操作说明
    text() 针对非input使用,text()获取元素中的文本,text('str')设置元素文本为str
    html() 和text类似,不同之处是html()可以使用html样式,$('p').html('<b>p</b>'),p标签上显示粗体字母p
    val() 针对input使用,val()获取元素中的value属性值,value('str')设置元素value属性值为str
    load() 发送AJAX请求,重新获取标签要呈现的内容$('#lessonList').empty().load('/Lesson/UnionSearch/conditions?' + conditions);
    元素操作说明
    hide() 隐藏元素
    show() 显示元素
    $('<p id="pTag"></p>') 创建p元素
    append() 向元素末尾添加子元素
    appendTo() 将元素添加到指定的元素末尾
    children('selector') 获取标签的所有子元素(不包括子元素的子元素),selector表示选择器,可省略
    find('selector') 根据selector获取元素的所有子元素(包括子元素的子元素),selector不可省略
    each() 遍历元素数组,例:$('p').each(function(){$(this).text('p');});

    结语

    以上这些是我在开发过程常用到的一些选择器和方法,在此做个总结以备后续查询使用。
    最后说一点,同一个jQuery方法,可能会因为jQuery版本的不同而产生不同的效果。

    版权声明

    本文为作者原创,版权归作者雪飞鸿所有。 转载必须保留文章的完整性,且在页面明显位置处标明原文链接

    如有问题, 请发送邮件和作者联系。

  • 相关阅读:
    Angular Universal 学习笔记
    SAP Spartacus 如何获得当前渲染页面的 CMS 元数据
    Angular 服务器端渲染的学习笔记(二)
    Angular 服务器端渲染的学习笔记(一)
    第三方外部 Saas提供商如何跟使用 SAP 系统的客户进行对接接口集成
    如何从 SAP Spartacus Product Detail 页面,找到其 Angular 实现 Component 的位置
    具备自动刷新功能的 SAP ABAP ALV 报表
    C++学习目录
    c--条件编译
    c--文件读写--二进制
  • 原文地址:https://www.cnblogs.com/Cwj-XFH/p/6114547.html
Copyright © 2011-2022 走看看