• jQuery 方法


    遍历-祖先:向上查找DOM树,以查找元素的祖先
    parent():返回被选元素的直接父元素,只会向上一级对DOM进行遍历
    parents():返回被选元素的所有祖先元素,会一路向上到元素的根节点
    parentsUntil():返回介于两个给定元素的所有祖先

    操作元素ul的直接父元素
    $("ul").parent().css({"color":"red",'border':"2px solid red"})

    操作元素ul的所有祖先元素
    $("ul").parents().css({"color":"red",'border':"2px solid red"});

    用可选参数进行过滤对祖先元素进行搜索
    $("li").parents("ul").css({"color":"red",'border':"2px solid red"});

    返回span和div之间的所有祖先
    $("span").parentsUntil("div").css({"color":"red",'border':"2px solid red"});


    遍历-后代:向下查找DOM树,以查找元素的后代
    children():返回被选元素的所有直接子元素,之后向下一级遍历DOM树
    find():向下查找所有的指定查找的后代元素,直至根节点


    对直接子元素进行操作:
    $("ul").children().css({"color":"red",'border':"2px solid red"});

    使用过滤参数过滤对子元素的操作,操作类名为deng的所有li元素
    $("ul").children("li.deng").css({"color":"red",'border':"2px solid red"});

    操作div后代中所有的span元素
    $("div").find("span").css({"color":"red",'border':"2px solid red"});

    操作div所有的后代元素
    $("div").find("*").css({"color":"red",'border':"2px solid red"});


    遍历-同胞:具有相同的父元素,在DOM中水平遍历
    1.siblings():返回被选元素的所有同胞元素,siblings意为兄弟姐妹的意思
    操作li元素的所有同胞元素
    $("li").siblings().css({"color":"red",'border':"2px solid red"});
    也可以使用参数对特定元素进行设置操作,操作ol的同胞元素p
    $("ol").siblings("p").css({"color":"red",'border':"2px solid red"});

    2.next():返回被选元素的下一个同胞元素
    $("ol").next().css({"color":"red",'border':"2px solid red"});

    3.nextAll():返回被选元素的所有跟随同胞元素
    $("ul").nextAll().css({"color":"red",'border':"2px solid red"});

    4.nextUnitl():返回介于两个给定参数之间的所有跟随的同胞元素
    操作元素ul和p之间的所有同胞元素
    $("ul").nextUntil("p").css({"color":"red",'border':"2px solid red"});

    5.prev(),prevAll(),prevUntil()进行前向同胞遍历,方法同next(),只是方向不同


    遍历-过滤:
    三个基本的过滤方法:first(),last(),eq(),基于其在一组元素中的位置来选择一个特定的元素
    其它过滤方法:filter()和not()允许您选取匹配或不匹配某项指定标准的元素

    1.first():返回被选元素的首个元素
    操作div的第一个p元素
    $("div p").first().css({"color":"red",'border':"2px solid red"});

    2.last():返回被选元素的最后一个元素
    操作div元素中的最后一个p元素
    $("div p").last().css({"color":"red",'border':"2px solid red"});

    3.eq():返回被选元素中带有指定索引号的元素,索引号从0开始
    操作元素p的索引为1的元素
    $("p").eq(1).css({"color":"red",'border':"2px solid red"});

    4.filter():允许自定义一个标准,不匹配这个标准的元素将被从集合中删除,匹配的元素将会被返回。
    class=t的p元素将被提取出来,即过滤出class=t的p,不满足的会被删除
    $("p").filter(".t").css({"color":"red",'border':"2px solid red"});

    5.not():同filter()相反,返回不匹配标准的所有元素
    不是class=t的元素的p将会被提取出来
    $("p").not(".t").css({"color":"red",'border':"2px solid red"});


    jQuary AJAX 在不重载页面的情况下,AJAX通过后台加载数据,在网页上进行显示,实现页面的动态交互
    没有jQuary AJAX还是比较难的
    通过jQuary AJAX方法,可以通过HTTP GET或者HTTP POST方法从远端服务器上获取文本、HTML、XML、JSON数据,并且直接可以将这些外部数据加载入被选元素中
    AJAX load()方法:简单而强大的内容加载方法,可以从远端服务器加载数据并将返回的数据放入指定的被选元素中
    语法:$("id").load(URL,data,callback)
    URL:要加载的URL地址
    data:可选的,请求加载时发送的查询字符串的键/值数据集合
    callback:load()方法执行加载完成后,需要执行的函数,可选的
    例子:
    加载服务器上的/static/file/test.txt文件,并通过点击鼠标在id=content的p元素中显示出来
    <input type="button" value="点击" id="click_id">
    <p id="content">content will be changed!</p>

    $("#click_id").click(function () {
    $("#content").load("/static/file/test.txt");
    })


    callback:加载方法完成后执行的回调函数,包含有三个参数:
    responseTxt:调用成功时的结果内容
    statusTxt:调用状态信息
    xhr:XMLHttpRequset对象
    例子:如果load方法加载成功,则会弹出提示框
    $("#click_id").click(function () {
    $("#content").load("/static/file/test.txt", function (responseTxt, statusTxt, xhr) {
    if(statusTxt=="success"){
    alert("This is successful!"+" Error:"+xhr.error()+xhr.status+" responseTxt"+responseTxt)
    }else {
    alert("Error:"+xhr.error()+xhr.status)
    }
    });
    })

    jQuary get()和post()方法:请求从服务器请求数据,请求响应的常用方法
    get():从指定的资源获取数据,有可能是缓存数据
    post():向指定的资源提交要处理的数据,也可以从资源获取数据,但不缓存数据,常用于连同请求一起发送数据

    jQuary $.get()方法
    $.get():通过HTTP GET方法请求从服务器请求数据,异步获取数据
    语法:$.get(URL, callback)
    URL:要请求的服务器的URL地址
    callback:请求成功后要执行的函数名
    例子:使用get方法从服务器/static/file/test.txt读取内容,并通过回调函数的data数据返回回来,显示链接状态
    $("#click_id").click(function () {
    $.get("/static/file/test.txt",function (data, status) {
    alert("you'll get message:"+data+" the status:"+status)
    });
    })


    jQuary $.post()方法
    $.post():通过HTTP POST方法请求从服务器请求数据,异步获取数据
    语法:$.post(URL, data, callback)
    URL:要请求的服务器的URL地址
    data:连同请求要发送的数据
    callback:请求成功后要执行的函数名

    jQuary 选择器
    选择器 实例 选取
    * $("*") 选取所有元素
    #id $("#lastname") 选取id=lastname的元素
    .class $(".classA") 选取class=classA的元素
    .class,.class... $(".classA,.classB") 选取class=classA或者class=classB的元素
    element $("p") 选取所有的<p>元素
    el1,el2,el3... $("div,h1,p") 选取所有的<div>,<h1>,<p>元素
    :first $("p:first") 选取第一个<p>元素
    :last $("p:last") 选取最后一个<p>元素
    :even $("tr:even") 选取偶数行<tr>元素
    :odd $("tr:odd") 选取奇数行<tr>元素
    :first-child $("p:first-child") 选取属于其父元素的第一个子元素的所有 <p> 元素。选择属于其父元素的首个子元素的每个 <p> 元素
    :first-of-type $("p:first-of-type") 选取属于其父元素的第一个<p>元素的所有<p>元素
    :last-child $("p:last-child") 选取属于其父元素的最后一个子元素的每个<p>元素
    :last-of-type $("p:last-of-type") 选取属于其父元素的最后一个子元素的所有<p>元素
    :nth-child(n) $("p:nth-child(2)") 选取属于其父元素的第二个子元素的所有<p>元素,一个div是一个父节点,父节点是很多的
    :nth-last-child(n) $("p:nth-last-child(n)") 选取属于其父元素的第一个子元素的所有<p>元素,从最后一个节点开始计数
    :only-child $("p:only-child") 选取属于其父元素的唯一子元素的所有<p>元素,每一个块都有一个父类,找只有唯一子元素的父类
    :only-of-type $("p:only-of-type") 选取属于其父元素的特定类型的唯一子元素的所有<p>元素
    :parent>child $("div>p") div元素的直接子元素的所有p元素
    :parent descendant $("div p") <div>元素后代的所有<p>元素
    :element+next $("div+p") 每个<div>元素相邻的下一个p元素,中间不能有相邻
    :element~siblings $("div~p") <div>元素同级别的(同胞)<p>元素
    :eq(index) $("ul li:eq(2)") 列表中的第3个元素
    :gt(no) $("ul li:gt(2)") 列举index大于3的元素
    :lt(no) $("ul li:lt(2)") 列举index小于3的元素
    :not(element) $("input:not(:empty)) 所有不为空的元素
    :header $(":header") 所有的标题header
    :animated $(":animated") 所有的动画元素
    :focus $(":focus") 当前具有焦点的元素
    :contains(text) $(":contains('hello')) 文本中具有hello字符的元素
    :has(selector) $("p:has(span)") 包含有<span>在其内的<p>元素,最终要返回的是<p>元素,前提是它要包含有<span>标签
    :empty $(":empty") 所有的空元素
    :parent $(":parent") 所有是另一个元素的父元素的元素,即具有子元素的的元素
    :hidden $("p:hidden") 所有隐藏的<p>元素
    :visible $("table:visible") 所有可见的表格
    :root $(":root") 文档的根元素
    :lang(language) $(":lang(de)") 选取以de开头的language属性的元素

  • 相关阅读:
    XSS漏洞学习笔记
    【react】使用 create-react-app 构建基于TypeScript的React前端架构
    React-使用装饰器
    探究Hybrid-APP技术原理
    getBoundingClientRect使用指南
    React.js + LiveReload配置详解
    《高性能JavaScript》学习笔记(2)——日更中
    JavaScript设计模式学习之路——继承
    JavaScript数组去重的四种方法
    《高性能JavaScript》学习笔记——日更中
  • 原文地址:https://www.cnblogs.com/demo-deng/p/7993893.html
Copyright © 2020-2023  润新知