zoukankan      html  css  js  c++  java
  • jquery样式篇

    1.jquery:

      1.1简介

        jquery是一个轻量级的javascript库。版本号分1.x版本和2.x版本,2.x版本不再支持IE6 7 8,而更好的支

       持移动端开发。

        每一个版本分为开发版和压缩版,开发版更方便查看源码和调试,压缩版体积更小,效率更快。

        jquery较javascript能更好的兼容不同的浏览器,写更少的代码,做更多的事。

      1.2jquery对象和DOM对象

        <p id="p1">例子</p>

        var p = document.getElementById("p1"); // DOM对象

        var $p = $("#p1"); // jQuery对象,是一个类数组对象。

        jquery对象和dom对象之间的转换

        jquery对象转换为dom对象

        var dom = $p[0]; var dom2 = $p.get(0);

        dom对象转换为jquery对象

        var jquery  = $(dom);

    2.Jquery标签选择器

      2.1基本选择器 

        <p id="p1" class="p2"></p>

        var p = $("p");// 元素选择器 同document.getElementsByTagName()

        var p1 = $("#p1"); // Id选择器,同document.getElementById()

        var p2 = $(".p2");// 类选择器,同document.getElementsByClassName()

        var p3 = $("*"); // 全选择器,获取文档中所有元素

      2.2层级选择器

       

        说明:

        1.他们都有一个参照元素。

        2.后代选择器包含子选择器的内容。

        3.一般兄弟选择器包含相邻选择器的内容。并两者选择范围都是在同一个父元素下。

      2.3基本筛选选择器

      

       说明:下标从0开始

      2.4内容筛选选择器

      

      2.5可见性筛选选择器

       

        说明:

          我们有几种方式可以隐藏一个元素:

      1. CSS display的值是none。
      2. type="hidden"的表单元素。
      3. 宽度和高度都显式设置为0。
      4. 一个祖先元素是隐藏的,该元素是不会在页面上显示
      5. CSS visibility的值是hidden
      6. CSS opacity的指是0
         如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度,是大于零。
         元素的visibility: hidden或opacity: 0被认为是可见的,因为他们仍然占用空间布局。  

      2.6属性筛选选择器

        

      2.7子元素筛选选择器

       

        说明:下标是从1开始。

      2.8表单元素选择器

       

      2.9表单对象属性筛选选择器

       

      2.10特殊选择器this

      • this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
      • $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。

    3.jquery属性和样式

        3.1attr()和removeAttr()

          attr() 获取元素属性和设置属性

          1.attr(attrName)获取attrName属性的值

          2.attr(attrName,value)为attrName属性设置value值

          3.attr(attrName,functiong)为attrName属性设置一个函数值。

          $("p").attr("name",function(index,name){return "new"+name})

          4.attr(attributes)设置多个属性attributes={attrName1:value,attrName2:value2}

          例如:$("p").attr({"id":"p1","name":"pname"})

          removeAttr()移除匹配到的集合元素的每一个元素的属性

          注意:attribute和property都翻译成属性。attr()操作是dom元素自带的属性,

          prop()操作的是dom元素附件的内容。

        3.2html() text() val()

          html()操作的html内容

          html() 不传入值,就是获取集合中第一个匹配元素的HTML内容

          2.html( htmlString )  设置每一个匹配元素的html内容

          3.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

          text()操作的是文本对象的内容

          1.text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代

          2.text( textString ) 用于设置匹配元素内容的文本

          3.text( function(index, text) ) 用来返回设置文本内容的一个函数

          val()操作的是表单value的属性的值

          1.val()无参数,获取匹配的元素集合中第一个元素的当前值

          2.val( value ),设置匹配的元素集合中每个元素的值

          3.val( function ) ,一个用来返回设置值的函数

          4.通过.val()处理select元素, 当没有选择项被选中,它返回null

          5.val()方法多用来设置表单的字段的值 如果select元素有multiple(多选)属性,

          并且至少一个选择项被选中,

           .val()方法返回一个数组,这个数组包含每个选中选择项的值

        3.3addClass()和removeClass()

          addClass()为元素添加类,不会替换原来的类,只是添加一个类,多个类之间用空格分开

          1.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名

          2.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的

          要增加的样式名

          removeClass()为元素移除类,用类名做参数就移除改类名,如果没有就移除所有的类

          1.removeClass( [className ] ):每个匹配元素移除的一个或多个用空格隔开的样式名

          2.removeClass( function(index, class) ) : 一个函数,返回一个或多个将要被移除的样式名

        3.4toggleClass()

          toggleClass()在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,

          取决于这个样式类是否存在或值切换属性。

          即:如果存在(不存在)就删除(添加)一个类

          1.toggelClass(className),如果改元素上有className类,就删除,没有就添加

          2.toggleClass(className,true),表示添加className类

          3.toggleClass(className,flase),表示移除className类

        3.5css()

          css()为元素设置样式

          获取:

            1.css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值

            2.css( propertyNames ):传递一组数组,返回一个对象结果

            例如:var p = $("p").css(["width","height"]); var width = p.width; var heigth = p.height;

          设置:

            1 .css(propertyName, value ):设置CSS

            2.css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理

            3.css( properties ):可以传一个对象,同时设置多个样式

            例如:$("p").css({"width":20px,"height":30px});

          说明:css()和addClass()的比较:css()更灵活,addClass()更好维护,css()用于添加的元素,

          即动态元素,addClass()用于静态元素,css()优先级大于addClass()

        3.6数据存储

          html5使用data-*属性来存储数据。

          还可以用jquery中的方法来存取数据。

          存:

            jQuery.data( element, key, value ) //静态接口,存数据

             jQuery.data( element, key ) //静态接口,取数据

             .data( key, value ) //实例接口,存数据

             .data( key ) //实例接口,存数据

          取:

            jQuery.removeData( element [, name ] )

            .removeData( [name ] )

          说明:官方推荐使用后者。

  • 相关阅读:
    hdu 4015找规律
    hdu4473
    hdu 4016搜索
    hdu4465精度控制
    hdu 2965组合数学题
    hdu 4022map和list等数据结构的应用
    hdu4464超级大水题
    在ASP.NET中实现Url Rewriting
    DotText源码阅读(1)调试
    DotText源码阅读(2)数据库表结构
  • 原文地址:https://www.cnblogs.com/tangh/p/6233638.html
Copyright © 2011-2022 走看看