zoukankan      html  css  js  c++  java
  • jquery用法第二波

    过滤器

    属性过滤选择器:

    $("div[id]")选取有id属性的<div>

    $(#id)

    $("div[title=test]")选取title属性为“test”的<div>JQuery中没有对getElementsByName进行封装,用$("input[name=abc]")

    $("div[title!=test]")选取title属性不为“test”的<div>

    还可以选择开头、结束、包含等,条件还可以复合。(*

    表单对象选择器(过滤器):

    $("input:enabled")选取idform1的表单内所有启用的元素

    $("input:disabled")选取idform1的表单内所有禁用的元素

    $("input:checked")选取所有选中的元素(RadioCheckBox

    $("select option:selected")选取所有选中的选项元素(下拉列表)

    相对定位

    $(select,queryContext) 例子:         //$("td",$("#mytr"))是相对该行tr下的搜有td             $("td",$("#mytr")).css("background","green");

    例子

            $(function () {

                $('tr').click(function () {

                    $('td', 'table tr').css('backgroundColor', '');

                    $('td:even', $(this)).css('backgroundColor', 'red');

                    $('td:odd', $(this)).css('backgroundColor', 'yellow');

                })

            });

    Jquerydom操作

    1、使用html()方法读取或者设置元素的innerHTML

    Alert$(‘#btn’).html();

    $(‘#btn’).html(‘hello’);

    2、使用text()方法读取或者设置元素的innerText

    同上

    3、使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。

    Alert(‘#img1.attr(‘src’);

    $(‘#btn1’).attr(‘href’,’http;//www.baidu.com’)

    Attr也可以添加样式

    4、使用removeAttr(href")删除属性。删除的属性在源代码中看不到,这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份

    动态创建dom结点

    使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到其他节点(元素)中:

            var link = $("<a href='http://www.baidu.com'>百度</a>");

            $("div:first").append(link);

    $()创建的就是一个jQuery对象,可以完全进行操作

    var link = $("<a href='http://www.baidu.com'>百度</a>");

    link.text("百毒");

    $("div:first").append(link);

    父元素.append(子元素)方法.将 C对象 追加到 A对象中 用来在元素的内部末尾追加一个子元素。 创建出的元素没有append到界面之前是无法用选择器找到的,就像数据没有insert到数据库之前是无法select出来的。

    子元素.appendTo(父元素)。将 对象移到 对象中。 $("#select1 option:selected").remove().appendTo($("#select2")) ;

          $("#select1 option:selected").appendTo($("#select2")) ;

    复制和替换节点

    clone(): 克隆匹配的 DOM 元素返回值为克隆后的副本但此时复制的新节点不具有任何行为.

    clone(true): 复制元素的同时也复制元素中的的事件 

    <button>保存</button>

    <p>段落</p>

     $("button").click(function(){

       alert("点击按钮");

     });

      //克隆节点,不克隆事件

      $("button").clone().appendTo("p"); 

      //克隆节点,克隆事件

      $("button").clone(true).appendTo("p");

    replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素

    replaceAll(): 颠倒了的 replaceWith() 方法.

    注意若在替换之前已经在元素上绑定了事件替换后原先绑定的事件会与原先的元素一起消失

    //<p>段落</p>

    //方式一

    $("p").replaceWith("<button>登陆</button>");

    //方式二

    $("<button>登陆</button>").replaceAll("p");

    attr(): 获取属性和设置属性 相当于 dom的: setAttribute   getAttribute

    当为该方法传递一个参数时即为某元素的获取指定属性

    当为该方法传递两个参数时即为某元素设置指定属性的值

    jQuery 中有很多方法都是一个函数实现获取和设置: attr(), html(), text(), val(), height(), width(), css() .

    removeAttr(): 删除指定元素的指定属性

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法提高 P0404
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    Java实现 蓝桥杯VIP 算法训练 排列问题
    关于模态/非模态对话框不响应菜单的UPDATE_COMMAND_UI消息(对对WM_INITMENUPOPUP消息的处理)
  • 原文地址:https://www.cnblogs.com/zhendiao/p/4356754.html
Copyright © 2011-2022 走看看