jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

jQuery操作标签

jQuery代码查找标签绑定的变量名推荐使用 $xxxEle

样式类操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

css样式操作

jQuery对象.css('属性名','属性值')
$divEle.css('border','5px solid black')

位置

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
$(".c1").offset(); #{left: 200, top:200}
可以自定义：$(".c1").offset({left: 400, top:100}); 

$(window).scrollTop()  获取左侧滚动条距离顶端的位移量
"""
实时监测距离
	$(window).scroll(function () {
        if($(window).scrollTop() > 600){
            alert('超过600了 架不住了')
        }
    })
"""

文本值操作

.html()

<div class="jer">你好吗</div>
<span class="jer">我很好</span>
<div class="jer">你怎么样</div>

1.HTML代码：
html()// 取得第一个匹配元素的html内容
$(".jer").html() "你好吗"
html(val)// 设置所有匹配元素的html内容
$(".jer").html("春游去动物园")
<div class="jer">春游去动物园</div>
<span class="jer">春游去动物园</span>
<div class="jer">春游去动物园</div>

.text()

2.文本值：
text()// 取得所有匹配元素的内容
$(".jer").text()  你好吗我很好你怎么样"
text(val)// 设置所有匹配元素的内容

.val()

<p> #单选框 checked=""默认被选中
<label >性别：
    <input type="radio" name="gender" value="1" checked="">男 #默认被选中
    <input type="radio" name="gender" value="2">女
     <input type="radio" name="gender" value="3">不详
</label>
</p>
<p>  #多选框 checked=""默认被选中
<label >爱好：
    <input type="checkbox" name="gender" value="basketball">篮球
    <input type="checkbox" name="gender" value="football">足球
    <input type="checkbox" name="gender" value="voallbe">网球
</label>
</p>
<p> #单选下拉框 selected="" 默认被选中
<label >喜欢看的书籍：
    <select name="book" >
        <option value="book1" selected="" >围城</option>
        <option value="book2">活着</option>
        <option value="book3">大秦帝国</option>
        <option value="book4">平凡的世界</option>
        <option value="book5">穆斯林的葬礼</option>
    </select>

</label>
</p>
<p>  #多选下拉框 selected="" 默认被选中
<label >喜欢看的影视：
    <select name="tv" multiple>
        <option value="1" >唐人街探案</option>
        <option value="2" selected=""  >泰囧</option>
        <option value="3">极限挑战</option>
        <option value="4">伪装者</option>
        <option value="5">琅琊榜</option>
    </select>
</label>
</p>
3.val值：用于获取form表单的值
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值

    1.获取值：

      1.获取单选框被选中的value值
      console.log($('input[type=radio]:checked').val())

      2.复选框被选中的value,获取的是第一个被选中的值
      console.log($('input[type=checkbox]:checked').val())

      3.下拉列表被选中的值
      $("select[name='book'] option:selected").val()

      4.下拉列表被选中的值，获取的是第一个被选中的值
      $("select[name='tv] option:selected").val()

    2.设置值：

      1.设置单选按钮和多选按钮被选中项
      $('input[type=radio]').val(['112']);
      $('input[type=checkbox]').val(['a','b']);

      2.设置下拉列表框的选中值，必须使用select
      因为option只能设置单个值，当给select标签设置multiple。
      那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
        $('select').val(['3','2'])

<p> #单选框 checked=""默认被选中
<label >性别：
    <input type="radio" name="gender" value="1" checked="">男 #默认被选中
    <input type="radio" name="gender" value="2">女
     <input type="radio" name="gender" value="3">不详
</label>
</p>
<p>  #多选框 checked=""默认被选中
<label >爱好：
    <input type="checkbox" name="gender" value="basketball">篮球
    <input type="checkbox" name="gender" value="football">足球
    <input type="checkbox" name="gender" value="voallbe">网球
</label>
</p>
<p> #单选下拉框 selected="" 默认被选中
<label >喜欢看的书籍：
    <select name="book" >
        <option value="book1" selected="" >围城</option>
        <option value="book2">活着</option>
        <option value="book3">大秦帝国</option>
        <option value="book4">平凡的世界</option>
        <option value="book5">穆斯林的葬礼</option>
    </select>

