1. 了解jQuery

是什么: What?
- 一个JS函数库: write less, do more
- 封装简化DOM操作(CRUD) / Ajax
为什么用它: why?
- 强大选择器: 方便快速查找DOM元素
- 隐式遍历(迭代): 一次操作多个元素
- 读写合一: 读数据/写数据用的是一个函数
- 链式调用: 可以通过.不断调用jQuery对象的方法
- 事件处理
- DOM操作(CUD)
- 样式操作
- 动画
- 浏览器兼容
如何使用: How?
- 引入jQuery库
  - 本地引入与CDN远程引入

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
。。。
</script>
复制代码

  * 测试版与生产版(压缩版)
* 使用jQuery
  * 使用jQuery函数: $/jQuery
  * 使用jQuery对象: $xxx
  (执行$()得到的)
复制代码

2. jQuery的2把利器

jQuery函数: $/jQuery

* jQuery向外暴露的就是jQuery函数, 可以直接使用
* 当成一般函数使用: $(param)
  * param是function: 相当于window.onload = function(文档加载完成的监听)
  * param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
  * param是DOM元素: 将DOM元素对象包装为jQuery对象返回  $(this)
  * param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
  
复制代码

// 需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
  // 1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  $(function () {//绑定文档加载完成的监听
  //  2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    $('#btn').click(function () {//绑定点击事件监听
    //  this是什么？发生事件的dom元素（<button>）
    //   alert(this.innerHTML)
    //    3). 参数为DOM对象: 将dom对象封装成jQuery对象
      alert($(this).html())
      //  4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
      $('<input type="text" name="msg3"/><br/>').appendTo('div')
    })

复制代码

jQuery对象

* 包含所有匹配的n个DOM元素的伪数组对象
* 执行$()返回的就是jQuery对象
* 基本行为:
  * length/size(): 得到dom元素的个数
  * 【index】: 得到指定下标对应的dom元素
  * each(function(index, domEle){}): 遍历所有dom元素
  * index(): 得到当前dom元素在所有兄弟中的下标
        
复制代码

 // 需求2. 遍历输出数组中所有元素值
  var arr =[2,3,4,5]

    // $.each() : 隐式遍历数组
    $.each(arr,function (index,item) {
    console.log(index,item)
  })
    // 需求3. 去掉"  my atguigu  "两端的空格
    // $.trim() : 去除两端的空格
  var str = ' my confident'
    // console.log('---'+str.trim()+'---')
    console.log($.trim(str))
  })

复制代码

3. 选择器

是什么?
- 有特定语法规则(css选择器)的字符串
- 用来查找某个/些DOM元素: $(selector)
分类
- 基本
  - #id
  - tagName/*
  - .class
  - selector1,selector2,selector3: 并集
  - selector1selector2selector3: 交集
- 层次
  - 找子孙后代, 兄弟元素
  - selector1>selector2: 子元素
  - selector1 selector2: 后代元素
- 过滤
  - 在原有匹配元素中筛选出其中一些
  - :first
  - :last
  - :eq(index)
  - :lt
  - :gt
  - :odd
  - :even
  - :not(selector)
  - :hidden
  - :visible
  - 【attrName】
  - 【attrName=value】

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求:
   1. 选择第一个div
   2. 选择最后一个class为box的元素
   3. 选择所有class属性不为box的div
   4. 选择第二个和第三个li元素
   5. 选择内容为BBBBB的li
   6. 选择隐藏的li
   7. 选择有title属性的li元素
   8. 选择所有属性title为hello的li元素
   */
  $('div:first').css('background','red')
  $('.box:last').css('background','red')
  $('div:not(.box)').css('background','red')
  $('li:gt(0):lt(2)').css('background','red')
  $('li:lt(3):gt(0)').css('background','red')
  $('li:contains("BBBBB")').css('background','red')
  console.log($('li:hidden').length,$('li:hidden')[0])
  $('li[title]').css('background','red')
  $('li[title="hello"]').css('background','red')

</script>
复制代码

* 表单
  * :input
  * :text
  * :checkbox
  * :radio
  * :checked: 选中的
  
复制代码

