jQuery属性/CSS使用例子

jQuery属性/CSS

1、.attr() 获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

　　例1：获取元素的属性的值

<p title="段落1" class="p1">我是一个段落</p>

<div>div</div>

<script type="text/javascript">

    $(function(){

        var  p1=$('.p1').attr('title');

        $('div').text('p1').css('color','red');

    });

</script>

效果：

我是一个段落

p1

例2：设置每一个匹配元素的一个或多个属性

<p class="p1">这是第一个段落</p>

<div>这是一个div</div>

<script type="text/javascript">

    $(function(){

          $('.p1').attr('id','p1');

          $('div').attr({

        'id':'div1',

        'class':'div1'

   　　 });

        $('#p1').css('color','red');

        $('.div1').css('color','blue');

});

</script>

效果：

这是一个段落

这是一个div

2、.prop() 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。　　

 <input type="checkbox" />

    <script>

    $(function(){

      $("input[type='checkbox']").prop("checked", "checked");

    });

</script>

效果：

3、.removeAttr() 为匹配的元素集合中的每个元素中移除一个属性（attribute）

<input type="checkbox" disabled="disabled"/>
<input type="submit" disabled="disabled" />

<script>

    $(function(){

        $("input[type='submit']").removeAttr("disabled");

    });

</script>

效果：本来是submit是禁用的，移除了属性后变为可点击的;而checkbox没有移除disabled属性，则依然是禁用的。

4、removeProp() 用来删除由.prop()方法设置的属性集。

注意: 不要使用此方法来删除原生的属性（ property ），比如checked, disabled, 或者 selected。
这将完全移除该属性，一旦移除，不能再次被添加到元素上。使用.prop()来设置这些属性设置为false代替。

　　　　 <p></p>

        <div id="div1"></div>

        <div id="div2"></div>

        <script type="text/javascript">

        $(function(){

                $('p').prop({

                    "abc":1234

                });

                if ($('p').prop("abc")){

                    $('#div1').text(String($('p').prop("abc")));

                }

                $('p').removeProp("abc");

                if ($('p').prop("abc")){

                    $('#div2').text("abc");

                }

        });

        </script>

效果

1234

5、.val() 获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。这个方法不接受任何参数，主要用于获取表单元素的值。

<input type="submit" value="提交"/>

<p></p>

<script>

$(function(){

   var $value=$("input[type='submit']").val();

   $('p').text($value).css('color','red');

});

</script>

效果：

6、.addClass() 为每个匹配的元素添加指定的样式类名。

<p>这是p段落</p>

<script>

 $(function(){

   $('p').addClass('p1');

   $('.p1').css('color','blue');

 });

</script>

效果：

这是p段落

7、.css() 获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。这个方法在上面例子中早已使用。

<p class="p1">这是p段落</p>

<script>
 $(function(){

   $('.p1').css({

   width:"200",

   color:'red',

   border:'1px solid #ccc'

    });

});
</script>

效果：

8、.hasClass() 确定任何一个匹配元素是否有被分配给定的（样式）类。

<div class="div1">我是div1</div>

<script>

    $(function(){

        var res=$('div').hasClass('div1');

        if (res){

        $('div').css('color','red');

        }

    });

</script>

效果：

我是div1

9、removeClass() 移除集合中每个匹配元素上一个，多个或全部样式。

<style type="text/css">

 .div1{

       color: red;

 }

</style>

<div class="div1">我是div1</div>

 <script>

     $(function(){

      $("div").removeClass("div1");

     });

 </script>

效果：移除了类名为.div后，样式便不起作用了。

我是div1

10、.toogleClass() 用来切换匹配集合中的每个元素的一个或多个样式类名（用空格隔开）。

<style type="text/css">

     p {

        font-weight: bolder;

        cursor: pointer;

     }

    .highlight {

         background: yellow;

     }

</style>

