Jquery精分记录

Posted on 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//选择器
$('#a')
.css('color','blue')
.css('background','red'); //通过id选择器选择元素

$('#a p')
.css('border','2px solid black');  //选择嵌套在a元素里面的p元素

$('.b')
.css('color','white')
.css('background','red'); //通过类选择器选择元素

$('input[type="number"]')
.css('background','black'); 

过滤器
1
2
3
4
5
6
7
8
9
10
11
12
13
$('div .child')

$('.grandpa') 
.find('.child')
.css('border','2px solid #999');  //从爷爷往下找两个孙子

$('#child1')
 .parent()
 .css('border','2px solid #666'); //找当前元素的父级元素

$('.child')
.filter('.not-gay')
.css('background','red');   //filter过滤器

通过这样可以把多行css一起写进去

1
2
3
4
5
6
$('#a')
    .css({
        background: 'blue',
        color: 'red',
        border: '12px solid #444'
    })
1
2
也可以在html里面的style中写样式之后在js中用JQuery引用,怎么引用呢,如下
 .addClass('')
  • .removeClass(‘’)删除一个类
  • console.log(a.hasClass(‘’)); 查看a下面是否有这个类
  • a.hide(); a.show(); 隐藏和显示
  • a.fadeOut()淡淡消逝 a.fadein() 淡淡出现
  • a.slideUp() a.slideDown从上往下消逝 中间的括号可以加时间参数
1
2
3
4
5
操作DOM .addpend()
        .repend()
        .html()
        .text()
        .remove()

这段JS函数通过事件来触发html 的广告牌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<body>
       <style>
        #board.active{
            color: red;
        }
       #board {
           background: #000;
           padding: 5px;
           font-family: sans-serif;
           
       }
    </style> 
    <button class="board-trigger">显示/隐藏</button>
    
<div id="board">保健用品 二楼左转</div>


---

---

//JS中
boardTrigger.on('click',
    function(){
        if(board.is(':visible')){
            board.slideUp();
        }else{
            board.slideDown();
        }
    }
)

修改属性方法

  1. attribute 显性修改 能修改自定义属性
  2. prop 隐性修改 不能修改自定义属性
  3. removeAttr 删除属性