jQuery基础操作

1.jQuery的介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，
能够极大地简化JavaScript编程。
jQuery对象：
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象
$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html()是jQuery里的方法。
相当于：document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

jQuery的使用:

1.首先要下载jQuery,放到html文件下
2.在html中boby中引入jQuery <script src="jquery-3.3.1.js" ></script>
3.如果进行jQuery的操作，在script标签中执行

查找标签

选择器

1.基本选择器

1.所有元素选择器：$("*")
2.id选择器：$("#id")
3.标签选择器：$("tagName")
4.class选择器：$(".className")
配合使用：$("div.c1")  // 找到有c1 class类的div标签。and的关系
5.组合选择器：$("#id, .className, tagName") 把符合条件的都能找到，or的关系，逗号分开

2.层级选择器

找到的都是y标签
1.$("x y");// x的所有后代y（子子孙孙） 
2.$("x > y");// x的所有儿子y（儿子）
3.$("x + y")// 找到所有紧挨在x后面的y
4.$("x ~ y")// x之后所有的兄弟y

<ul class="dropdown-menu">
    <li><a href="#">Rain</a></li>
    <li><a href="#">Egon</a></li>
    <li><a href="#">Yuan</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Q1mi</a></li>
</ul>
<div>你好吗</div>
<span>我很好</span>
<div>你怎么样</div>

1.$(".dropdown-menu  a") #r.fn.init(4) [a, a, a, a, 4个符合条件的，找到的都是a标签
2.$(".dropdown-menu>a")  #fn.init 无结果
3.$(".dropdown-menu>li") #r.fn.init(5) [li, li, li, li.divider, li
4.$(".dropdown-menu+div")  #r.fn.init [div,
5.$(".dropdown-menu~div")  #r.fn.init(2) [div, div,

3.属性选择器

<input type="text" name="username">
 <input type="checkbox" name="gender" value="basketball">篮球
1.[attribute]
2.[attribute=value]// 属性等于
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[name='username']") // 取到name属性为username类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

4.基本筛选器

:first // 第一个  $("div:first");
:last // 最后一个 $("#1 >div:last");
:eq(index)// 索引等于index的那个元素  $("#1 > div:eq(1)");
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
not和has

