JQuery

JQuery

获取:$("css选择器")
修改
- 内容
  - text()
  - html()
  - val()
- 属性
  - prop()
  - attr()
  - addClass()
  - removeClass()
添加
- append()
- before()
- after()
删除
- remove()
获取子标签
- children()
- find()
获取兄弟标签
- prev()
- next()
获取父标签
- parent()
- parents()
修改css
- css()
事件
- on()
遍历
- eq()
- first()
- last()
- each()
动画
- 内置
  - fadeIn()
  - fadeOut()
  - slideDown()
  - slideUp()
- 自定义
  - aniamte()

基础概念

背景

JavaScript 原生DOM部分的不便之处：
- 单词太多-api不好记，
- 设置事件不方便，代码量较大
- 调用繁琐。比如找父元素，遍历多个标签等

概念

jQuery是第三方的JavaScript函数库。jQuery本质是一个js文件。内部已经写好了大量的函数用于进行快捷的DOM操作。jQuery旨在write less，do more。

版本

目前国内用的比较多的是3.5.1版本。以及能够支持ie8的1.11.1版本
从jQuery2.x开始，就不再支持ie8。

引入jQuery

通过<script src="文件路径"></script>引入。
jQuery是先引入才能使用

<script src="./jquery.1.11.1.min.js"></script>
<script>
    //jQuery代码
</script>

jQuery的一般使用流程

页面引入了jQuery
利用jQuery选择器找到需要操作的HTML标签
通过jQuery提供的函数完成dom操作

注意点

如果页面使用了jQuery，那么用jQuery操作的HTML标签就不能再使用原生的dom api。比如innerHTML、appendChild、parentElement等。如果要用，那么必须先完成jQuery标签和原生DOM标签的转换

获取jQuery标签以及和原生DOM标签的切换

通过jQuery获取页面上的标签

$("css选择器");
//例子：
var $box = $('#box');//获取id为box的HTML标签

通过css选择器去寻找匹配到的HTML标签，会根据返回的个数自动判断是返回一个元素或一个数组。

jQuery标签和DOM标签切换

jQuery转原生DOM

var 原生dom标签变量名 = jQuery标签变量名.get(0);
例子：
var $box  = $('#box');
//把jquery 转为原生 DOM 标签
 var box = $box.get(0);
console.log($box)
console.log(box);

原生DOM 转为jQuery

var jQuery标签变量名 = $(原生dom标签变量名);
例子：
var box = document.querySelector('#box');
var $box = $(box);
console.log($box);

内容、属性操作

内容相关

html(): 类似于原生中的innerHTML。用于获取某个标签的内部HTML代码
text()：类似于原生的innerText，获取标签的内部文本
val():类似于原生的value，主要获取表单元素的内容。

语法：
jQuery标签变量名.html();
jQuery标签变量名.html("新内容");
jQuery标签变量名.text();
jQuery标签变量名.text("新内容");
jQuery标签变量名.val();
jQuery标签变量名.val("新内容");
例子：
html : 
<div>
<p>这是div中的 p标签</p>    
</div>
<input value="123">
获取：
var divText = $('div').text();
var divHTML = $('div').html();
var inputValue= $('input').val();
设置
$('div').text('新内容');
$('div').html("<a href='#'>百度一下</a>");
$('input').val("456");

属性相关

attr():获取或设置HTML标签的某个属性
prop():获取或设置HTML标签的某个属性
- 跟attr()的区别在于prop适用于标签的内置属性，而attr()更适用于用户自定义属性。
removeProp():删除指定的某个属性
removeAttr():删除指定的某个属性.推荐使用
addClass():给某个标签追加一个class
removeClass()：删除某个标签的指定class

语法：
jQuery标签变量名.attr("属性名");
jQuery标签变量名.attr("属性名","属性值");
jQuery标签变量名.prop("属性名");
jQuery标签变量名.prop("属性名","属性值");
jQuery标签变量名.removeProp("属性名");
jQuery标签变量名.removeAttr("属性名");
jQuery标签变量名.addclass("class名");
jQuery标签变量名.removeclass("class名");
例子：
html:
<div class="item">
<p>这是div中的 p标签</p>    
</div>
<input value="123">
JavaScript：
//获取
var value1 = $('input').attr('value')
var value2 = $('input').prop('value')
//设置
$('div').addClass('box');
$('div').removeClass('item');

