jquery选择器&基本操作

this是一个js原生对象--dom对象,假如选择器选择了一个集合，而且给集合中的每一个元素都绑定了事件，比如单击事件，当点击某个元素是，this的指代就是当前点击的dom元素，需要使用$(this)转换成jq对象然后进行相关操作

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

一、使用步骤快速入门

下载jquery;
- 目前有三大版本
  1. 1.x: 使用最广泛，适合一般项目，兼容ie678,官方只做bug，维护功能不在更新。
  2. 2.x: 很少被使用，不考虑兼容低版本浏览器，不兼容ie678，官方只做bug，维护功能不在更新。
  3. 3.x: 【我就使用这个！】一般特殊条件下使用，不兼容ie678,很多老的jquery插件不支持这个版本,功能在添加，bug在修护。
- jquery-xxx.js 与 jquery-xxx.min.js的区别
  1. jquery-xxx.js:开发版本。给程序员看到，有良好的缩进。体积大一些
  2. jquery-xxx.min.js:生产版本。程序中使用，没有缩进。体积小，程序加载更快。
导入jquery的js文件：一般导入min.js文件
使用方式

var div1 = $("#div1")
alger(div1.html)

二、Jquery对象和js对象的区别与转换

js获取的一些元素可能是一个集合，需要遍历操作；而jquery通过选择器选择的是一个对象。这个对象里面
可能只有一个元素，也可能有多个元素；但是可以统一操作它们

<body>
    <div>aaaaa</div>
    <div>aaaaa</div>
</body>
<script>
$(function () {
    var $divs = $("div");
    $divs.text("bbbb");
})

jquery对象在操作时，更加方便。
jquery对象和js对象的方法不通用，可以将他们进行相互的转换，然后调用对应的方法
jquery对象和js对象的相互转换
1. jq --> js: jq对象[索引] 或者 jq对象.get(索引)
2. js --> jq: $(js对象) 例如：$(this)

<body>
    <div>aaaaa</div>
    <div>aaaaa</div>
</body>
<script>
$(function () {
    // jq --> js
    var $divs = $("div");
    $divs.text("bbbb");
    $divs[0].innerText = "aaaa"

    // js --> jq
    var divs = document.getElementsByTagName("div")
    $(divs).html("拉拉啊")
})

三、选择器：筛选具有相似特征的元素(标签)

1.基本操作

入口函数

简写形式【推荐】, 后面的案例代码都是放在这个里面的

$(function () {
    ...
})

完整形式(了解)

$(document).ready(function () {

})

window.onload和$(function)的区别
1. window.onload只能定义一次，如果定义多次，后面的将会将前面的覆盖掉
2. $(function)可以定义多次。

事件绑定

$("#b1").click(function () {
    alert("点击了我")
})

样式控制：css方法

<button id="b1">点击事件</button>
<button id="b2">点击事件</button>

$("#b1").css("background-color", "pink")
$("#b2").css({"background-color":"pink","color":"white"})

2.选择器分类

1.基本选择器

标签选择器(元素选择器)
- $("html标签名")：；选择对应的标签
id选择器
- $("#id的属性值")：：选择该id值对应的标签
类选择器
- $(".class类名"): ：选择具有该类名的元素。
并集选择器
- $("选择器1,选择器2..."): 选择这些集合
通配符选择器【很少使用】
- $("*")

2.层级选择器

后代选择器
- $("A B"): 选择A元素内部的所有B元素
子选择器
- $("A>B"): 选择A元素内部的所有B子元素
毗邻选择器
- $("A+P"): 匹配A后面跟着的一个P,之间不能有其他元素
兄弟选择器
- $("A~P"): 匹配A同级后面所有的P。

3.属性选择器

属性名称选择器
- $("A[属性名]")：包含指定属性的选择器
属性选择器
- $("A[属性名='值']")：包含指定属性等于特定值的选择器。
- $("A[属性名!='值']"): 不包含指定属性等于特定值的选择器。
- $("A[属性名^='值']"): 包含指定属性以特定值开头的选择器。
- $("A[属性名$='值']"): 包含指定属性以特定值结尾的选择器。
- $("A[属性名*='值']"): 匹配给定的属性是以包含某些值的元素。
复合属性选择器
- $("A[属性名='值'][]..."): 包含多个属性条件的选择器

