• jQuery的一些常用的方法(转载)


    操作元素的样式

    主要包括以下几种方式:
    $("#msg").css("background"); //返回元素的背景颜色
    $("#msg").css("background","#ccc") //设定元素背景为灰色
    $("#msg").height(300);//
    $("#msg").width("200"); //设定宽高
    $("#msg").css({ color: "red", background: "blue" }); //以名值对的形式设定样式
    $("#msg").addClass("select"); //为元素增加名称为select的class
    $("#msg").removeClass("select"); //删除元素名称为select的class
    $("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
    显示/隐藏元素
    jQuery("#TagName").hide();
    jQuery("#TagName").show();
    jQuery(".TagName").css("display","none");
    jQuery(".TagName").css("display","");
    取得第一个匹配元素的属性值(如果元素没有相应属性,则返回 undefined )
    jQuery("#tagName").attr("class") 或 jQuery("#tagname").attr("className");
    jQuery("#checkName").attr("checked",true); // 选中checkBox
    jQuery("SELECT#TagName").attr("disabled", "disabled"); // 将某个元素设置失效
    val()与text()的区别
    text()方法是取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
    获取span,div ,p之类才用text()或html()方法。
    例如:
    <div>wahaha</div>
    jQuery("div").text(); // 将得到文本"wahaha"
    单行文本<input type="text" ...>不能用text()方法获得值,必须用val()方法。
    val()方法是获得第一个匹配元素的当前值。
    例:
    <input type="text" value="a" />
    <input type="text" value=" b"/>
    <input type ="text" value= "cc"/>
    <select>
    <option>aaa</option>
    <option selected="selected">bbb</option>
    <option>ccc</option>
    </select>
    jQuery("input").val();
    jQuery("select").val();
    将得到:第一个匹配元素的值“wahaha" 和"bbb"
    获取一组checbox/radio被选中项的值
    <input name="ckTagName" type="checkbox" checked="true" value="nn"/>
    jQuery("input[@name=ckTagName][@checked]").val()
    获取一组checkbox被选中项的个数
    jQuery(":checkbox[name='checkItems']:checked").length;
    或通过class获取
    jQuery(".pItem:checkbox:checked").length;
    设置radio单选组的第二个选项为当前选中值
    jQuery("input[@name=items]").get(1).checked = true;
    获取select被选中项的文本
    jQuery("select[@name=selcTagName] option[@selected]").text();
    获取Select被选中项的Value值
    jQuery("select[@name=selcTagName] option[@selected]").val();
    设置Select下拉框选项的第二个元素为默认值
    jQuery("#selectItems")[0].selectedIndex = 1;
    索引 eq()、get()、Index()
    eq(pos)
    说明:减少匹配对象 到一个单独得dom元素
    参数:pos (Number): 期望限制的索引,从0 开始
    例子:
    未执行jQuery前:
    <p>This is just a test.</p>
    <p>So is this</p>
    <a href="http://gaohaixian.blog.163.com/blog/#" id="test" onClick="jq()">
    jQuery</a>jQuery代码及功能:
    function jq(){
    alert($("p").eq(1).html())
    }
    运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
    get() get(num)
    说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
    参数:get (Number): 期望限制的索引,从0 开始
    例子:
    未执行jQuery前:
    <p>This is just a test.</p>
    <p>So is this</p>
    <a href="http://gaohaixian.blog.163.com/blog/#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($("p").get(1).innerHTML);
    }
    运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
    注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
    index(obj)
    说明:返回对象索引
    参数:obj (Object): 要查找的对象
    例子:
    未执行jQuery前:
    <div id="test1"></div>
    <div id="test2"></div>
    <a href="http://gaohaixian.blog.163.com/blog/#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($("div").index(document.getElementByIdx('test1')));
    alert($("div").index(document.getElementByIdx('test2')));
    }
    运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
    size() Length
    说明:当前匹配对象的数量,两者等价
    例子:
    未执行jQuery前:
    <img src="http://gaohaixian.blog.163.com/blog/test1.jpg"/>
    <img src="http://gaohaixian.blog.163.com/blog/test2.jpg"/>
    <a href="http://gaohaixian.blog.163.com/blog/#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($("img").length);
    }
    运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
    JQuery选择器
    (1)层级:
    选择一[空格]选择二 表示选一内合符条件二的所有元素
    选择一[>]选择二 表示选一内合符条件二的第一个元素
    选择一[+]选择二 表示紧接选一符条件二的元素 next
    选择一[~]选择二 表示选一后符条件二的所有元素 siblings
    (2)运算符
    :animated 动画元素

    :eq(index) 索引位置,如:$("div:eq(1)"

    :even 偶数元素

    dd 奇数元素

    :first 第一个

    :gt(index) 大于索引的所有元素

    :lt(index) 小于索引的所有元素

    :header H1、H2... 这些标题元素

    :last 最后一个

    :not(Selector) 排除

    :contains(string) 选择的对象内容里包含

    :empty 选择的对象内容为空

    :has(Selector) 含有
    :parent 与empty相反
    :first-child
    :last-child
    :nth-child(index) 第几个
    nly-child 唯一的子元素

    表单
    :text :checkbox :radio :image :file :submit :reset :password :button

    表单状态
    :checked :disabled :enabled :selected

    可见性
    :hidden :visible

    属性及其运算符
    [属性名称] 匹配包含给定属性的元素
    [att=value] 等同上面
    [att*=value] 模糊匹配
    [att!=value] 不能是这个值
    [att$=value] 结尾是这个值
    [att^=value] 开头是这个值
    [att1][att2][att3]... 匹配多个属性条件中的一个
  • 相关阅读:
    第07组 Alpha冲刺 (2/6)
    第07组Alpha冲刺(1/6)
    第四次作业
    面试题练习
    SpringMVC访问静态资源
    MyBatis基础
    Spring注解和jdk注解
    自动代理生成器
    aspect xml
    Spring-案例
  • 原文地址:https://www.cnblogs.com/webqiand/p/4602829.html
Copyright © 2020-2023  润新知