修改css

css()

语法： 
//设置
jQuery标签变量名.css('css属性名','css属性值');
//批量设置css
jQuery标签变量名.css({
    'css属性名1':'css属性值1',
    'css属性名2':'css属性值2',
    'css属性名3':'css属性值3',
});
//获取 
jQuery标签变量名.css('css属性名');
例子：背景颜色为红色,字体颜色为白色，有一个白色的1px的边框
html :
<div id="box"></div>
JavaScript:
var $box  = $('#box');
//$box.css('background-color','red');
//$box.css('color','white');
//$box.css('border','1px solid white');
// css批量设置
$bos.css({
    'background-color':'red',
    'color':'white',
    "border":"1px solid white"
});

添加、删除

添加

append()：类似于原生的appendChild，在某个标签之后插入一个新标签，新标签会作为最后一个子标签
before():在某个标签之前插入一个新标签,新标签会作为上一个兄弟标签
after():在某个标签之后插入一个新标签，新标签会作为下一个兄弟标签

语法： 
jQuery标签变量名.append("新标签的HTML代码");
jQuery标签变量名.before("新标签的HTML代码");
jQuery标签变量名.after("新标签的HTML代码");
例子：
  //添加和删除
      var newTr = `<tr>
        <td>卫龙辣条3</td>
        <td><img src="img/id3.jpg" alt="" /></td>
        <td>5</td>
        <td>
          <button >-</button>
          <input type="text" value="1" />
          <button >+</button>
          <button >删除</button>
        </td>
        <td>0</td>
      </tr>`;
      // 1. 生成一个新商品tr作为tbody的最后一个子标签
      //$('tbody').append(newTr);
      // 2.插入到总价tr之前  before 
      //$('tbody tr:last-child').before(newTr);
      //3. 作为tbody的第一个商品 
     // $('tbody tr:first-child').before(newTr);
      // 4作为tbody的第二个商品:after 
      //$('tbody tr:first-child').after(newTr);

删除

remove():删除找到的所有标签

jQuery标签变量名.remove();
例子：删除除了总价行以外的所有的tbody中的tr
$('tbody tr:not(:last-child)').remove();

如果找到了多个标签，其中的每个标签都会被删除

获取子、兄弟、父标签及遍历

获取子标签

children():获取某个标签的所有直接子标签
find('css选择器'):根据css选择器获取某个标签的满足条件的所有后代标签

获取兄弟标签

prev():获取某个标签的上一兄弟标签
next():获取某个标签的上一兄弟标签

获取父标签

parent():获取某个标签的直接父标签
parents('css选择器'):获取某个标签的某个祖先标签，具体是通过css选择器来指代

jQuery标签变量名.parent();
jQuery标签变量名.parents(css选择器);
jQuery标签变量名.prev();
jQuery标签变量名.next();
jQuery标签变量名.children();
jQuery标签变量名.find(css选择器);
例子：
//获取兄弟标签
// 获取.goodInput的上一个和下一个兄弟标签
var $input = $('.goodInput');
var $prev = $input.prev();
var $next = $input.next();
//获取父标签
// 获取.goodInput的父标签 以及对应的tr标签
var $input = $('.goodInput');
var $father = $input.parent();
//  var $tr = $father.parent();
var $tr = $input.parents('tr');
//获取子标签
//获取tbody的所有tr标签以及其中的所有的input标签
var $tbody = $('tbody');
//所有的tr
var $trs = $tbody.children();
//找到tbody中的所有input标签
var $inputs = $tbody.find('input');

遍历

first():获取遍历标签中的第一个
last()：:获取遍历标签中的最后一个
each():jQuery专门用于对jQuery标签的快捷遍历
eq(i):获取找到标签中指定下标的标签，即第i个jQuery标签

