07前端开发jQuery

"""
一定要明确手上的标签是什么对象
    如果原生的js代码查找出来的对象  那么只能调用原生的js方法
    如果原生的jQuery代码查找出来的对象  那么只能调用原生的jQuery方法

原生js与jQuery对象的关系

       可以将jQuery对象看成是数组包了标签对象
       原生js就是标签对象

    eg：['jason',  ]
            'jason'
   $('#d1')[0]    //  jQuery对象转原生js对象
    $(标签对象)   //  原生js对象转jQuery对象
"""

原生js代码查找标签绑定变量名推荐使用：   xxxEle
jQuery代码查找标签绑定变量名推荐使用：  $xxxEle

"""语法上比js更简洁"""

#class操作
  addClass（）                    classlist.add()
  removeClass（）                classlist.remove()
   hasClass（）                    classlist.contains()
   toggleClass（）                classlist.toggle()

#样式操作
 $divEle.css('border', '5px  solid  black')

#位置操作
  $(window).scrollTop()        获取左侧滚动条距离顶端的位移量

'''实时监测距离
   $(window).scroll(function(){
                 if($window).scrollTop() > 600){
                          alert('超过600了  架不住了‘')
                   } 
             }) 
'''

       jQuery                                      DOM
         text（）                                innerText
         html()                                  innerHTML
         val()                                     value
        转js对象                                  files

'''不写值就是获取  写了就是设置'''

$('div').attr('style')   #获取第一个标签的style属性值
$('div').attr('class','c1')    #批量设置单个
$('div').attr({'name':'jason','pwd':123})    #批量设置多个
$('div').removeAttr('class')   #批量移除

'''
   获取标签属性的时候   针对动态属性   尤其是复选框   不建议使用attr（）
    prop（'checked'）    结果是布尔值
    prop（'checked',  false）    动态设置
'''

#内部添加
$(A).append(B)  //  把B追加到A
$(A).appendTo(B)  //  把A追加到B
$(A).prepend(B)  //  把B前置到A
$(A).prependTo(B)  //  把A前置到B

#外部添加
$(A).after(B)  //  把B放到A的后面
$(A).before(B)  //  把B放到A的前面

#情况内容
$('body').empty()

#克隆
.clone()   只是克隆文本，不克隆文本的功能
.clone（ture）   文本的功能和文本都克隆，可以说是一模一样

$('#d1').hover(function(){alert(123)})
鼠标悬浮上去和移开各自触发一次
如果想要悬浮和移开分开执行不同的操作  需要写两个函数
$('#d1').hover(
       function(){alert(123)},   #悬浮触发
       function(){alert(123)}    #移走触发
)

'''
jQuery绑定事件有两种方式
     $('#d1').click(function(){})
     $('#d1').on('click',function(){})
   有时候第一种绑定事件的方式无法生效  那么就使用第二种

'''

<input type="text"  id="d1">
  <script>
    $('#d1').on('input',function (){
      console.log($(this).val())
    })
  </script>   #平时我们在写身份证或者什么数字的时候，可以实时监控到有多少位，就是因为这个

'''
如果给已经有事件的标签绑定事件  那么会依次执行
如果想要取消后续事件的执行   可以使用两种方式阻止
'''
1.方式1（推荐使用）
   在写好的事件后面加上  
      $('#d1').click(function(){
                    alert(123)
                     return false   //  取消当前标签对象后续事件的执行

2.方式2（自带关键字）
    $('#d1').click(function(e){
                    alert(123)
                      e.preventDefault()
      })

'''
在多个标签嵌套并且都有相同事件的情况下   会出现逐级汇报的现象
'''

阻止冒泡的方法

方法1
   return  false  #和上面那个一致

方法2
   e.stopPropagation()

'''
针对动态创建的标签   提前写好的事件默认是无法生效的
'''

$('body').on('事件类型'，'选择器'，function(){})

#将body内所有的点击事件交给button标签处理
$('body').on('click'，'button'，function(){})

#基本
hide 隐藏  以左上方的点为基点隐藏
show  展示 以左上方的点为基点
#滑动
slideUp   
slideDown 
#淡入淡出 
fadeIn
fadeOut  
 #自定义（了解即可） 
animate  

#bootstrap框架
   内部提供了很多漂亮的标签样式和功能    我们只需要CV使用即可

#bootstrap版本
   推荐使用v3版本

#基本使用
  必须先导入后使用
  1.本地导入
  2.cdn导入
   bootcdn
bootstrap需要使用jQuery来实现动态效果

#文件组成
  bootstrap需要导入两个文件
   一个是css文件
  一个是js文件

class = 'container'  两边有留白
class = 'container-fluid'   没有留白

class = 'row'  默认开设一行均分12份
class =  'col-md-n'     n表示指定需要几份（电脑屏幕）
   #栅格参数可以做到响应式布局xs超小屏幕     sm平板屏幕   lg 超大屏幕。。。


如果一行12份用不完  可以调整位置
   col-md-offset-n    #这里的n表示向右移动n份 

参考官网即可  有样式有源码  拷贝使用即可
#表格样式
class = "table  table-hover  table-striped  table-border" 
          #表格 样式          表格颜色深浅             表格边框

#单元格颜色
class = "active"
class = "success"
class = "warning"
class = "danger"
class = "info"

.pull-left  左浮
.pull-right  右浮

class= 'form-control'    加了可以装饰的好看一些
针对radio和checkbox不能加，加了很丑

#按钮样式
class = 'btn'

#按钮颜色
btn-info
btn-danger
btn-warning
btn-primary
btn-success

#按钮尺寸
btn-sm   #小按钮
btn-lg   #大按钮
btn-block  #全屏

<span>  class = "glyphicon  glyphicon-user"</span>

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

尤其是前端框架   几乎都是直接看官网拷贝样式即可

1.编写一个回到顶部的案例
2.编写一个简易版本的全选功能
   课外扩展：反选  取消等功能