4.过滤选择器

一般放在其他过滤器后面，如 $("div:first")

首元素选择器
- :first: 获取选择的元素中的第一个元素
- $('span').first(): 这种方式也可以
尾元素选择器
- :last: 获取选择元素中的最后一个元素
非元素选择器
- :not(selector) 不包括指定内容的元素，

$("div:not(:last)").text("我不是最后一个")

偶数选择器
- :even: 偶数，从0开始计数
奇数选择器
- :odd: 奇数，从0开始计数
等于索引选择器
- :eq(index): 指定索引元素
大于索引选择器
- :gt(index): 大于指定索引的元素
小于索引选择器
- :lt(index): 小于执行索引元素
标题选择器
- :header: 获得标题(h1~h6)元素，固定写法

<h1></h1>
<h2></h2>
$(":header").text("我是一个标题")

5.表单过滤选择器

配合表单元素使用

可用元素选择器
- :enabled：获得可用元素
不可用元素选择器
- :disabled: 获得不可用元素
单选/复选框选中选择器
- :checked: 获得单选/复选框中的元素
下拉框选中选择器
- :selected: 获得下拉框中的元素
获取input框type属性：
- :radio: 类似的还有【:submit、:file、:text....】

//选择input的type类型可以直接用:属性值的方式
$(':radio');

//1.获取单选框中的value值(选中值标记为checked)
$('input[type=radio]:checked').val();

//2.获取复选框中的value值 仅仅获取第一个值 @@@@@->证明我猜的底层实现是对的
$('input[type=checkbox]:checked').val();

//3.下拉列表被选中的值(下拉列表中的选中用selected)
$('#timespan option:selected').val();

//设置单选值
$('input[type=radio]').val('113');

//设置复选框
$('input[type=checkbox]').val('b');

//设置下拉列表 multiple属性可选
$(':selected').val('3');

//文本框 设置值
$('input[type=text]').val('222');

四、DOM操作

sq选择器选择是一个集合，如果需要【获取】(不包含设置，设置是统一设置)某个元素的属性或者内容，默认获取第一个(index=0)的元素的内容

1.内容操作

html(): 获取/设置元素的标签体内容
- html(): 获取
- html(...): 设置
text(): 获取/设置元素的标签体纯文本内容
- text(): 获取
- text(...): 设置
val(): 获取/设置元素的value属性值。
- val(): 获取值
- val(...): 设置值

2.属性操作

1.通用属性操作？【不行就换呗！】

操作元素自定义属性
1. attr(): 获取/设置元素的属性
  - attr("attribute") :获取属性值
  - attr("attribute", "value") :设置属性值
  - attr({"attr1":"val1","attr2":"val2"...}) :多个属性值
  - 注意，attr如果设置class属性会覆盖，建议用专门的方法设置class属性
    2. removeAttr("attribute"):删除属性

<input id = "test1"type="text" value="" style="background-color: red">
<input id = "test2" type="text" disabled>

$("#test1").attr("value", "test1")
$("#test2").attr("value", "test2")
$("#test1").removeAttr("style")
$("#test2").removeAttr("disabled")

操作元素固有的属性（w3c文档对应标签列出的属性）
1. prop()：获取/设置元素的属性,prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性
  - prop("attribute") :获取
  - prop("attribute", "value") :设置
2. removeProp("attribute"): 删除属性

<input id="test1" type="text">
var test1 = $("#test1").prop("value")
console.log(test1)

2.对class属性的操作

addClass(): 添加class属性值,支持同时添加多个
removeClass(): 删除class属性值,支持同时删除多个
toggleClass(): 切换class属性
- toggleClass("one"): 已存在one，则删除，不存在，则添加,支持同时切换多个
hasClass('xxx'): 判断当前对象内部是否有响应的类名，返回布尔值。

