jquery--样式操作/click事件/jquery选项卡/jquery索引值/jquery操作属性

jquery样式操作

jquery用法思想二
同一个函数完成取值和赋值

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");


//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquery样式操作</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             // 读取样式
14             alert($('.div1').css('fontSize'));
15 
16             // 设置样式(写入)
17             $('.div1').css({color:'red'});
18 
19             //为id为div1的对象追加样式big
20             $('.div1').addClass('big');
21 
22             //为id为div1的对象移除样式big
23             $('.div1').removeClass('big');
24         })
25 
26     </script>
27 
28     <style>
29         .div1{
30             font-size:30px;
31         }
32 
33         .big{
34             background-color:gold;
35         }
36     </style>
37 </head>
38 <body>
39 
40     <div class="div1">这是一个div元素</div>
41 
42 </body>
43 </html>

绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>click事件</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             $('#btn').click(function(){   //给元素绑定click事件
14                 $('.box').toggleClass('sty');   //重复切换sty样式
15             })
16         })
17     </script>
18 
19     <style type="text/css">
20         .box{
21             width:200px;
22             height:200px;
23             background-color:gold;
24         }
25 
26         .sty{
27             background-color:green;
28         }
29     </style>
30 </head>
31 <body>
32 
33 <input type="button" name="" value="切换" id="btn">
34 <div class="box"></div>
35 
36 </body>
37 </html>

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquery选项卡</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             $('#btns input').click(function(){
14                 // this是原生的对象
15                 $(this).addClass('cur').siblings().removeClass('cur');
16                 //$(this).index() 获取当前按钮所在层级范围的索引值
17                 $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
18             })
19         })
20     </script>
21 
22     <style type="text/css">
23         .btns{
24             width:500px;
25             height:50px;
26         }
27 
28         .btns input{
29             width:100px;
30             height:50px;
31             background-color:#ddd;
32             color:#666;
33             border:0px;
34         }
35 
36         .btns input.cur{
37             background-color:gold;
38         }
39 
40         .contents div{
41             width:500px;
42             height:300px;
43             background-color:gold;
44             line-height:300px;
45             text-align:center;
46             display:none;
47         }
48 
49         .contents div.active{
50             display:block;
51         }
52     </style>
53 </head>
54 <body>
55 
56     <div class="btns" id="btns">
57         <input type="button" name="" value="tab01" class="cur">
58         <input type="button" name="" value="tab02">
59         <input type="button" name="" value="tab03">
60     </div>
61 
62     <div class="contents" id="contents">
63         <div class="active">文字内容一</div>
64         <div>文字内容二</div>
65         <div>文字内容三</div>
66     </div>
67 </body>
68 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquery索引值</title>
 9 
10     <style type="text/css">
11         list li{
12             height:30px;
13             margin-bottom:10px;
14             background-color:gold
15         }
16     </style>
17 
18     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
19     <script type="text/javascript">
20         $(function(){
21             $('.list li').click(function(){
22                 //alert(this.innerHTML)
23                 alert($(this).html())
24             })
25         })
26     </script>
27 </head>
28 <body>
29 
30 <ul class="list">
31     <li>1</li>
32     <li>2</li>
33     <li>3</li>
34     <li>4</li>
35     <li>5</li>
36     <li>6</li>
37     <li>7</li>
38     <li>8</li>
39 </ul>
40 
41 </body>
42 </html>

jquery属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、text() 取出或设置text内容

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('<span>添加文字</span>');

3、attr() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquery操作属性</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             //alert($('.box').html())   // 取出html内容
14             $('.box').html('<a href="http://www.baidu.com">百度网</a>');   // 设置html内容
15 
16             $('.box').attr({title:'这是一个div'});  // 设置title属性值
17             //alert($('.box').attr('class'))    // 取出class属性内容
18 
19             // 读写checkbox的状态用prop方法
20             //alert($('#check').prop('checked'))  //判断该选择项是否默认被选中
21             $('#check').prop({checked:true})    //将该选择项设置为默认选中状态
22 
23             // text() 取出或设置text内容
24             alert($('.box2').text())  //弹出 这是div元素内的span
25             alert($('.box2').html())  //弹出  <span>这是div元素内的span</span>
26         })
27     </script>
28 </head>
29 <body>
30 
31     <div class="box">这是一个div元素</div>
32     <!--<input type="checkbox" name="" id="check" checked>多选-->   <!--这里的checked表示默认选中该选项-->
33     <input type="checkbox" name="" id="check">多选
34     <div class="box2"><span>这是div元素内的span</span></div>
35 </body>
36 </html>

posted on 2019-12-21 17:25 cherry_ning 阅读(252) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning

jquery--样式操作/click事件/jquery选项卡/jquery索引值/jquery操作属性

jquery样式操作

绑定click事件

jquery链式调用

jquery属性操作

导航

公告