:not(元素选择器)// 找到所有满足not条件的标签，即在这个标签内没有noy中的条件
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)111111111144
$("#1:has(div)");将后代中有div标签的id=1的标签找出来。找到的时id=1这个大标签
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("li:not(“a")// 找到所有本身不含a标签的li标签
$("span:not("icon-bar")找到所有本身不含icon-bar类的span标签

5.表单常用筛选

:text
:password
:file
:radio
:checkbox
$("input[type='checkbox']");可以直接写成$(":checkbox")
表单对象属性:

:enabled  #可用的
:disabled
:checked  #单选和复选框
:selected #下拉框
$(":selected")  // 找到所有被选中的option

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>
$(":selected")  // 找到所有被选中的option

对符合条件的标签做css样式：$("div").css("color", "red")

筛选器方法

1.下一个元素：指同一级的元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

<div id="1">
    <div>天青色等烟雨
        <div class="sub">江南</div>
        <div>而我在等你</div>
     </div>
</div>
<div id="2">只要你敢不懦弱</div>
<div id="3">凭什么我们要错过</div>
$("#1").next();显示的是<div id="2">只要你敢不懦弱</div>这个标签
$("#1").nextAll() 显示所有和它同级的元素<div id="2">只要你敢不懦弱</div> <div id="3">凭什么我们要错过</div>

2.上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

3.父亲元素：
$("#id").parent()  $("#2").parent();父元素是body
$("#id").parents()  // 查找当前元素的所有的父辈元素 找祖先，一直找到html
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$(".jk").parentsUntil("#1");
4.儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们 #上下都找
  find和filter   

find查找元素：
$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") 等价于$("div p") 找到div标签中的所有p标签
$("div").find("span") #r.fn.init(8) [span.sr-only, span.icon-bar,
filter筛选：用于缩小匹配的范围
$("div").filter(".c1")  // 等价于 $("div.c1") 从结果集中过滤出有c1样式类的div标签。找到的时div标签
$("div").filter(".navbar-header") #r.fn.init [div.navbar-header

操作标签

   样式类操作   

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

<div class="container">
1.$(".container").addClass("item")  <div class="container item ">
2.$(".container").hasClass("item")   #true
将所有p标签的字体设置为红色：
$("p").css("color", "red"); 

菜单操作

<div class="menu">
    <div class="title">菜单一</div>
    <div class="item-list hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
    <div class="title">菜单二</div>
    <div class="item-list hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
    <div class="title">菜单三</div>
    <div class="item-list hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
</div>
<script>
    // 找到所有 class 中有title的div标签
    $(".title").on("click", function () {
        // 把其它的选项隐藏掉
        // $(this)
        // 找到当前点击标签的兄弟标签  --> 含有title class的兄弟标签
        $(this).siblings(".title").next().addClass("hide");
        $(this).next().removeClass("hide");
        // 方法二：
         $(".items").addClass("hide");  //批量操作
         $(this).next().removeClass("hide");
        // 当前点击的标签 下一个标签 显示出来--> 从class移除hide
        // this  --> 当前操作的标签  --> DOM对象 --> 不能调用jQuery对象
        // $(this)    --> DOM对象用$()包起来就能转换成jQuery对象,就能调用jQuery的方法
        // $(this).next()  --> 找到了当前点击标签的下一个标签
    })
</script>

位置

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

    文本操作     

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

1.HTML代码：
html()// 取得第一个匹配元素的html内容
$(".jer").html() "你好吗"
html(val)// 设置所有匹配元素的html内容
$(".jer").html("zhaoguangfei")

<div class="jer">zhaoguangfei</div>
<span class="jer">zhaoguangfei</span>
<div class="jer">zhaoguangfei</div>

2.文本值：
text()// 取得所有匹配元素的内容 
$(".jer").text()  你好吗我很好你怎么样"
text(val)// 设置所有匹配元素的内容
3.val值：用于获取form表单的值
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值

<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>

1.获取值：

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

获取所有选中的值：

var content=$("input[type='checkbox']:checked")
$.each(content,function(){
    console.log($(this).val());
})
basketball
football

获取所有的值存到列表中：

var value=new Array();
$.each(content,function(){
    value.push(($(this).val()));
})
#["basketball", "football"]

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'])

属性操作

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

attr():

1.获取值：attr()设置一个属性值的时候 只是获取值
<div class="jer" name="zhao"></div>
$("select").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方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true  

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked" 

为了兼容性，我们在处理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.添加

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的前面
增加.删除操作

<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>金老板</td>
        <td><input type="button" value="删除" class="delete"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>景女神</td>
        <td><input type="button" value="删除" class="delete"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>隔壁老王</td>
        <td><input type="button" value="删除" class="delete"></td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
    // 点击添加按钮添加一条新数据
    // 1. 找到按钮绑定点击事件
    $("#add").on("click", function () {
        // 当添加按钮被点击之后要做的事儿
        // 1. 创建一个新的tr
        var trEle = document.createElement("tr");
        trEle.innerHTML = "<td>4</td> <td>哪吒</td>";
        // 2. 把创建好的tr追加到tbody里面
        $("tbody").append(trEle);
    });

    // 点击每一行的删除按钮,把当前行删除掉
    // 1. 找到每一行的删除按钮,绑定点击事件
    $(".delete").on("click", function () {
        // 当每一行的删除按钮被点击后要做的事儿
        // 1. 删除当前被点击的按钮的这一行
        console.log(this);
        $(this).parent().parent().remove();

    })
</script>

2.修改

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()

克隆操作

$(选择器).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>