工具

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1. $.each(): 遍历数组或对象中的数据
let arr = [1, 2, 3, 5];
  $.each(arr,function (index,item) {
      console.log(index,item)
    })
  // 2. $.trim(): 去除字符串两边的空格
  // 3. $.type(obj): 得到数据的类型
  console.log($.type($))//function
  // 4. $.isArray(obj): 判断是否是数组
  console.log($.isArray($))//false
  // 5. $.isFunction(obj): 判断是否是函数
  console.log($.isFunction($))//true
  // 6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
  var json = '{"name"："tony","age":"14"}';
  console.log($.parseJSON(json))//json 对象 ===》JS对象
  json = '[{"name"："tom","age":"12"},{"name":"lily","age":"18"}]'
  console.log($.parseJSON(json))//json 数组  ===》JS对象

//  JSON.stringify(jsObj/jsArr) js对象/数组 ===》json字符串
</script>
复制代码

02_多Tab点击切换

   var $contents = $('#container>div')

   var currIndex = 0 //当前显示的内容div的下标
   //给3个li加监听
   $('#tab>li').click(function () {//隐式遍历
     //隐藏当前已经显示的内容的div
     $contents[currIndex].style.display = 'none'
     //  显示对应内容的div
     //  得到当前点击li在兄弟中的下标
     var index = $(this).index()
     // 找到对应的内容div，并显示
     $contents[index].style.display = 'block'
   //  更新下标
     currIndex = index
   })
复制代码

4. 属性/文本

操作标签的属性, 标签体文本
attr(name) / attr(name, value): 读写非布尔值的标签属性
prop(name) / prop(name, value): 读写布尔值的标签属性
removeAttr(name)/removeProp(name): 删除属性
addClass(classValue): 添加class
removeClass(classValue): 移除指定class
val() / val(value): 读写标签的value
html() / html(htmlString): 读写标签体文本

伪（类）数组

// 1. 读取第一个div的title属性
  console.log($('div:first').attr('title'))
  // 2. 给所有的div设置name属性(value为atguigu)
  $('div').attr('name','july')
  // 3. 移除所有div的title属性
  $('div').removeAttr('title')
  // 4. 给所有的div设置class='july'
  $('div').attr('class','july')

  // 5. 给所有的div添加class='abc'
  $('div').addClass('abc')

  // 6. 移除所有div的july的class
  $('div').removeAttr('july')

  // 7. 得到最后一个li的标签体文本
  console.log($('li:last').html())
  // 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
  $('li:first').html('<h1>mmmmmmmmm</h1>')
  // 9. 得到输入框中的value值
  console.log($(':text').val())
  // 10. 将输入框的值设置为atguigu
  $(':text').val('july')
  // 11. 点击'全选'按钮实现全选
  var $checkboxs = $(':checkbox')
  $('button:first').click(function () {
      $checkboxs.prop('checked',true)
    })

  // 12. 点击'全不选'按钮实现全不选
  $('button:last').click(function () {
    $checkboxs.prop('checked',false)
  })
复制代码

5. CSS模块

style样式
- css(styleName): 根据样式名得到对应的值
- css(styleName, value): 设置一个样式
- css({多个样式对}): 设置多个样式

// 1. 得到第一个p标签的颜色
  console.log($('p:first').css('color'))
  // 2. 设置所有p标签的文本颜色为red
  $('p').css('color','red')
  // 3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
  $('p:eq(1)').css({
    color:'#ff0011',
    background:blue,
    width:300,
    height:20
  })
复制代码

位置坐标
- offset(): 读/写当前元素坐标(原点是页面左上角)
- position(): 读当前元素坐标(原点是父元素左上角)
- scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标

// 1. 点击 btn1
  $('#btn1').click(function () {
  // 打印 div1 相对于页面左上角的位置
    var offset = $('.div1').offset()
    console.log(offset.left,offset.top)
    // 打印 div2 相对于页面左上角的位置
    offset = $('.div2').offset()
    console.log(offset.left,offset.top)
    // 打印 div1 相对于父元素左上角的位置
    var position = $('.div1').position()
    console.log(position.left,position.top)
    // 打印 div2 相对于父元素左上角的位置
    var position = $('.div2').position()
    console.log(position.left,position.top)
  })

  // 2. 点击 btn2
  // 设置 div2 相对于页面的左上角的位置
  $('#btn2').click(function () {
   $('.div2').offset({
     left:50,
     top:100
   })
  })
复制代码


 // 1. 得到div或页面滚动条的坐标
  $('#btn1').click(function () {
    console.log($('div').scrollTop())
    console.log($('html').scrollTop()+$('body').scrollTop())
  })
  // 2. 让div或页面的滚动条滚动到指定位置
  $('#btn2').click(function () {
    $('div').scrollTop(400)
    $('html,body').scrollTop(300)
  })