<p class="blue">Click to toggle</p>                     
<script>

     $( "p" ).click(function() {

      $( this ).toggleClass( "highlight" );

     });
 </script>

效果：点击第一次与点击第二次，期间类名发生了反转。

11、.height() 获取匹配元素集合中的第一个元素的当前计算高度值或设置每一个匹配元素的高度值。

<p>这是一个段落</p>

<script type="text/javascript">

   $(function(){

      $( "p" ).height(50).css('background-color','blueviolet');

  });

</script>

效果：

12、innerHeight() 用于获得匹配集合中第一个元素的当前计算的内部高度（包括padding，但不包括border），或设置每一个匹配元素的内部高度。这个方法不接受任何参数。该方法返回元素的高度，包括顶部和底部的padding，单位是像素。

<style type="text/css">

      p {

          margin: 10px;

          padding: 5px;

          border: 2px solid #666;

         }
</style>

<div class="div1">

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

</div>

<script type="text/javascript">

  $(function(){

    var height= $('p').innerHeight();

    $('div').text(height);

});

</script>

效果：

13、outerHeight() 获取匹配元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。

<style type="text/css">

      p {

          margin: 10px;

          padding: 5px;

          border: 2px solid #666;

         }

</style>

<div class="div1">

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

</div>

<script type="text/javascript">

  $(function(){      
　　 var height= $('p').outerHeight();

    $('div').text(height);

});

</script>

效果：

14、outerWidth() 获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。（愚人码头注：返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。）

<style type="text/css">

  p {

     width: 100px;

     border: 2px solid #666;

   }

</style>

<div class="div1">

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

</div>

<script type="text/javascript">

   $(function(){

      var width= $('p').outerWidth();

      $('div').text(width);

   });

</script>

效果：

102

15、innerWidth() 用于获得匹配集合中第一个元素的当前计算的内部宽度（包括padding，但不包括border），或设置每一个匹配元素的内部宽度。

<style type="text/css">

    p {

     padding: 10px;

     width: 100px;

     border: 2px solid #666;

   }
 </style>

 <div class="div1">

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

 </div>

 <script type="text/javascript">

    $(function(){

      var width= $('p').innerWidth();

      $('div').text(width);

   });          

</script>

效果：

120

16、.width()

<p>这是一个段落</p>

<script type="text/javascript">

    $(function(){

    $( "p" ).width(100).css('background-color','blueviolet');

});

</script>

效果：

17、offset() 在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。

<style type="text/css">

      p { margin-left:10px; }

</style>

<p>Hello</p>

<p>2nd Paragraph</p>

<script type="text/javascript">

     var p = $("p:last");

     var offset = p.offset();

     p.html( "left: " + offset.left + ", top: " + offset.top );
</script>

效果：

Hello

left: 18, top: 50

18、.offsetParent() 取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。

 <style type="text/css">

    .div1{

        width: 100px;

        height: 50px;

        position: relative;

           }

</style>

<div class="div1">

    div1

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

</div>

<script type="text/javascript">

         $(function(){

         $('.p1').offsetParent().css('background-color','red');

 });

</script>

效果：

19、.position()

 <style type="text/css">

     div { padding: 15px;}

      p { margin-left:10px; }

</style>

<div>

    <p>Hello</p>

</div>

<p></p>

<script type="text/javascript">

      $(function(){

        var p = $("p:first");

        var position = p.position();

        $("p:last").text( "left: " + position.left + ", top: " + position.top );

         });

</script>

效果：

Hello

left: 23 top:23

20、.scrollLeft() 获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置。

21、.scrollTop() 获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。

22、.data() 在匹配元素上存储任意相关数<style type="text/css">

    div { color:blue; }

    span { color:red; }

</style>

script type="text/javascript">

     $(function(){

        $("div").data("test", { first: 16, last: "div1!" });

        $("span:first").text($("div").data("test").first);

        $("span:last").text($("div").data("test").last);

 });

</script>

效果：

