CDN远程引入<scriptsrc="https://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script>
本地引入 <scripttype="text/javascript"src="js/jquery-1.10.1.js"></script>
<scripttype="text/javascript">
 attr: 设置非布尔值的属性
   写入：重写属性值，原先不会保留
 prop: 设置布尔值的属性 : checked disabled

jQuery优点：链式调用  读写合一（position只能写不能读）  HTML标签选择器    隐式遍历  浏览器兼容

本地引入：生产/开发/测试完整版：生产/开发/测试

压缩版：上线/部署CDN远程引入：上线/部署
jQuery的两把利器：1、 jQuery核心函数2 jQuery核心对象
1、Query核心函数的用法
作为函数使用
$(param)：param不同，功能不同
Param为选择器字符串：获取所有匹配的N个dom对象
Param为Dom对象：将Dom对象转化为jQuery对象
Param为函数：相当于window.onload = function () {}
Param为HTML标签体字符串：创建一个对应的jQuery对象
2、作为对象使用
$.each(obj/arr, function(){}) : 遍历指定对象/数组
$.trim(str): 删除指定字符串两端空格
4. jQuery核心对象的用法
jQuery对象：包含所有匹配的N个Dom对象的伪数组对象
$xxx.size()/$xxx.length: 得到长度
$xxx[index]/$xxx.get(index):   获取到指定下标的dom元素
$xxx.index(): 得到它在兄弟元素的下标
$xxx.each(function (index, domEle) {}): 遍历jQuery对象
typeof $  $的类型    $ === jQuery      当函数用: $(xxx)     当对象用: $.xxx()

$.each() : 隐式遍历数组         $.trim() : 去除两端的空格

选择器有特定格式的字符串
基本选择器
  - #id : id选择器
  - element : 元素选择器
  - .class : 属性选择器
  - * : 任意标签
  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
 $('div, span').css('background', 'red')  //并集
  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)
 $('div.box').css('background', 'red')  //交集
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant
  在给定的祖先元素下匹配所有的后代元素
2. parent>child
  在给定的父元素下匹配所有的子元素
3. prev+next
  匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings
  匹配 prev 元素之后的所有 siblings 元素
. 选中ul下的class为box的元素后面的所有兄弟元素
  $('ul .box~*').css('background', 'red')
选择所有class属性不为box的div
  $('div:not(.box)').css('background', 'red')
$('li:gt(0):lt(2)').css('background', 'red')    
$('li:lt(3):gt(0)').css('background', 'red')
gt大于0（下标）  lt小于2（下标）执行一个就会过滤掉不符合的剩下的下表重新排列
 选择内容为BBBBB的li      $('li:contains(BBBBB)').css('background', 'red')
选择隐藏的li        $('li:hidden').show()
选择有title属性的li元素         $('li[title]').css('background', 'red')
选择所有属性title为hello的li元素      $('li[title=hello]').css('background', 'red')
 1. 选择不可用的文本输入框
 $(':disabled').css('background', 'red')
2. 显示选择爱好 的个数
 console.log($(':checkbox:checked').length)
 3. 显示选择的城市名称
  console.log($('select option:selected').html())
1. $.each(): 遍历数组或对象中的数据
var obj = {
  name: 'bajie',
  age: 18
}
$.each(obj, function (key, value) {
  console.log(key, value)
})
//2. $.trim(): 去除字符串两边的空格
//3. $.type(obj): 得到数据的类型
console.log($.type($), $.type(obj))  //function  object
//4. $.isArray(obj): 判断是否是数组
console.log($.isArray([]), $.isArray($()))  //true  false
//5. $.isFunction(obj): 判断是否是函数
console.log($.isFunction($), $.isFunction(jQuery))  // true true
//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
var $divs = $('div')
//1. 读取第一个div的title属性
  console.log($('div:first').attr('title'))
//2. 给所有的div设置name属性(value为atguigu)
  $divs.attr('name', 'atguigu')   //读写合一
//3. 移除所有div的title属性
  $divs.removeAttr('title')   //attribute属性
//4. 给所有的div设置class='guiguClass'
  $divs.attr('class', 'guiguClass')
//5. 给所有的div添加class='abc'
  $divs.addClass('abc')
//6. 移除所有div的guiguClass的class
  $divs.removeClass('guiguClass')
//7. 得到最后一个li的标签体文本
  console.log($('li:last').html())
//8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
  $('li:first').html("<h1>mmmmmmmmm</h1>")  //读写合一
//9. 得到输入框中的value值
  var $textInput = $(':text')
  console.log($textInput.val())
//10. 将输入框的值设置为atguigu
  $textInput.val('atguigu')
//11. 点击'全选'按钮实现全选
  $('button:first').click(function () {
    $(':checkbox').prop('checked',true)
  })
//12. 点击'全不选'按钮实现全不选
  $('button:last').click(function () {
    $(':checkbox').prop('checked', false)
  })
/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: '300px',
    height: '30px'
  })
 

获取/设置标签的位置数据

  * offset(): 相对页面左上角的坐标
  * position(): 相对于父元素左上角的坐标
 var offset1 = $div1.offset()
 console.log(offset1, offset1.top, offset1.left)
