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.x: 使用最广泛，适合一般项目，兼容ie678,官方只做bug，维护功能不在更新。
- 2.x: 很少被使用，不考虑兼容低版本浏览器，不兼容ie678，官方只做bug，维护功能不在更新。
- 3.x: 【我就使用这个！】一般特殊条件下使用，不兼容ie678,很多老的jquery插件不支持这个版本,功能在添加，bug在修护。
- jquery-xxx.js 与 jquery-xxx.min.js的区别
- jquery-xxx.js:开发版本。给程序员看到，有良好的缩进。体积大一些
- 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对象的相互转换
- jq --> js:
jq对象[索引]或者jq对象.get(索引) - js --> jq:
$(js对象)例如：$(this)
- jq --> js:
<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)的区别
- window.onload只能定义一次，如果定义多次，后面的将会将前面的覆盖掉
- $(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.通用属性操作？【不行就换呗！】
- 操作元素自定义属性
-
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文档对应标签列出的属性）
-
prop()：获取/设置元素的属性,prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性-
prop("attribute"):获取 -
prop("attribute", "value"):设置
-
-
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()
