zoukankan      html  css  js  c++  java
  • jQuery相关知识点2

    1-jQuery-

    jQuery是一个JavaScript库,通过封装原生对象的JavaScript函数得到一套定义良好的方法。

    jQuery主旨:以更少的代码,实现更多的功能。

    2—jQuery优势

    可以像css一样访问和操作dom;修改css控制页面外观;简化js代码操作;事件处理更容易;动画效果使用方便;ajax技术更加完美;大量的基于jQuery的插件;可以自定义扩展功能插件

    3—jQuery语法

    $(selector).action()

    4—多库冲突

    jQuery.onConflict()

    5—原生js对象和jQuery对象之间的转换

    Js对象=>jQuery对象

    var p=document.getElementById(‘p’);

    $(p);  //转换成jQuery对象

    jQuery对象=>js对象

     $(p).get(0)或者$(p)[0]  //这样就得到js原生对象

    6—dom操作

    (1)设置元素及内容

    html()  获取元素中的html内容

    html(value) 设置元素中的html内容

    text()   获取元素中文本内容

    text(value) 设置元素中文本内容

    val()   获取表单元素中的文本内容

    val(value) 设置表单元素中的文本内容

      (2)操作元素属性:对标签元素属性的操作

    attr(key) 获取元素key的属性值

    attr(key,value)设置元素key属性的属性值

    attr({key1:value,key2:value}) 设置元素多个key属性的属性值,方法的参数就是一个object对象

    (3)操作css样式

    Css({name1:value1,name2:value2})  设置元素多个css样式

    addClass(class)   给每个元素添加一个css

    addClass(class1,class2,class3)  给元素添加多个css类

    remove(class)    删除元素的一个css类

    removeClass(class1,class2,class3) 删除元素的多个css类

    toggleClass(class)  来回切换默认样式和指定样式

    7—如何使用jQuery来提取一个html标记的属性,如链接的href

    attr()方法被用来提取任意一个html元素的一个属性的值。首先需要

    利用jQuery选择到所有的链接或者一个特定的链接,然后应用attr()方法来获取它们的href属性的值。

    $(‘a’).each(function(){

       alert($(this).attr(‘href’));

    });

    8—jquery中的detach()和remove()方法的区别

       都被用来移除一个dom元素,两者之间的主要不同在于detach()会保持对过去被解除元素的跟踪,因此可以取消解除;而remove()方法则会保持过去被移除对象的引用。

    9—jQuery选择器

    (1)基本选择器

    Id选择器:$(“#mydiv”)  返回值为单个元素组成的集合 直接选取html中id为mydiv的元素

    标签选择器:$(“div”)  返回值为集合元素  选择div元素

    类选择器:$(“.mydiv”) 返回值为集合元素  选择类名为mydiv的元素/组

    通配符选择器:$(“*”)  返回值为集合元素 匹配所有元素,多用于结合上下文来搜索

    组合选择器: $(“div,span,p,.myclass,#mydiv”) 返回值为集合元素 将每一个选择匹配到的元素合并后一起返回,可以指定任意多个选择器,并将匹配到的元素合并到一个结果内

      

    (2)层次选择器

    祖先后代选择器:$(“form input”) 返回值为集合元素  在给定的祖先元素下匹配所有后代元素。

    父子元素选择器:$(“form>input”) 返回值为集合元素  在给定的父元素下匹配所有子元素

    相邻元素选择器:$(“div+input”)  返回值为集合元素   匹配所有紧邻着prev元素后的第一个next元素

    兄弟元素选择器:$(“div~input”) 返回值为集合元素  匹配所有prev元素之后的所有sibling元素

    (3)过滤选择器

    主要通过特定的过滤规则筛选出所需的dom元素,该选择器以:开头

    按照不同的过滤规则,过滤选择器可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤器。

    基本过滤选择器:

    :first  $(“tr:first”) 返回值为单个元素  匹配找到的第一个元素

    :last   $(“tr:last”)   返回值为单个对象  匹配找到的最后一个元素

    :not(selector)   $(“input:not(:checked)”)  返回值为集合元素  去除所有与给定选择器匹配的元素,即没有被选中的input元素

    :even   $(“tr:even”)  返回值为集合元素   匹配所有索引值为偶数的元素,从0开始计数

    :odd    $(“tr:odd”)   返回值为集合元素   匹配所有索引值为奇数的元素,从0开始计数

    :eq(index)  $(“tr:eq(0)”)  返回值为集合元素  匹配一个给定索引值的元素 eq(0)是获取第一个tr元素,括号内的是索引值

    :gt(index)  $(“tr:gt(0)”)  返回值为集合元素   匹配所有大于给定索引值的元素

    :lt(index)  $(“tr:lt(2)”)  返回值为集合元素   匹配所有小于给定索引值的元素

    :header   $(“:header”)  返回值为集合元素   匹配如h1,h2之类的标题元素

    :animated  $(“:animated”) 返回值为集合元素 匹配所有正在执行动画效果的元素

    内容过滤选择器:

    主要体现在它所包含的子元素和文本内容上

    :contains(text)   $(“div:contain(‘john’)”)  返回值为集合元素  匹配包含给定文本的元素,其作用是查找被标签围起来的文本内容是否符合指定的内容的

    :empty  $(“:empty”)  返回值为集合元素  匹配所有不包含子元素或者文本的空元素

    :has(selector)   $(“div:has(p)”)  返回值为集合元素  匹配含有选择器所匹配的元素的元素

    :parent   $(“td:parent”)  返回值为集合元素  匹配含有子元素或者文本的元素

    可见性过滤选择器:

    根据元素的可见和不可见状态来选择相应的元素

    :hidden  $(“:hidden”)  返回值为集合元素  匹配所有的不可见元素

    :visible $(“tr:visible”) 返回值为集合元素  匹配所有的可见元素

    属性过滤选择器

    通过元素的属性来获取相应的元素

    [attribute]  $(“div[id]”) 返回值为集合元素  匹配所有包含给定属性的元素,如选取所有带id属性的div标签

    [attribute=value]  $(“input[name=’newsletter’]”) 返回值为集合元素 匹配给定的属性是某个特定值的元素

    [attribute!=value] $(“div[title!=’test’]”) 返回值为集合元素 匹配所有不含有指定的属性或者属性不等于特定的元素

    [attribute^=value] $(“input[name^=’news’]”)  返回值为集合元素 匹配给定的属性是以某些值开始的元素

    [attribute$=value]  $(“input[name$=’lete’]”) 返回值为集合元素 匹配给定的属性是以某些值结尾的元素

    [attribute*=value]  $(“input[name*=’name’]”) 返回值为集合元素 匹配给定的属性是以包含某些值的元素

    [attributeSelector1][attributeSelector2][attributeSelector3]  $("input[id][name$='man']");返回值:集合元素。 复合属性选择器,需要同时满足多个条件时使用。

    元素过滤选择器:

    :nth-child(index) $(“ul li:nth-child(2)”) 返回值为集合元素 匹配其父元素下的第n个子元素,从1开始的

    :first-child  $(“ul li:first-child”)  返回值为集合元素  匹配第一个子元素

    :last-child    $(“ul li:last-child”)   返回值为集合元素 匹配最后一个子元素

    :only-child    $(“ul li:only-child”)   返回值为集合元素  如果某个元素是父元素中唯一的子元素,将会被匹配到

    表单对象属性过滤选择器:

    :enabled   $(“input:enabled”) 返回值为集合元素 匹配所有可用的元素  查找所有input中不带disabled=”disabled”的input元素

    :disabled  $(“input:disable”) 返回值为集合元素 匹配所有不可用的元素

    :checked   $(“input:checked”) 返回值为集合元素 匹配所有被选中的元素

    :selected  $(“select option:selected”) 返回值为集合元素  匹配所有选中的option元素

    (4)表单选择器

    :input $(“:input”)  返回值为集合元素 匹配所有input textarea select button 元素

    :text  $(“:text”)  返回值为集合元素  匹配所有的单行文本框

    :password  $(“:password”)  返回值为集合元素  匹配所有的密码框

    :radio   $(“:radio”)  返回值为集合元素  匹配所有单选按钮

    :checkbox  $(“:checkbox”)  返回值为集合元素  匹配所有复选框

    :submit   $(“:submit”)  返回值为集合元素  匹配所有提交按钮

    :image   $(“:image”)  返回值为集合元素  匹配所有的图像域

    :rest  $(“:reset”)  返回值为集合元素  匹配所有重置按钮

    :button  $(“:button”)  返回值为集合元素  匹配所有按钮

    :file   $(“:file”)  返回值为集合元素  匹配所有文件域

    :hidden  $(“:hidden”) 返回值为集合元素  匹配所有不可见的元素

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    微信小程序中的组件使用1
    小程序中的请求封装
    路由
    nodejs静态web服务
    跨端开发小程序
    非阻塞I/O事件驱动
    Node文件模块
    提炼游戏引擎系列:初步设计引擎
    提炼游戏引擎系列:开篇介绍
    发布HTML5 2D游戏引擎YEngine2D
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/6820317.html
Copyright © 2011-2022 走看看