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);


  • 相关阅读:
    适者生存还是强者生存
    写给十岁的清为
    毕业后的十年
    Python3 字符编码
    线段树模板
    F
    E
    D
    C
    B
  • 原文地址:https://www.cnblogs.com/liyiyong/p/5281338.html
Copyright © 2011-2022 走看看