<input id="test1" type="text" class="one">
<input id="test2" type="text" class="one two three">

var test1 = $("#test1")
test1.addClass("two three")
test1.removeClass("two three")
test1.toggleClass("two three")
var test2 = $("#test2")
test2.toggleClass("two three")

3.设置css属性

css()
- 只设置一个的简写：css("attribute", "values")
- 多个： css({"attr1":"value1","attr2":"value2"...})

4.获得父/子节点

parent():获取父节点
children("选择器")：获取子节点

5.同辈元素选择

prev(): 查找当前元素的前一个元素【同辈】
prevAll(): 查找当前元素之前的所有元素【同辈】
- prevAll("选择器")
siblings(): 匹配同辈元素汇总相关的对象(不包含本身)
- siblings("选择器")

案例：鼠标移动变大变小效果

<style>
    li{width: 100px;height: 30px;margin-top: 5px;}
    li.active{height: 40px;}
</style>
<body>
<ul style="list-style: none;">
    <li></li><li></li><li></li><li></li>
</ul>
</body>
<script>
$(function () {
    $("li:even").css("background","darkcyan");
    $("li:odd").css("background","yellow");
    $("li").hover(function () {
        $(this).addClass("active").siblings("li").removeClass("active")
    })
})
</script>

3.CRUD操作

常规逻辑方式【推荐使用】

【如果添加的内容是当前页面中的某些元素节点，那么这些元素将从原位置上消失。简言之，就是一个移动操作】

append(): 父元素将子元素追加到末尾
- 对象1.append(对象2)：将对象2添加到对象1元素内部，在末尾
prepend(): 父元素将子元素追加到开头
- 对象1.prepend(对象2)：将对象2添加到对象1内部，在开头
after(): 添加元素到元素后边
- 对象1.after(对象2)：将对象2添加到对象1后面，兄弟关系
before(): 添加元素到元素前面
- 对象1.before(对象2): 将对象2添加对象1前面，兄弟关系
clone(): 复制操作
- clone(): 克隆匹配的DOM元素并且选中这些克隆的副本。
- clone(true): 元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
replaceWith()：替换

$('被替换的选择器').replaceWith('<button>替换成按钮</button>');
$('<a href="#">替换的超链接</a>').replaceAll('被替换的选择器');

remove(): 移除元素
- 对象.remove(): 将对象删除掉
empty(): 清空元素的所有后代元素
- 对象.empty(): 将对象的后代元素全部清空，但是保留当前对象以及其属性节点【内容全没了】
detach()移除匹配的节点元素删除节点后返回节点数组事件会保留

var $btn = $('button').detach();
$('ul').append($btn);

变态方式(始终不明白下面这4个存在的意义？)

appendTo():
- 对象1.appendTo(对象2)：将对象1添加到对象2内部，在末尾
prependTo()
- 对象1.prepend(对象2)：将对象1添加到对象2内部，在开头
insertAfter()
- 对象1.insertAfter(对象2)：将对象1添加到对象2后面，兄弟关系
insertBefore()
- 对象1.insertBefore(对象2): 将对象1添加到对象2前面，兄弟关系

五、jquery的位置属性

position 获取匹配元素相对于父元素的偏移

$('选择器').position().left

scrollTop/scrollLeft获取匹配元素相对于滚动条卷起的位置信息(就是滚过的区域)

scroll实时监听功能

$(document).scroll(function() {
    $(document).scrollLeft();
    $(document).scrollTop();
})

offset 获取匹配元素在当前视口的相对偏移相对于浏览器左上角

$("选择器").offset();
$("选择器").offset().left;
$("选择器").offset().top;
$("选择器").offset().left;

获取/设置元素的宽高

var w = $('选择器').width();
var h = $('选择器').height();
$(('选择器').width(400);

获取innerWidth=width + (2 * padding) 不包括边框获取匹配元素的内部宽度

$('选择器').innerWidth()

6.获取outerWidth=width + 2 * (padding + border) 获取匹配元素的外部宽度

$('选择器').outerWidth()

01.jquery选择器