JavaScript之jQuery框架简单使用

jQuery

JavaScript之jQuery框架简单使用_第1张图片

一、什么是jQuery

  • jQuery是一个JS框架,极大的简化了JS编程,封装了JS、CSS、DOM,提供了一致的,简洁的API
  • 使用户更方便地处理HTML、Events、实现动画效果,并且方便地为网站提供AJAX交互
  • 使用户的HTML页面保持代码和HTML内容分离

二、jQuery使用

  • 1.使用前需要引入jquery.js文件
  • 如:jquery-1.11.1.js
  • 2.使用jQuery的选择器选中节点
  • 3.调用它的API操作节点

简单实例(点击按钮增加字体字号)





Insert title here




    
    

1.引入jquery.js

2.使用选择器选中节点

3.调用它的API操作节点

JavaScript之jQuery框架简单使用_第2张图片

示例2





Insert title here




    
    

1.jquery对象才能调用jquery方法

2.dom对象才能调用dom方法

3.jquery对象本质上是dom数组

JavaScript之jQuery框架简单使用_第3张图片

选择器示例(过滤选择器*)





Insert title here




    
  • 北京
  • 上海
  • 广州
  • 深圳
  • 杭州
  • 天津
  • 重庆

账号:

密码:

性别:

JavaScript之jQuery框架简单使用_第4张图片

JavaScript之jQuery框架简单使用_第5张图片

读写节点





Insert title here




    

1.jQuery支持读写节点

2.jQuery支持增删节点

3.jQuery支持查询节点

  • 北京
  • 上海
  • 广州
  • 深圳
  • 杭州

JavaScript之jQuery框架简单使用_第6张图片

JavaScript之jQuery框架简单使用_第7张图片

样式操作





Insert title here





    

jQuery专门对象样式操作提供了支持

JavaScript之jQuery框架简单使用_第8张图片

绑定事件





Insert title here





    
    

JavaScript之jQuery框架简单使用_第9张图片

绑定事件案例(模拟网页广告向上自动收起)





Insert title here





    

JavaScript之jQuery框架简单使用_第10张图片

示例(模拟打分器)





Insert title here




    

张三:

李四:

王五:

赵六:

JavaScript之jQuery框架简单使用_第11张图片

JavaScript之jQuery框架简单使用_第12张图片

动画





Insert title here





    

JavaScript之jQuery框架简单使用_第13张图片

案例(模拟购物车)



  
    购物车
    
    
    
    
  
  
    

真划算

商品 单价(元) 颜色 库存 好评率 操作
罗技M185鼠标 80 黑色 893 98%
微软X470键盘 150 黑色 9028 96%
洛克iphone6手机壳 60 透明 672 99%
蓝牙耳机 100 蓝色 8937 95%
金士顿U盘 70 红色 482 100%

购物车

商品 单价(元) 数量 金额(元) 删除
总计

JavaScript之jQuery框架简单使用_第14张图片

你可能感兴趣的:(jQuery,java,web,我的java学习之旅)