语法
//旧:遍历找到的input标签 :eq()
for(var i=0;i<$inputs.length;i++){
   var $input = $inputs.eq(i);//等同于$inputs[i]
}
//jQuery 遍历 
$jQuery待遍历标签变量名.each(function(index){
    //index是当前遍历数据的下标，从0开始
    this指的是当前遍历的标签，原生dom  ->$(this)转为jQuery标签
});
$jQuery待遍历标签变量名.first();
$jQuery待遍历标签变量名.last();
例子：
// each 
var $items = $('.item');
$items.each(function(index,elem){
            //index是当前遍历下标,elem就是指的this，可选
            // console.log($(this));
            var old = Number($(this).text());
            $(this).text(old +1);
})
//获取这些div的中的第一个和最后一个
 console.log($items.first(),$items.last())

动画

内置动画

淡入淡出
- fadeIn():淡入
- fadeOut():淡出

下拉上滑

slideDown():下拉

slideUp():上滑

jQuery标签变量名.slideDown(动画毫秒时间);
jQuery标签变量名.slideUp(动画毫秒时间);
jQuery标签变量名.fadeIn(动画毫秒时间);
jQuery标签变量名.fadeOut(动画毫秒时间);

如果对同一个标签设置了多个动画，按照动画代码的书写顺序依次执行

自定义动画

animate():用户自定义动画 ```javascript jQuery标签变量名.animate({ “css属性名1”:”css属性值1”, “css属性名2”:”css属性值2”, “css属性名n”:”css属性值n” },动画持续毫秒时间);

例子： html:

JavaScript：实现2s内width为300px，height为300px $(‘div’).animate({ “width”:”300px”, “height”:”300px” },2000)；


   - animate基本上只支持跟位置和尺寸相关的动画。其他的基本都不支持。
   - 如果要颜色的动画，可以使用css3，用JavaScript来切换class达到控制动画的目的
<a name="e796c583"></a>
### 动画结束后执行js代码
- 
jQuery的每个动画函数都可以支持额外的参数，该参数必须是一个函数，用于表示在动画结束后要执行的代码
```javascript
jQuery标签变量名.动画函数名(其他参数,function(){
    //动画结束后要执行的代码
});
例子：
HTML：<div></div>
JavaScript：
//1, 2s淡入后改变div的内容为123 
$("div").fadeIn(2000,function(){
    $(this).text('123');
})
//2. 2s向右移动300px后改变div背景颜色为蓝色
$('div').animate({
    "margin-left":"300px"
},2000,function(){
    $(this).css('background-color','blue');
})

事件(on-默认使用事件委托)

on()

$父标签标签变量名.on('事件名','要执行事件的标签css选择器',function(e){
    //触发事件时要执行的代码
});
例子：
HTML:
<div id='box'><div>
JavaScript：
$('body').on('click','#box',function(e){
    当id为box的标签发生点击事件要执行的代码
});

支持同时给多个标签设置
支持JavaScript动态添加的标签

其他快捷事件方法

click
hover
dblclick

其他api

show():等同于css('display','block'),显示某个标签

hide():等同于css('display','none')，隐藏某个标签

jQuery标签变量名.show();
jQuery标签变量名.hide();

链式调用

背景

如果需要对同一个标签执行多句的jQuery代码，那么会导致不断的获取jQuery标签以及代码量过多。

html: <div></div>
JavaScript：
// div设置width为300px，向右移动300px，改变div的内容为123 再隐藏div
$('div').css('width','300px');
$('div').animate({"margin-left":"300px"},1000);
$('div').text('123');

概念

即对同一个标签的多句代码可以整合成一句。

作用

代码整齐
减少一定的代码量

语法

jQuery标签变量名.函数名1().函数名2().函数名3()....函数名n();
例子： 
$('div').css('width','300px').animate({"margin-left":"300px"},1000).text('123');
$('div').css('width','300px')

以上的每个函数都是接着前一个函数的执行结果继续执行
如果某个函数本身就是返回某个文字，后续就不能再使用链式调用。

练习

1. 实现jQuery版水平以及淡入淡出轮播图
2. 实现表格的选择以及全选功能
3. 用jQuery对以下dom进行优化
   购物车 
   倒计时
   时钟
   雪花飘飘
   选座
   movie评论

JavaScript 学习笔记

Jquery