The values stored were 16 and div1!

23、.removeData() 在元素上移除绑定的数据

<style type="text/css">

      div { margin:2px; color:blue; }

      span { color:red; }

</style>

<div>value1 before creation: <span></span></div>

<div>value1 after creation: <span></span></div>

 <div>value1 after removal: <span></span></div>

<div>value2 after removal: <span></span></div>

<script type="text/javascript">

    $(function(){

        $("span:eq(0)").text("" + $("div").data("test1"));

        $("div").data("test1", "VALUE-1");

        $("div").data("test2", "VALUE-2");

        $("span:eq(1)").text("" + $("div").data("test1"));

        $("div").removeData("test1");

        $("span:eq(2)").text("" + $("div").data("test1"));

        $("span:eq(3)").text("" + $("div").data("test2"));

    });

</script>

效果：

value1 before creation: undefined

value1 after creation: VALUE-1

value1 after removal: undefined

value2 after removal: VALUE-2

jQuery属性/CSS使用例子的更多相关文章

jQuery DOM/属性/CSS操作
jQuery DOM 操作创建元素只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
jquery知识属性 css
jquery基础知识属性 css <!doctype html> <html lang="en"> <head> <meta chars ...
jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
如何利用 jQuery 修改 css 中带有 !important 的样式属性？
使用 jQuery 修改 css 中带有 !important 的样式属性外部样式为: div.test { width:auto !important; overflow:auto !import ...
使用jquery获取css的top和left属性
使用jquery获取css的top和left属性因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var t ...
js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作一.总结一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
jquery的api以及用法总结-属性/css/位置
属性/css 属性 .attr() attr()设置普通属性,prop()设置特有属性获取或者设置匹配的元素集合中的第一个元素的属性的值如果需要获取或者设置每个单独元素的属性值,需要依靠.each ...
js、jquery、css属性及出错集合
*)注意使用jquery设置css的语法 css("propertyname","value");#单个时时逗号 css({"propertyname ...

随机推荐

HTML5的特性,发展,及使用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ffffff } p.p2 { margin: 0.0px 0. ...
Design6：选择合适的数据类型
数据库使用Table来存储海量的数据,细分Table结构,数据最终存储在Table Column中,因此,在设计Table Schema时,必须慎重选择Table Column的Data Type,数 ...
ModelDataExchange - Import
ModelDataExchange - Import eryar@163.com Abstract. The ModelDataExchange import utility enables the ...
在Windows环境中开始Docker的学习和体验
研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...
基于表的数据字典构造MySQL建表语句
表的数据字典格式如下: 如果手动写MySQL建表语句,确认麻烦,还不能保证书写一定正确. 写了个Perl脚本,可快速构造MySQL脚本语句. 脚本如下: #!/usr/bin/perl use str ...
用JqueryUI的Dialog+IFrame实现仿模态窗口效果
大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示 ...
内存中OLTP与内存不足
我已经写了好几次内存中OLTP的文章和”为什么我还不推荐内存中OLTP给用户”.今天我想进一步谈下内存中OLTP背后的内存需求,还有如果你内存不够的话会发生什么. 一切都与内存有关! 我们都知道很久之 ...
jQuery 判断是否包含某个属性
1.Get the attribute, check the value var attr = $(this).attr('name'); // For some browsers, `attr` i ...
Android网络编程1
最近在自学Android开发,从这篇开始作为我学习android开发的笔记,来记录学习过程中遇到的问题点和其解决的方法: Ui界面代码 <?xml version="1.0" ...
三分钟集成elmah xml 格式日志到mvc站点
1.通过nuget安装Elmah ELMAH on XML Log 会自动在web.config 文件中添加配置内容,默认不允许远程访问,日志访问路径是 Elmah.axd,不记录500错误 2.修改 ...

jQuery属性/CSS使用例子

jQuery属性/CSS使用例子的更多相关文章

随机推荐

热门专题