zoukankan      html  css  js  c++  java
  • JQuery基本方法介绍和使用

    1、属性

    $("p").addClass(css中定义的样式类型); 给某个元素添加样式 

    常用于表格鼠标移动效果

    $(document).ready(function(){
      //"tr:ge(0)"tr标签索引大于零的就执行
      $("tr:gt(0)").hover(function(){
      $(this).addClass("moveover");
      },function(){
        $(this).removeClass("moveover");
      });
    });


    $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map 
    $("img").attr("src","test.jpg"); 给某个元素添加属性/ 
    $("img").attr("title", function() { return this.src }); 给某个元素添加属性/ 
    $("元素名称").html(); 获得该元素内的内容(元素,文本等) 
    $("元素名称").html("<b>new stuff</b>"); 给某元素设置内容 
    $("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值 
    $("元素名称").removeClass("class") 给某元素删除指定的样式

     

    $("元素名称").text(); 获得该元素的文本 
    $("元素名称").text(value); 设置该元素的文本值为value 
    $("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 
    $("input元素名称").val(); 获取input元素的值 
    $("input元素名称").val(value); 设置input元素的值为value

     

    2、操作元素

    $("元素名称").after(content); 在匹配元素后面添加内容 
    $("元素名称").append(content); content作为元素的内容插入到该元素的后面 
    $("元素名称").appendTo(content); content后接元素 
    $("元素名称").before(content); after方法相反 
    $("元素名称").clone(布尔表达式当布尔表达式为真时,克隆元素(无参时,当作true处理) 
    $("元素名称").empty() 将该元素的内容设置为空 
    $("元素名称").insertAfter(content); 将该元素插入到content之后 
    $("元素名称").insertBefore(content); 将该元素插入到content之前 
    $("元素").prepend(content);

    content作为该元素的一部分,放到该元素的最前面 
    $("元素").prependTo(content); 将该元素作为content的一部分,放content的最前面 
    $("元素").remove(); 删除所有的指定元素 
    $("元素").remove("exp"); 删除所有含有exp的元素 
    $("元素").wrap("html"); html来包围该元素 
    $("元素").wrap(element); element来包围该元素

    3、属性过滤选择器
    $("div[id]") 匹配所有具有指定属性的元素 
    $("input[name='newsletter']") 匹配所有具有指定属性值的元素 
    $("input[name!='newsletter']") 匹配所有不具有指定属性值的元素 
    $("input[name^='news']") 匹配所有指定属性值以value开头的元素 
    $("input[name$='letter']") 匹配所有指定属性值以value结尾的元素 
    $("input[name*='man']") 匹配所有指定属性值含有value字符的元素 
    $("input[id][name$='man']") 匹配同时符合多个选择器的所有元素 


    4、子元素过滤选择器 
    $("ul li:nth-child(2)"), 
    $("ul li:nth-child(odd)"), 匹配父元素的第n个子元素 
    $("ul li:nth-child(3n + 1)")

    $("div span:first-child") 匹配父元素的第1个子元素 
    $("div span:last-child") 匹配父元素的最后1个子元素 
    $("div button:only-child") 匹配父元素的唯一1个子元素 


    5、表单元素选择器 
    $(":input") 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button 
    $(":text") 匹配所有类型为textinput元素 
    $(":password") 匹配所有类型为passwordinput元素 
    $(":radio") 匹配所有类型为radioinput元素 
    $(":checkbox") 匹配所有类型为checkboxinput元素 
    $(":submit") 匹配所有类型为submitinput元素 
    $(":image") 匹配所有类型为imageinput元素 
    $(":reset") 匹配所有类型为resetinput元素 
    $(":button") 匹配所有类型为buttoninput元素 
    $(":file") 匹配所有类型为fileinput$(":hidden") 匹配所有类型为hiddeninput元素或表单的隐藏域 


    $(document).ready(function(){
    //标签选择器
    $("button").click(function(){
    alert("标签选择器_按钮");
    });
    //id选择器
    $("#b1").click(function(){
    alert("id选择器_按钮");
    });
    //类选择器
    $(".class2").click(function(){
    alert("类选择器_按钮");
    });
    //包含选择器
    $("#b1,.class2").click(function(){
    alert("包含选择器_按钮:格式=$(#b1,class2)");
    });

    6、表单元素过滤选择器 
    $(":enabled") 匹配所有可操作的表单元素 
    $(":disabled") 匹配所有不可操作的表单元素 


    $(":checked") 匹配所有已点选的元素 

    function  batchDelManager(isFormal){//拿到选中的复选框的value
            var checkCom = $("input[name=checkCom]:checked");
            var optCom = "";
            for(var i = 0; i < checkCom.size(); i++){
                    optCom += checkCom[i].value + ":";
            }        

    $("input[name$='checkCom']").each(function () { this.checked = true; });//name名字为checkCom的复选框全部选中

    $(":checkbox").val(["cc3","cc2","cc4"]);//设置复选框中value值为多少的选中,


    $("select option:selected") 匹配所有已选择的元素

    $("#select_id").append("<option value='Value'>Text</option>"); //Select追加一个Option(下拉项) 
    $("#select_id").prepend("<option value='0'>请选择</option>"); //Select插入一个Option(第一个位置) 
    $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 
    $("#select_id option[index='0']").remove(); //删除Select中索引值为0Option(第一个) 
    $("#select_id option[value='3']").remove(); //删除SelectValue='3'Option 
    $("#select_id option[text='4']").remove(); //删除SelectText='4'Option 

     

     

    7、其他

     

    $(document).ready(function(){
    //toggle开关的方法
    $("input").toggle(function(){
    $("div").show(5000);//全部显示的时间长度为5秒,不带参数则没有延时效果
    },function(){
    $("div").hide(5000);//全部隐藏的时间长度为5秒
    });
    });

    $("#元素id").html("指定位置要添加的HTMLTest");

    $("<option value='"1"'>"+IT部+"</option>").appendTo($("#元素id"));//指定在那个下拉列表添加一个下拉选项

     $(":checkbox:checked").each(function(){

      alert($(this).val());//遍历所有复选框

    }

     

  • 相关阅读:
    友盟冲突解决com.umeng.weixin.handler.UmengWXHandler cannot be cast to com.umeng.socialize.handler.UMWXHandler
    插入mysql失败,因为java数据类型是个实体类,加上.id就好了
    app升级注意事项version
    关于ehcache缓存中eternal及timeToLiveSeconds和timeToIdleSeconds的说明
    WinFom解决最小化最大化后重绘窗口造成闪烁的问题
    Redis 发布订阅
    Redis 发布订阅
    ASPxGridView
    ASPxGridView
    C#-WebRequest 超时不起作用
  • 原文地址:https://www.cnblogs.com/laotan/p/3619155.html
Copyright © 2011-2022 走看看