复制代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>03_回到顶部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1250px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $('#to_top').click(function () {
    //way 1 ：瞬间到顶部
    // $('html,body').scrollTop(0)

  // way 2 ： 平滑到顶部
    //  总距离
    var $page = $('html,body')
    var distance =$('html').scrollTop() + $('body').scrollTop()
    //  总时间
    var time = 50
    //  间隔时间
    var intervalTime = 50
    var itemDistance = distance/(time/intervalTime)

    //  使用循环定时器
    var intervalId = setInterval(function () {
      distance -= intervalTime
      //  到达顶部，停止定时器
      if (distance <= 0){
        distance = 0///修正
        clearInterval(intervalId)//清除定时器
      }
      $page.scrollTop(distance)
    },intervalTime)

  })
</script>

</body>
</html>
复制代码

尺寸
- width()/height(): width/height
- innerWidth()/innerHeight(): width + padding
- outerWidth()/outerHeight(): width + padding + border

6. 筛选模块

过滤
- 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
- first()
- last()
- eq(index)
- filter(selector): 对当前元素提要求
- not(selector): 对当前元素提要求, 并取反
- has(selector): 对子孙元素提要求
查找
- 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
- children(selector): 子元素
- find(selector): 后代元素
- preAll(selector): 前的所有兄弟
- siblings(selector): 所有兄弟
- parent(): 父元素

7. 文档处理(CUD)模块

增加
- append() / appendTo(): 插入后部
- preppend() / preppendTo(): 插入前部
- before(): 插到前面
- after(): 插到后面
删除
- remove(): 将自己及内部的孩子都删除
- empty(): 掏空(自己还在)
更新
- replaceWith()

8. 事件模块

绑定事件
- eventName(function(){})
- on(‘eventName’, function(){})
- 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
- hover(function(){}, function(){})
解绑事件
- off(‘eventName’)
事件委托
- 理解: 将子元素的事件委托给父辈元素处理
  - 事件监听绑定在父元素上, 但事件发生在子元素上
  *　事件会冒泡到父元素
  - 但最终调用的事件回调函数的是子元素: event.target
- 好处
  - 新增的元素没有事件监听
  - 减少监听的数量(n==>1)
- 编码
  - delegate(selector, ‘eventName’, function(event){}) // 回调函数中的this是子元素
  - undelegate(‘eventName’)
事件坐标
- event.offsetX: 原点是当前元素左上角
- event.clientX: 原点是窗口左上角
- event.pageX: 原点是页面左上角
事件相关
- 停止事件冒泡: event.stopPropagation()
- 阻止事件的默认行为: event.preventDefault()

动画效果

在一定的时间内, 不断改变元素样式
slideDown()/slideUp()/slideToggle()
fadeOut()/fadeIn()/fadeToggle()
show()/hide()/toggle()
animate({结束时的样式}, time, fun)
stop()

9. 插件机制

扩展jQuery函数对象的方法

 $.extend({
      xxx: fuction () {} // this是$
    })
    $.xxx()
复制代码

扩展jQuery对象的方法

 $.fn.extend({
      xxx: function(){}  // this是jQuery对象
    })
    $obj.xxx()
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

OpenVPN management管理接口TCP会话信息泄露漏洞

Microsoft DCOM RPC远程竞争条件漏洞(MS04-012)

ImageMagick 拒绝服务攻击漏洞

Lysator LSH未明拒绝服务漏洞

Adobe Photoshop 远程缓冲区溢出漏洞

Cobham Sailor 6000 Series 安全漏洞

Jquery相关知识总结

1. 了解jQuery

2. jQuery的2把利器

jQuery函数: $/jQuery

jQuery对象

3. 选择器

4. 属性/文本

5. CSS模块

6. 筛选模块

7. 文档处理(CUD)模块

8. 事件模块

动画效果

9. 插件机制

OpenVPN management管理接口TCP会话 信息泄露漏洞

Microsoft DCOM RPC远程竞争条件漏洞(MS04-012)

ImageMagick 拒绝服务攻击漏洞

Lysator LSH未明拒绝服务漏洞

Adobe Photoshop 远程缓冲区溢出漏洞

Cobham Sailor 6000 Series 安全漏洞

Jquery相关知识总结

1. 了解jQuery

2. jQuery的2把利器

jQuery函数: $/jQuery

jQuery对象

3. 选择器

4. 属性/文本

5. CSS模块

6. 筛选模块

7. 文档处理(CUD)模块

8. 事件模块

动画效果

9. 插件机制

OpenVPN management管理接口TCP会话信息泄露漏洞