var position2 = $div2.position()
    console.log(position2, position2.top, position2.left)
1. scrollTop():
  读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
  读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
  设置滚动条滚动到指定位置(兼容chrome和IE)
1. 内容尺寸
  height(): height
  width(): width
2. 内部尺寸
  innerHeight(): height+padding
  innerWidth(): width+padding
3. 外部尺寸
  outerHeight(false/true): height+padding+border  如果是true, 加上margin
  outerWidth(false/true): width+padding+border 如果是true, 加上margin

在jQuery对象中的元素对象数组中过滤出一部分元素来

1. ul下li标签第一个    $('ul li').first().css('background', 'red')  //链式调用
2. ul下li标签的最后一个     $('ul li').last().css('background', 'red')
3. ul下li标签的第二个    $('ul li').eq(1).css('background', 'red')
4. ul下li标签中title属性为hello的   $('ul li').filter('[title=hello]').css('background', 'red')
5. ul下li标签中title属性不为hello的
  $('ul li').not('[title=hello]').css('background', 'red')
  $('ul li').filter(':not([title=hello])').css('background', 'red')
  $('ul li').filter('[title!=hello]').css('background', 'red')
6. ul下li标签中有span子标签的     ('ul li').has('span').css('background', 'red')

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签

1. children('span:eq(1)'): 子标签中找
2. find(('span:eq(1)') : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签

1. 添加/替换元素

  * append(content)  向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)   将指定内容插入到当前所有匹配元素的前面
  * after(content)   将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)   用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()  删除所有匹配元素的子元素
  * remove()   删除所有匹配的元素

 事件绑定(2种)：

  * eventName(function(){})绑定对应事件名的监听。例如：$('#div').click(function(){});
  * on(eventName, funcion(){}) 通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
  * off(eventName)
3. 事件的坐标
  * event.clientX, event.clientY  相对于视口的左上角
  * event.pageX, event.pageY  相对于页面的左上角
  * event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
  * 停止事件冒泡 : event.stopPropagation()
  * 阻止事件默认行为 : event.preventDefault()
 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
  /*$('.inner').mouseenter(function () {
    console.log('移入')
  }).mouseleave(function () {
    console.log('移出')
  })*/
  /*$('.inner').on('mouseenter', function () {
    console.log('移入')
  }).on('mouseleave', function () {
    console.log('移出')
  })*/
//  $('.inner').hover(function () {
//    console.log('移入')
//  }, function () {
//    console.log('移出')
//  })

区别mouseover与mouseenter?

*mouseover:在移入子元素时也会触发,对应mouseout
*mouseenter:只在移入当前元素时才触发,对应mouseleave
hover()使用的就是mouseenter()和mouseleave()
1. 事件委托:
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
3. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)
区别:window.onload与$(document).ready()
*window.onload
*包括页面的图片加载完后才会回调(晚)
*只能有一个监听回调
*$(document).ready()
*等同于:$(function(){})
*页面加载完就回调(早)
*可以有多个监听回调

需求1. 统计一共有多少个按钮

1. var $buttons = $('button')

2. console.log($buttons.size(), $buttons.length)

3. 取出第2个button的文本（DOM元素显示文本用innerHTML jQuery用.html）

4. console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)

绑定文档加载完成监听

1. $(function () {

2. //获取btn2按钮，绑定点击事件监听

3. $('#btn2').click(function () {

4. alert($('#username').val())

5. })

6. })

IIFE 匿名立即执行函数

1. (function (window) {

2. //jQuery是一个函数，执行jQuery函数返回是一个对象

3. var jQuery = function () {

4. return new jQuery.fn.init()

5. }

6. //向外暴露两个变量 jQuery/$

7. window.jQuery = window.$ = jQuery

8. })(window)

1). 参数为函数 : 当DOM加载完成后，执行此回调函数

$(function () {}

2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对

    $('#btn').click(function () {

      //alert(this.innerHTML)}

3). 参数为DOM对象: 将dom对象封装成jQuery对象

      alert($(this).html())

4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

      $('<input type="text" name="msg3"/><br/>').appendTo('div')

})

需求2. 遍历输出数组中所有元素值

1. var arr = [1,5,3,6,8]

2. $.each(arr, function (index, item) {

3. console.log(index, item)

4. })

需求3. 去掉"  my atguigu  "两端的空格

1. var str = " my atguigu "

2. console.log('---' + $.trim(str) + '---')

3. })

需求1. 统计一共有多少个按钮
  var $buttons = $('button')
  console.log($buttons.size(), $buttons.length)
//需求2. 取出第2个button的文本
  console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)
//需求3. 输出所有button标签的文本
  $buttons.each(function (index, domEle) {
    console.log(index, domEle.innerHTML)
  })
//需求4. 输出'测试三'按钮是所有按钮中的第几个

  console.log($('#btn3').index())

1. 执行$()返回的就是jQuery对象

2 jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
3. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标

什么是伪数组？

  *   1. 有数组的一般特性：通过下标取值，有length属性
  *   2. 没有数组的一般方法：pop() shift() forEach() ...