• 标签操作
  • 样式操作
  • 位置操作
  • 文本值操作
  • 属性操作
  • 文档处理
• 事件操作
  • 常见事件
  • 克隆案例
  • 悬浮事件hover()
  • 监听input输入值事件
  • 阻止后续事件
  • 事件委托
• 动画效果
• bootstrap框架
  • 布局容器
  • 栅格系统
  • 表格样式
  • 表单样式
  • 按钮
  • 图片
  • 组件
  • JS效果
• 练习

标签操作

样式操作

class属性操作

css操作

jQuery里操作css样式的语法更为简单

标签对象.css(属性,值)  // 等价于DOM中：标签对象.style.属性 = 值

如：设置第一个p标签颜色为红色

$('p:first').css('color', 'red')  
// 等价于DOM中：document.getElementsByTagName('p')[0].style.color = 'red'

位置操作

常用操作

$(window).scrollTop()  // 获取滚动条距离顶端的偏移量

实时监测距离顶部的距离：

$(window).scroll(function () {
    if($(window).scrollTop() > 600){
        alert('超过600了 架不住了')
    }
})

文本值操作

如果括号内不写值，那么就是获取；如果括号内写了值，那么就是设置。

属性操作

attr在对一些动态属性时，不建议使用，比如单选框、复选框，网页选择更改时，attr获取的属性值并不会更改。

所以再对一些动态属性时，可以使用prop动态获取和设置。

文档处理

事件操作

常见事件

绑定方式

// 第一种
$().click(function(){
    
})
// 第二种
$().on('click',function(){
    
})

克隆案例

克隆按钮

悬浮事件hover()

hover()有两次触发条件：鼠标悬浮和鼠标移开，如果要使这两个事件有不同操作，需要写两个函数。

$('p').hover(
    function () {  // 悬浮触发
        this.style.color = 'red'
    },
    function () {  // 移走触发
        this.style.color = 'black'
    }
)

监听input输入值事件

阻止后续事件

如果给已经有事件的标签绑定事件，那么会依次执行；比如form表单中的重置按钮已经有了一个重置的事件。

如果想要取消后续事件的执行，可以使用两种方式阻止：

方式一：函数返回false

$('#d1').click(function () {
    alert(123)
    return false  //  取消当前标签对象后续事件的执行
})

方式二：使用特殊方法

$('#d1').click(function (e) {
    alert(123)
    e.preventDefault()
})

事件冒泡概念

在多个标签嵌套的并且都有相同事件的情况下，会出现逐级汇报的现象，称为事件冒泡。

事件委托

针对动态创建的标签，提前写好的事件默认是无法生效的。比如我先给所有p标签设置了单击事件，打开网页后添加的p标签都是没有单击事件的。

这时候就需要用到事件委托：把一个标签里的一个事件都委托给子标签。

// 将body内所有的点击事件交给p标签处理
$('body').on('click', 'p', function (){
    $(this).css('color','red')
})

动画效果

自定义动画实现点赞效果：

  
  
  
  
  



点赞

bootstrap框架

bootstrap框架内部提供了很多好看的标签样式和功能，我们只需要在编写时给标签加上class属性值就可以使用样式了。

在使用bootstrap框架之前，需要导入css、js，如果要使用动态效果还需要jQuery。

详情：全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

布局容器

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

表格样式

链接：表格样式官网说明

表单样式

链接：表单样式官网说明

按钮

链接：按钮详细说明

图片

链接：图片详细说明

组件

链接：组件

更多图标：http://www.fontawesome.com.cn/

JS效果

链接：JS效果

练习

1.编写一个回到顶部的案例

    
    
    
    
    
    


    


    
    


    
    


    
    
返回顶部

    

2.编写一个简易版本的全选功能，扩展:反选 取消等功能

    
    
    
    


    

        全选
        1
        2
        3
    
    

3.编写一个删除单元格的功能

    
    
    
    
    
    


    

        

            

                

                    
编号
                    
姓名
                    
年龄
                    
操作
                
            
            

                

                    
1
                    
tom
                    
18
                    
添加 删除