一、jquery
将对原生js常见的方法和对象进行封装，方便使用。
以前通过js获取对象的时候：var obj=document.getElementById("id");
其实可以整合为一个函数，例如：
funtion getId(id){
return document.getElementById("id");
}
1.jquery和html的整合
jquery是单独的js文件，通过script标签的src属性导入即可。
例如：<script src="../js/jquery-1.11.0.min.js"></script>
2.获取一个jquery对象
$("选择器")或者jQuery("选择器")
3.dom和jquery的转换
dom对象---->jquery对象：$(dom对象)
//1.获取dom对象
var obj=document.getElementById("username");
//2.转化
var $user=$(obj);
jquery对象--->dom对象
方式1：jquery对象[index]，因为jQuery可能是个数组
方式2:：jquery对象.get(index)
//1.获取jquery对象
var $u=$("#username2");
//2.转换
//2.1 方式1
var obj=$u.get(0);
//2.2 方式2
var obj = $u[0];
二、页面加载
js：window.οnlοad=function(){}//在一个页面中只能使用一次，最后一个onload的代码内容生效，其他的都不生效。
Jquery：在一个页面中可以使用多次。
方式1：$(function(){...})
方式2：$(document).ready(function(){...});
三、派发事件
$("选择器").click(function(){...});支持链式编程，等价于原生js中：dom对象. onclick =function(){....}
掌握事件:
focus、blur、submit、change、click
例如： $(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});
});
四、jquery滑动等效果
隐藏或展示：show(毫秒数)、 hide(毫秒数)
滑入或滑出
slideDown(毫秒数)：向下滑入，slideToggle
slideUp(毫秒数)：向上滑出
淡入或淡出
fadeIn(int)：淡入，toggle()
fadeOut(int)：淡出
例如：$("#b1Div").toggle(1000);
五、选择器
基本选择器：$("#id值") $(".class值") $("标签名")
获取全部选择器：$("*")
获取多个选择器，用逗号隔开：$("#id值,.class值")
层次选择器：
a b: a的所有b后代
a>b: a的所有b孩子
a+b: a的下一个兄弟元素
a~b: a的所有兄弟元素
基本过滤选择器：
:frist 第一个，例如div:first最后一个div
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <
内容过滤： :has("选择器")：包含指定选择器的元素
例如：$("div:has('.mini')").css("background-color","#0ff");
可见过滤：
:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible
属性过滤器：
[属性名]，例如$("div[title]").css("background-color","#ff0");选出有title属性的div。
[属性名="值"]，例如$("div[title='test']").css("background-color","#ff0");选出title属性为test的div。
表单过滤：
:input 所有的表单子标签 input/ select /textarea/ button
例如：$("#form1 input").size()，这是层次选择器，匹配到所有的后代input。
$("#form1 :input").size()，这是匹配到所有表单的子input标签，不会匹配到孙子辈的input。
六、属性和css操作
对属性的操作:
1.attr()：设置或者获取元素的属性
方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","值");
//给username添加title属性
var $username=$("[name='username']");属性选择器
$username.attr("title","姓名");
方式3:设置多个属性
attr({
"属性1":"值1",
"属性2":"值2"
})
例如：$username.attr({
"value":"许多多",
"class":"textClass"
});
2.removeAttr("属性名称"):移除指定属性
$username.removeAttr("class");将class的样式删除掉
3.addClass("指定的样式值")
相当于 attr("class","指定的样式值");
例如：$username.addClass("textClass");
4.removeClass("指定的样式值")
$username.removeClass("textClass");将名称为textclass的样式删除
注意：若jquery版本>1.6 统一使用 prop操作元素的属性，attr获取不了checked属性。
例如：$(".itemSelect").prop("checked",$(this).prop("checked"));，将checked属性设置成this的checked状态
七、操作元素的style属性
css():获取或者设置css样式
方式1:获取
css("属性名")
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
获取元素的尺寸:
width()
height()
例如：alert($div.width());
八、遍历jQuery对象
方法1：数组.each(function(){});
方法2：$.each(要遍历数组,function(){});
例如：
$("#b2").click(function(){
$.each($("input:hidden"), function() {
alert($(this).val());
});
});
注意:
each的function中可以加两个参数index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)
例如： $("input:hidden").each(function(index,dom){
//alert(this.value)
//alert($(this).val());
//alert(index)//索引
//alert(dom.value)
});
九、设置或者获取value属性
jquery对象.val():获取
jquery对象.val("...."):设置
十、设置或者获取获取标签体内容
html()，text()
xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容
设置的区别:
html:会把字符串解析
text:只做为普通的字符串
获取的区别:
html:获取的html源码，会将” ”里面的代码解析出来
例如：创建一个元素: $("<标签></标签>")
$div.html($("<a href='#'>").html("我"))，我将会是一个链接
text:获取只是页面展示的内容
在jquery中创建元素
$("<标签名>").prop(属性).html(内容)
十一、文档操作
内部插入(a和c为jQuery对象)
a.append(c):将c插入到a内部(标签体)的后面
a.prepend(c):将c插入到a的内部的前面
appendTo等价于c.appendTo(a)、prependTo
外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面
a.insertAfter(c)，将a放在c后面
a.insertBefore(c)
删除
empty() 清空对象内部的所有元素，但是结构还在，比如在列表，可以看到列表序号还在，remove() 删除对象
十二、表单对象属性过滤选择器
:enabled 可用的，不设置disabled="disabled"就都是enable
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)
例如：$("input:enabled").val("我们来自黑马");
十三、案例
1.左右选中案例
$(function(){
//移动一个
$("#toRight1").click(function(){
$("#left>option:selected:first").appendTo($("#right"));
});
//移动多个
$("#toRight2").click(function(){
$("#right").append($("#left option:selected"));
});
//移动全部
$("#toRight3").click(function(){
$("#right").append($("#left option"));
});
})
2.省市联动
$(function(){
$("[name='pro']").change(function(){
//获取市下拉选
var $city=$("[name='city']");
//初始化
$city.html($("<option>").html("-请选择-"));
var pro=$(this).val();
//获取所有的市数组
var cities=$(arr[pro]);
//alert(cities);
//遍历数组,拼装成option 追加到市下拉选中
cities.each(function(){
$city.append("<option>"+this+"</option>");
//$city.html($(""));
});
});
});
来源：CSDN
作者：闲人勿-
链接：https://blog.csdn.net/qq_25560849/article/details/103706013