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>

效果：

10

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>

效果：

12

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使用例子的更多相关文章

  1. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  2. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  3. jquery知识 属性 css

    jquery基础知识 属性 css <!doctype html> <html lang="en"> <head> <meta chars ...

  4. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

  5. 如何利用 jQuery 修改 css 中带有 !important 的样式属性？

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  6. 使用jquery获取css的top和left属性

    使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var t ...

  7. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  8. jquery的api以及用法总结-属性/css/位置

    属性/css 属性 .attr() attr()设置普通属性,prop()设置特有属性 获取或者设置匹配的元素集合中的第一个元素的属性的值 如果需要获取或者设置每个单独元素的属性值,需要依靠.each ...

  9. js、jquery、css属性及出错集合

    *)注意使用jquery设置css的语法 css("propertyname","value");#单个时时逗号 css({"propertyname ...

随机推荐

  1. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  2. WPF 浏览文件夹，获取其路径

    public void GetPath(System.Windows.Controls.TextBox TB) { FolderBrowserDialog FBD = new FolderBrowse ...

  3. Android Fragment---执行Fragment事务

    转载博客:http://blog.csdn.net/think_soft/article/details/7272853 在Activity中使用有关Fragment的添加.删除.替换以及用它们执行其 ...

  4. ES6 - Note4：Class类

    1.Class类的介绍 在ES6中新增了Class类的概念,让语法看起来更像是面向对象编程,其实这可以说是一个语法糖,ES5可以做到Class绝大部分功能,但也有一些不同.在ES6以前,可以通过构造函 ...

  5. 如何搭建DNS服务

    继NTP时间服务器后,继续搭建DNS服务,鉴于昨晚撰写时间超过预期,这次改变策略,先把自己需要用到的部分写出来(主要是基于RAC的搭建,只涉及正向和反向DNS解析),后面再添加必要的说明和阐述. 试验 ...

  6. C# 打印PDF文件之使用不同打印机打印所有页面或部分页面

    C# 打印PDF文件之使用不同打印机打印所有页面或部分页面 最近在逛国外各大编程社区论坛的时候,发现很多人都在问一个关于PDF文件打印的问题:打印时如何选择非默认打印机并设置打印页面的范围.而一般情况 ...

  7. PHP代码的执行

    先看下PHP的结构图:

  8. IOS 整体架构 和 MVC布局

    IOS的生态系统 IOS生态系统不仅仅是指产品,更重要的是指 iPhone/iPad/iPod/Mac +iCloud+App整个系统,包括Siri (部分设备不支持).FaceTime.Safari ...

  9. 【NET MVC】View

    通过阅读一些书籍,结合源代码,稍微深入的学习了Asp.Net MVC中的视图View 任何类型的响应都可以利用当前HttpResponse来响应,MVC可以通过Controller的Response属 ...

  10. Maven工程引入jar包

    Maven项目引入jar包的方法 法一.手动导入:项目右键—>Build Path—>Configure Build Path—>选中Libraries—>点击Add Exte ...