</label>
</p>
<p>  #多选下拉框 selected="" 默认被选中
<label >喜欢看的影视：
    <select name="tv" multiple>
        <option value="1" >唐人街探案</option>
        <option value="2" selected=""  >泰囧</option>
        <option value="3">极限挑战</option>
        <option value="4">伪装者</option>
        <option value="5">琅琊榜</option>
    </select>
</label>
</p>

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

attr():
  1.获取值：
  attr()设置一个属性值的时候 只是获取值
  <div class="jer" name="zhao"></div>
  $("div").attr('name');  #"zhao"
  $("div").attr('class')  #"jer"

  2.设置值
    1.设置一个值 设置div的class为box
    $('div').attr('class','box')
    //2.设置多个值，参数为对象，键值对存储
    $('div').attr({name:'hahaha',class:'happy'})
    $("div").attr({name:'haahha',class:['box','zhao']})
    #<div class="box,zhao" name="haahha"></div>

removeAttr():
  1.删除单个属性
  $('div').removeAttr('class')
  2.删除多个属性
  $('div').removeAttr('name class');

jquery中attr和prop的区别

对于HTML元素本身就带有的固有属性(本身就带有的属性)，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

<a href="#" id="link1"  class="btn" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id,class和action”，很明显，前三个是固有属性，而后面一个“action”属性是我们自己自定义上去的。

<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。

使用prop方法对自定义属性取值和设置属性值时，都会返回undefined值。

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因
此需要使用prop方法去操作才能获得正确的结果。

为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

文档处理

1.添加

添加到指定元素内部的后面 父元素.append(子元素)
  $(A).append(B)// 把B追加到A
  $(A).appendTo(B)// 把A追加到B

追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

var newtag=document.createElement("span")
newtag.innerText="天青烟雨";
$("[name=jerd]").append(newtag);  #js对象
$('[name=jerd]').append('<li>1233</li>'); #stirng
$('[name=jerd]l').append($('#app')); #jquery元素
如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。

2.添加到指定元素内部的前面,父元素.prepend(子元素)

$(A).prepend(B)// 把B前置到A， 添加到父元素的第一个位置
$(A).prependTo(B)// 把A前置到B

3.添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

4.添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

修改

replaceWith()和replaceAll() 替换
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

1.replaceWith()(用...[()中的内容]取代)和.replaceAll()(取代...[()中的内容])

$(selector).replaceWith(content);
将所有匹配的元素替换成指定的string、js对象、jquery对象。
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
替换所有,将所有的h2标签替换成p标签。
$('<p>哈哈哈</p>').replaceAll('h2');

2.remove()

$(selector).remove();
删除节点后，事件也会删除（简言之，删除了整个标签）
$(selector).detach();：删除节点后，事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中,
$('ul').append($btn)
<input type="button" value="点我就点我">在原来位置消失，但在ul标签内会出现

3.empty()

清空选中元素中的所有后代节点
//清空掉ul中的子元素，保留ul
$('ul').empty()

jQuery事件

'''jQuery绑定'''
jQuery对象.click(function(){})
jQuery对象.change(function(){})

1.鼠标事件
  click() :单击事件、触发或将函数绑定到指定元素的click事件
  mouseover(): 触发或将函数绑定到指定元素的mouseover事件
  mouseout() ：触发或将函数绑定到指定元素的mouseout的事件
2.键盘事件：
  keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件
  keyup(): 释放按键时、触发或将函数绑定到指定元素的keyup事件
  keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件
3.表单事件：
  focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件
  blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件

hover()方法

语法：hover(enter,leave);
该方法相当于mouseover(鼠标移上)与mouseout（鼠标移走）事件的组合
$("li").hover(function() {
               $("li").css("background", "gray")}, # 悬浮触发
              function() {
               $("li").css("background", "green")} # 移走触发
           )

.toggle()方法

toggle()方法用于模拟鼠标连续click事件

$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
...     //...
);

