zoukankan      html  css  js  c++  java
  • Jquery前端选择器

    ----------------------祖先后代选择器------------------------------

    1.祖先 后代:根据一个元素可以取得指定的所有子元素(不管中间有多少后代)$("div span")=$(div).find("span")

    2.祖先>后代:根据一个元素取出所有对应的指定的子元素。$("div>span")=$("div").children("span")

    3.元素+相邻:指的所有与他平级元素信息。next()代替

    4.元素~兄弟:取得所有与它平级的所有子元素信息。nextall()

    -----------------索引选择器---------------------

    1.:first-->

    2.:last-->$("div>ul li:last")=$("div>ul li").last()

    3.:not(元素)-->

    4.:even-->索引编号为偶数

    5.:odd-->索引编号为奇数

    6.:eq-->取得指定索引编号的元素

    7.:gt-->大于

    8.:lt-->小于

    9.:header-->取得所有的<hx>元素的信息

    ----------------------内容选择器--------------------------

    1.:contains(内容)-->返回含有指定文本内容的所有元素。$("div td:contains('李四')")

    2.:empty-->返回所有不包含子元素或文本的所有元素。$("div li:empty")

    3.:parent-->返回所有包含子元素的所有元素集合。$("div li:parent")

    4.:has(选择器)-->获取所有包含指定选择器所匹配的元素。$(div *:has(li))

    5.父元素选择器-->使用parent()函数取得指定元素的父元素。$("span").parent("p")--找到span元素的父元素为p的元素。

    --------------------------可见性选择器---------------------------------

     设置层隐藏:div 对象.style.display="none":-->$("div").hide(5000);

    <div style="display:none;">

        <img src="images/pic.jpg">

    </div>

    1.:hidden

    设置层显示:div 对象.style.display="block":-->$("div").show(5000);

    2.:visible

    -------------------------属性选择器------------------------------------

     1.[属性名称]-->取得包含有指定属性名称的所有元素

     2.[属性=内容]-->取得包含指定属性,并属性为指定内容的所有元素-->$("div [id=msg]")

    3.[属性!=内容]-->取得不包含指定属性,并属性为指定内容的元素

    4.[属性^=内容]-->以指定内容开始的元素。

    5.[属性$=内容]-->以指定内容结尾的元素。

    6.[属性*=内容]-->包含

    7.[属性选择器][属性选择器][属性选择器]

    一般情况:

    <div>

      <div id="msg" name="na"></div>

    </div>

    选择器:$("[id][name]")

    ------------------------列元素选择器------------------------------------

    1.:nth-child(eq|even|odd|index)-->列的索引是从1开始的。-->$("div td:nth-child(1)")

    2.:first-child

    3.:last-child

    4.:only-child

    -------------------------表单对象选择器------------------------------------

    1.:input-->取得所有输入组件的对象,包括:textpasswordselect

    2.:text-->取得所有文本输入框的元素

    3.:password-->取所有密码的输入组件

    4.:radio-->单选按钮

    5.:checkbox-->复选框

    6.:button-->按钮

    7.:submit-->提交按钮

    8.:rest-->

    9.:image-->

    10.:file-->

    结合each函数,dom操作。

    -----------------------------------属性操作--------------------------------------------

    dom解析处理过程之中对属性操作的函数

    1.设置属性:元素对象.setAttribute(属性名称,属性内容)

    2.取得属性:元素对象.getAttribute(属性名称)

    3.删除属性:元素对象.removeAttribute(属性名称)

    jQuery简化操作:

    1.设置属性:JQuery元素对象.attr(属性名称,属性内容)

    $("div>img").attr("src","images/pic.jpg");

    $("div>img").attr("width","200px");

    2.取得属性:JQuery元素对象.attr(属性名称)

    3.删除属性:JQuery元素对象.removeAttr(属性名称)

    $("div [width]").removeAttr("width");==$("div").find("[width]").removeAttr("width")

    样式操作:

    jQuery对象.attr("class","样式名称");

    jQuery对象.addClass("样式名称");

    jQuery对象.css("样式名字","样式内容");

     $("div>span").css("color","white");

    ------------------------------------元素操作函数---------------------------------------------

    1.append(元素|文本内容|function)-->指定的元素后边追加新内容

    2.appendTo()-->将一个选择好的元素追加到指定的元素之后

    3.prepend(元素|文本内容|function)-->指定的元素前边追加新内容

    4.prependTo()-->前

    5.after(元素|文本内容|function)-->

    6.before(元素|文本内容|function)-->

    7.insertAfter(元素|文本内容|function)-->

    8.insertBefore(元素|文本内容|function)-->指定元素的外部前

    9.clone([true])

    10.replaceWith(元素|文本内容|function)-->

    11.replaceAll(元素|文本内容|function)-->

    12.wrapAll(元素|文本内容|function)-->

    13.unwrapAll(元素|文本内容|function)-->

    14.wrapInner()-->进行元素内包裹

    15.each(callback)-->进行元素的遍历处理操作

    16.remove()-->删除当前元素

    17.empty()-->清楚子元素

    -----------

    函数的结果处理数据

     -----------------------------------原生动画-------------------------------------------------

  • 相关阅读:
    JS练习
    推断一组数的规律,并填充缺失的数
    IP地址的正则表达式写法
    相比于HTML4,HTML5废弃的元素有哪些?
    关于HTML5和CSS3的几个“新增”
    hdu 3092 简单数论+分组背包dp
    避障
    人工势场法
    A*
    pop 2049-简单bfs
  • 原文地址:https://www.cnblogs.com/wlhebut/p/6411721.html
Copyright © 2011-2022 走看看