zoukankan      html  css  js  c++  java
  • jquer基础篇二

    jquery中的过滤选择器:

    1.通过标签的内容来进行过滤

    :contains(’内容关键字‘)

    例:

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


    $("p:contains('JJJ')").css("background", "red");


    });


    2.可见性选择器:

    依赖于元素是否可见作为筛选的条件

    :hidden 过滤出不可见的元素
    :visible 过滤出可见的元素

    举例:

    1. <p style="display:none">hhh</p> //隐藏
    2.
    $("input").click(function () {


    alert( $("p:hidden('hhh')").text());


    });


    3.循环遍历的方法

    jquery对象.each(function(){

    //函数体

    });

    //注意:
    visibility:hidden这种隐藏方式通过:hidden无法过滤的00
    opacity 0:透明度为0 不是隐藏

    3.属性过滤选择器:
    语法:$("基本选择器[属性名]") 过滤出制定属性的元素
    $(基本选择器["属性名=属性值"]过滤出保函制定属性并且属性值为制定的值元素

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


    $("p[title]").each(function () {


    alert($(this).text());

    });


    jquery中提供与选择器相关的一些筛选方法:

    链式操作:jquery操作的一个特色
    这些方法返回的是选择到的jquery对象的方法

    $("p[title=aaa]").each(function () {


    alert($(this).css("background","red").css("color","blue"));

    });
    方法:
    first()选中第一个元素//left();


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


    $("p").first().css("background", "red");

    });

    //注意:过滤方法主要用于链式操作(提高性能)//链式操作的好处
    end()结束当前链式操作并放回前面选择到的jquery对象

    例:

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


    $("p").first().css("background", "red").end;

    });

    1.last()/eq(index)//传入参数 等价于:eq(index)
    2.fillter(":过滤选择器")

    $("p").filter(":even").css("background", "red").end;//通过偶数进行过滤

    3.not("基本选择器/过滤选择器")方法相当于:not()

    例子:将单元格分成不同的颜色

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


    $("#zz tr").filter(":even").css("background", "red").end().filter(":odd").css("background",
    "blue");

    });

    3 根据元素之间的层次关系进行DOM筛选:
    1.对象.children() 获取当前对象的所有子元素
    不包括文本节点和空的文本节点
    一般规律:只要是用来选择多个元素的方法都可以传入参数
    2.对象.parent();直接选择上一级的元素
    //jq写入选择器的时候别忘了写#或者.还有在写按钮的时要input
    parent("参数") 选择所有的父元素
    3.兄弟元素的选择方法:
    next() 返回紧临当前对象的下一个兄弟元素
    nextAll() 获取对象后所有兄弟元素
    prev() 返回紧临上一个兄弟元素
    prevAll()返回所有的兄弟元素
    siblings()返回所有的对象元素除了当前对象自己本身


    例:
    <div>

    我是大盒子
    <div id="xz">

    我是小盒子
    <p>W</p>
    <p>j</p>

    </div>
    </div>



    <input type="button" value="测试" />
    <script type="text/javascript">
    var divd = $("#xz");
    alert( divd.children().length);


  • 相关阅读:
    关闭编辑easyui datagrid table
    sql 保留两位小数+四舍五入
    easyui DataGrid 工具类之 util js
    easyui DataGrid 工具类之 后台生成列
    easyui DataGrid 工具类之 WorkbookUtil class
    easyui DataGrid 工具类之 TableUtil class
    easyui DataGrid 工具类之 Utils class
    easyui DataGrid 工具类之 列属性class
    oracle 卸载
    “云时代架构”经典文章阅读感想七
  • 原文地址:https://www.cnblogs.com/liyiyong/p/5281338.html
Copyright © 2011-2022 走看看