同时toggle()方法还有一个作用：切换元素可见状态
$('input').toggle(
  function () {
  $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
  },
  function () {
   $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
  }
 );

克隆操作

$(选择器).clone();
1.clone()：克隆匹配的DOM元素
2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>

事件监听

//jQuery第一种监听事件方法
　　　　$("#helloBtn").click(function() {
　　　　　　alert("Hello world!");
　　　　});
//jQuery第二种监听事件方法
　　　　$("#helloBtn").bind("click"，function() {
　　　　　　alert("Hello world!");
　　　　});
//jQuery第三种监听事件方法
　　　　$("#helloBtn").on("click"，function() {
　　　　　　alert("Hello world!");
　　　　})；
//jQuery第四种监听事件方法
　　　　$("body").on({
　　　　　　click: function() {
　　　　　　　　alert("Hello world!");
　　　　　　}
　　　　}, "button");
//jQuery第五种监听事件方法
　　　　$("body").on("click", "button", function() {
　　　　　　alert("Hello world!");
　　　　});
　　});

<body>
<button id="helloBtn">Hello</button>
</body>

（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。

（2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件
监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。

（3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现
的，使用on() 方法实现事件监听会更快、更具一致性。

（4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个
元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。

阻止后续事件

"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
"""
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()

事件委托

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

为什么要用事件委托？
  1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因
为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所
有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

  2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面
的运行性能，减少开发人员的工作量。

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

jQuery动画

显示与隐藏

show()方法和hide()方法是jQuery中最基本的动画方法，具体语法如下：

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);
  speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。

  easing:用来指定切换效果，默认是"swing",可用参数"inear"。

  fn:在动画完成时执行的函数，每个元素执行一次。

$("element").show("slow");     //元素将在600毫秒内慢慢地显示出来
$("element").show("normal");   //元素将在400毫秒内慢慢地显示出来
$("element").show("fast");     //元素将在200毫秒内慢慢地显示出来
$("element").hide("1000");     //元素将在1000毫秒(1秒)内慢慢地隐藏

滑动式动画

slidUp()和slideDown()方法通过改变高度值实现动画效果。具体语法如下：

$element.slidUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

  speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。

  easing:用来指定切换效果，默认是"swing",可用参数·"inear".

  fn:在动画完成时执行的函数，每个元素执行一次。

淡入淡出效果

fadeln()和fadeOut()方法通过改变透明度实现动画效果。具体语法如下：

$element.slidUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

  speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画时长的毫秒数值。

  easing:用来指定切换效果，默认是"swing",可用参数"inear".

  fn:在动画完成时执行的函数，每个元素执行一次。

animate

语法一：

jQuery提供了animate()方法完成自定义动画效果

$element.animate(styles,speed,easing,callback)

styles 代表动画属性和最终值的样式属性以及属性值的集合{属性:属性值,属性:属性值}
speed  可选。规定动画的速度。默认是 "normal"。(毫秒 （比如 1500）"slow" "normal" "fast")
easing  可选。规定在不同的动画点中设置动画速度的 easing 函数。
callback  可选。animate 函数执行完之后，要执行的函数。

$("div").animate( {width:"1000px"},5000,function(){alert("调整完成")})

语法二：

$element.animate(styles,options)

styles  必需。规定产生动画效果的 CSS 样式和值（同上）。

options  可选。规定动画的额外选项。
          可能的值：
          speed - 设置动画的速度
          easing - 规定要使用的 easing 函数
          callback - 规定动画完成之后要执行的函数
          step - 规定动画的每一步完成之后要执行的函数
          queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
          specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

通过animate()方法实现动画效果，但不支持以下CSS样式属性:

backgroundColor

borderBottomColor

borderLeftColor

borderRightColor

borderTopColor

Color

outlineColor

前端框架 --- Bootstrap框架

Bootstrap中文官网

使用

1.官网下载,本地导入

2.使用CDN加速服务
https://www.bootcdn.cn/
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>

jQuery

官方文档中的
"dependencies": {
    "jquery": "1.9.1 - 3"
  }