zoukankan      html  css  js  c++  java
  • jquery所有选择器,dom操作常用方法

    一、基础选择器

    1,id选择器     $("#my_id")  根据id获取jquery对象;
    2,元素选择器 (element选择器、标签选择器)  $("button")  根据元素名获取对象,可能为数组;
    3,class选择器   $(“.class”)  根据class类选择对象,可能为数组;
    4,*号选择器   $(“*”)  选择页面全部元素;
    5,逗号选择器(多项选择器) $(“sele1,sele2,seleN”),如$(".red,.green")、$(".red,div")选择不同类型的对象,用逗号隔开;
    6,空格选择器(层次选择器,父子孙选择器)  $("ance desc"),如$("div span"),选择div下的所有span,空格隔开;
    7,>号选择器(父子选择器)  $(“parent > child”) 如$(“parent > child”),获取的是<div>“家庭中”全部“子辈”<span>元素,用>号隔开,只选择临辈子元素;
    8,+号选择器(临近选择器),如$("p + label")选择器,获取<p>元素最近邻的下一个label元素;
    9,~号选择器(同辈后边相邻所有选择器)如$("p~label"),选择p后所有同级label;

    二、过滤性选择器

    1,:first过滤选择器   如$(“li:first”),选择第一个li
    2,:eq(index)过滤选择器,如 $("li:eq(2)"),选择第3个li
    3,:contains(text)过滤选择器,如$("li:contains('jQuery')"),选择内容包括jQuery的li
    4,:has(selector)过滤选择器,如$("li:has('p')"),选择获取包含p标签的li
    5,:hidden过滤选择器,如$("input:hidden"),选择所有隐藏的input元素
    6,:visible过滤选择器,如$("li:visible"),选择所有可见的li,和:hidden相反
    7,[attribute=value]属性选择器,获取属性名属性值都匹配的元素,如$("li[title='蔬菜']")
    8,[attribute!=value]属性选择器,获取不包含属性名,或者与属性名和属性值不相同的全部元素,如$("li[title!='蔬菜']")
    9,[attribute*=value]属性选择器,获取属性值中包含指定内容的全部元素,其中[]是专用于属性选择器的括号符,如$("li[title*='果']"),title中有“果”字的li
    10,:first-child子元素过滤选择器,获取每个父元素中返回的首个子元素,它是一个集合,注意和:first的区别

    三、表单选择器

    1,:input表单选择器,获取表单全部元素,如$("#frmTest :input"),获取id为frmTest表单的所有元素
    2,:text表单文本选择器,获取表单中全部单行的文本输入框元素,如$("#frmTest :text"),获取
    id为frmTest表单的所有单行文本
    3,:password表单密码选择器,获取表单中全部的密码输入文本框元素,如$("#frmTest :password")
    4,:radio单选按钮选择器
    5,:checkbox复选框选择器
    6,:submit提交按钮选择器
    7,:button表单按钮选择器
    8,:checked选中状态选择器,用于单复选框
    9,:selected选中状态选择器,用于下拉列表

    四,操作DOM的常用方法

    1,.attr("属性名","属性值") 设置标签属性
    2,.html()、.text(),text只获取文本,html获取节点的所有内容,包括子节点
    3,.addClass(样式类列表,空格隔开)、.css("样式名","样式值"),设置样式
    4,使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名
    5,使用append()方法向元素内追加内容,$("body").append($html),追加jquery对象
    6,$(content).appendTo(selector),顺序和append相反
    7,使用before()和after()在元素前后插入内容
    8,$(selector).clone()复制元素
    9,replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:$(selector).replaceWith(content)和$(content).replaceAll(selector)。参数selector为被替换的元素,content为替换的内容
    10,使用wrap()和wrapInner()方法包裹元素和内容。前者用于包裹元素本身,后者则用于包裹元素中的内容
    11,使用each()方法遍历元素。$(selector).each(function(index))在遍历时,通过回调函数返回遍历元素的序列号,根据index进行操作。
    12,使用remove()和empty()方法删除元素。remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素。如:remove(".red")方法只是把<span>元素中类别名为“red”的这部分元素给删除了

  • 相关阅读:
    Vue技巧小结(持续更新)
    Vue+Webpack常见问题(持续更新)
    webpack模块定义和使用的模式
    vue-cli笔记
    新浪微博怎么知道你没登录
    jquery页面水印插件,支持多行水印、行错开
    浏览器并发连接数(未完成)
    HTTP1.0 、1.1
    你总说时间很少
    看小说的这些年
  • 原文地址:https://www.cnblogs.com/sunqian/p/5427791.html
Copyright © 2011-2022 走看看