目录

一.jQuery操作标签

  1. # class操作									
  2.  jQuery操作								
  3. addClass()                        # 添加指定css类名 							
  4. removeClass()			  # 移除指定css类名			
  5. hasClass()			  # 判断样式是否存在					
  6. toggleClass()			  # 切换css类名，存在移除，不存在新增				
  1. $divEle.css('border','5px solid black')
  2. '给div块级标签 添加5px厚度的 边框 为红色'
  1. offset()                          # 获取匹配元素在当前窗口的相对偏移或设置元素位置
  2. position()                        # 获取匹配元素相对父元素的偏移
  3. scrollTop()                       # 获取匹配元素相对滚动条顶部的偏移
  4. scrollLeft()                      # 获取匹配元素相对滚动条左侧的偏移

可以通过获取滚动条进行额外的操作

二.文本值操作

  1. text()                               
  2. html()                            # 括号内写值设置所有匹配元素的内容 不写值就是获取所有匹配元素的内容
  3. val()
  4. 'files需要转化为js对象'

三.属性操作

  1. $('div').attr('style')                        # 获取第一个标签的style属性值
  2. $('div').attr('class','c1')                   # 批量设置单个
  3. $('div').attr({'name':'jason','pwd':123})     # 批量设置多个
  4. $('div').removeAttr('class')                  # 批量移除
  5. '获取标签属性的时候 针对动态属性 不适用attr()'
  6. '针对动态属性的默认标签checked'
  7. '通过attr获取checked什么都没有'
  8. '而通过prop可以获取checked对应的布尔值 有就true 没有false'

对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

四.文档处理

  1. # 内部添加
  2. $(A).append(B)                     # 把B追加到A
  3. $(A).prepend(B)                    # 把B前置到A
  4. # 外部添加
  5. $(A).after(B)                      # 把B放到A的后面
  6. $(A).before(B)                     # 把B放到A的前面
  7. # 清空内容
  8. $('body').empty()

五.事件操作

  1. click(function(){...}) 关键字.clone
克隆事件代码 
  1. <button id="d1">晚安</button>
  2.   <script>
  3.         $('#d1').click(function () {
  4.         // $('body').append($(this).clone())  // 不克隆事件
  5.         $('body').append($(this).clone(true))  // 克隆事件
  6.         })
  7.   </script>
  1. hover(function(){...})
悬浮事件代码 
  1. $('#d1').hover(function () {alert(123)})
  2. $('#d1').hover(
  3.   function () {alert(123)},       # 悬浮触发
  4.   function () {alert(123)}        # 移走触发
  5. )
  1. $('#d1').on('click',function(){})
值监听代码 
  1. <input type="text" id="d1">
  2. <script>
  3.     $('#d1').on('input',function () {
  4.         console.log($(this).val())
  5.     })
  6. </script>
  1. 方式1. return faklse                 # 消当前标签对象后续事件的执行
  2. 方式2. 关键字.preventDefault()
组织后续事件 
  1. 1.方式1(推荐使用)
  2. 	$('#d1').click(function () {
  3.      alert(123)
  4.      return false  //  取消当前标签对象后续事件的执行
  5.     })
  6. 2.方式2(自带关键字)
  7. 	$('#d1').click(function (e) {
  8.             alert(123)
  9.             e.preventDefault()
  10.     })
  1. # 多个标签嵌套相同的事件，会重复执行事件
  2. 方式1. return false                # 阻止事件传播
  3. 方式2. 关键字.stopPropagation()
  1. '针对动态创建的标签 提前写好的事件默认是无法生效的'
  2. 关键字 on
  4. $('body').on('事件类型','选择器',function(){})
  5. '将body内所有的点击事件交给选择器标签处理'

六.动画效果

  1. hide         # 隐藏
  2. show         # 显示
  4. # 滑动显示       
  5. slideUp      
  6. slideDown
  8. # 淡入淡出
  9. fadeIn       
  10. fadeOut
  11. animate

七.bootstrap框架

  1. # 1.bootstrap版本
  2. 推荐使用v3版本
  4. # 2.基本使用
  5. 本地导入
  6. cdn导入  'bootcdn'
  7. bootstrap需要使用jQuery来实现动态效果
  8. '必须先导入后使用'
  10. # 3.文件组成
  11. bootstrap需要导入两个文件
  12. 一个是css文件
  13. 一个是js文件

八.bootstrap框架基本使用

  1. # 布局容器
  2. class = 'container'  				# 两边有留白
  3. class = 'container-fluid'			# 没有留白
  5. # 栅格系统
  6. class = 'row'  默认开设一行均分12份
  7. class = 'col-md-n'  指定需要几份(电脑屏幕)        # 栅格参数可以做到响应式布局xs sm md lg...
  9. 如果一行十二份用不完 可以调整位置                  # col-md-offset-3
  11. # 表格样式
  12. class="table table-hover table-striped table-bordered"
  14. # 单元格颜色
  15. class="active"
  16. class="success"
  17. class="warning"
  18. class="danger"
  19. class="info"
  21. # 表单样式 
  22. .pull-left			 # 左浮
  23. .pull-right			 # 右浮
  25. class='form-control'             # 针对radio和checkbox不能加!!!
  27. # 按钮样式
  28. class = 'btn'btn-info
  30. # 按钮颜色
  31. class="btn btn-info"
  32. class="btn btn-danger"
  33. class="btn btn-warning"
  34. class="btn btn-primary"
  35. class="btn btn-success"
  37. # 按钮尺寸
  38. class="btn btn-success btn-sm"
  39. class="btn btn-success btn-lg"
  40. class="btn btn-success btn-block"
  42. # 图标
  43. http://www.fontawesome.com.cn/   更多图标

版权声明：本文为笑舞狂歌原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xwkg/p/16217383.html