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 ...

随机推荐

ASP.NET Core的配置（2）：配置模型详解
在上面一章我们以实例演示的方式介绍了几种读取配置的几种方式,其中涉及到三个重要的对象,它们分别是承载结构化配置信息的Configuration,提供原始配置源数据的ConfigurationProvi ...
使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE解决办法
需要下载Genymotion-ARM-Translation_v1.1.zip ARM插件包用于安装ARM架构的程序,将下载好的zip包用鼠标拖到虚拟机窗口中,出现确认对跨框点OK就行.然后重启你 ...
ES6 - Note2：解构赋值
ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...
iOS开发之SQLite-C语言接口规范(一)——Ready And Open Your SQLite
为什么要搞一搞SQLite的C语言接口规范呢? 因为在做iOS开发中难免会遇到操作数据库的情况,你可以使用第三方的FMDB等,或者使用CoreData.但我们还是有必要去搞清楚如何去使用SQLite的 ...
php使用post方式获得文件扩展名
<form action="" method="post"> <input type="file" value=" ...
Stackoverflow/dapper的Dapper-Extensions用法（一）
Dapper-Extensions Dapper Extensions is a small library that complements Dapper by adding basic CRUD ...
深入seajs源码系列三
入口方法每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use(),这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个 ...
java之文件基本操作
java之文件基本操作 1 使用 BufferedReader 在控制台读取字符 public static void readChar() throws IOException{ char c; I ...
C++中的std详解
以下内容为:本人看C++视频教程-范磊主讲(2.91G)视频学习笔记. 与大家分享下,希望可以帮助大家学习c++! 引例: #include<iostream> int main() { ...
在Navicat premium上创建的SQL Server数据库,实现用PHP连接(即php连接微软MSSQL)
用 freetds 或 dblib的方式连接sql server 在windows下使用FreeTDS 什么是FreeTDS? FreeTDS其实就是一个开源(或者可以说成自由)的C程序库,它可以实现 ...

jQuery属性/CSS使用例子

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

随机推荐

热门专题