[JavaScript知识库]jQuery总结-DX的笔记

jQuery总结

selector选择器

选择元素

根据ID查找元素

$("#div1ID")

根据标签查找元素

$("div")

根据样式查找元素

$(".myClass")

父子元素

查找父标签里的子标签

//找到表单form里所有的input元素的个数
console.log($("form input").length)

父标签里的所有子标签

//找到表单form里所有的子级input元素个数
console.log($("form>input").length)

同级下一个指定标签（弟弟）

//找到表单form同级第一个input元素的value属性值
console.log($("form+input"))

同级的所有指定标签（只包括弟弟）

//找到所有与表单form同级的input元素个数
console.log($("form~input"))

查找元素和内容

查元素内容

//1)查找UL中第一个LI元素的内容
// jquery的html()的效果等效于js中的innerHTML属性
// innerText = text()
console.log($("ul li:first").html())
console.log($("ul li:first").text())
//2)查找UL中最后个元素的内容
console.log($("ul li:last").html())

// jquery的很多方法都是类似的,设置和获取的方法同名
// val(value):设置值
// val():获取值
// css(name,value):设置行内样式
// css(name):获取行内样式
// html(str):设置元素的内容 
// html():获取元素的内容

查找奇数行、偶数行

//4)查找表格的tr的索引号为1、3、5...奇数行个数，索引号从0开始
console.log($("table tr:odd"))
//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
console.log($("table tr:even"))

根据索引查找

//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
console.log($("table tr:eq(1)").text())
//7)查找表格中行的个数，即索引值比2大的行
console.log($("table tr:gt(2)"))
//8)查找表格中索引值比2小的行
console.log($("table tr:lt(2)"))

添加样式

方式一

.usa {
background-color: #f00;
color: #fff;
}
.spain {
background-color: #f00;
color: #ff0;
}

$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );

方式二

// css可以实现给元素添加行内样式的效果,可以单个添加可以批量添加样式
//给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
// $(":header").css('background-color', 'red').css('color', 'blue');
$(":header").css({
    'background-color': 'red',
    'color': 'blue'
});

选中

//3)查找所有[未]选中的input为checkbox的元素个数
console.log($(":checkbox:not(:checked)"))

文档根元素

// :root 选择器就是选择一个页面的根元素
console.log($(":root"))

查找父元素包含的子元素

//1)查找所有包含文本"John"的div元素的个数
console.log($("div:contains('John')"))
//2)查找所有p元素为空的元素个数
console.log($("p:empty"))
//3)给所有包含p元素的div元素添加一个myClass样式
// $("div:has(p)").addClass('myClass')
$("div").has("p").addClass('myClass')
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
// console.log($("p:not(:empty)"))
console.log($("p:parent"))

查找可见和隐藏

//1)查找隐藏的tr元素的个数
console.log($("tr:hidden"))
//2)查找所有可见的tr元素的个数
console.log($("tr:visible"))

根据属性找标签

//1)查找所有含有id属性的div元素个数
console.log($("div[id]"))
//2)查找所有name属性是newsletter的input元素，并将其选中
$("input[name='newsletter']").attr({
    'checked': 'checked'
});
//$("input[name='newsletter']").attr('checked', 'checked');
// 获取id为myID的元素的name属性值
console.log($("input[id='myID']").attr("name"))

//3)查找所有name属性不是newsletter的input元素，并将其选中
$("input[name!='newsletter']").attr('checked', 'checked');

//4)查找所有name属性以'news'开头的input元素，并将其选中
$("input[name^='news']").attr('checked', 'checked');

//5)查找所有name属性以'letter'结尾的input元素，并将其选中
$("input[name$='letter']").attr('checked', 'checked');

//6)查找所有name属性包含'news'的input元素，并将其选中
$("input[name*='news']").attr('checked', 'checked');	

//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
$("input[id][name$='letter']").attr('checked', 'checked');	

数组迭代

/*1)迭代[each]每个ul中第1个li元素中的内容,索引从0开始*/
// $("ul li:first-child")
// index表示当前被迭代出来的元素的索引
// obj代表当前被迭代出来的元素
// this代表当前被迭代出来的元素
$.each($("ul li:first-child"),function (index,obj) {
	console.log($(obj).html())
})

// $("ul li:first-child").each(function (index,obj) {
// 	 console.log($(obj).html()) 
// })

/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始*/
$("ul li:last-child").each(function (index,obj) {
	 console.log($(obj).html()) 
})

//3)在ul中查找是唯一子元素的li元素的内容
console.log($("ul li:only-child"))

/*4)迭代每个ul中第2个li元素中的内容,索引从1开始*/
$("ul li:nth-child(2)").each(function (index,obj) {
	 console.log($(obj).html()) 
})

查找各种元素的个数

//1)查找所有input元素的个数
// 选择所有 input, textarea, select 和 button 元素
console.log($(":input"))

//2)查找所有文本框的个数
console.log($(":text"))

//3)查找所有密码框的个数
console.log($(":password"))

//4)查找所有单选按钮的个数
console.log($(":radio"))

//5)查找所有复选框的个数
console.log($(":checkbox"))

//6)查找所有提交按钮的个数
console.log($(":submit"))

//7)匹配所有图像域的个数
console.log($(":image"))

//8)查找所有重置按钮的个数
console.log($(":reset"))

//9)查找所有普通按钮的个数
console.log($(":button"))

//10)查找所有文件域的个数
console.log($(":file"))

//11)查找所有input元素为隐藏域的个数
// 页面中所有看不到的都是隐藏域
console.log($(":hidden"))

//再加个条件
// 注意:disabled="disabled"的表单元素不会被表单提交
// readonly="readonly"可以被表单提交
//1)查找所有可用的input元素的个数
console.log($(":input:enabled"))

//2)查找所有不可用的input元素的个数
console.log($(":input:disabled"))

//3)查找所有选中的复选框元素的个数
console.log($(":checkbox:checked"))

//4)查找所有未选中的复选框元素的个数
console.log($(":checkbox:not(:checked)"))

//5)查找所有选中的选项元素的个数
console.log($("select option:selected"))

mothod常用方法

each 迭代

//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var obj1 = {
    'name': '张三',
    'sal': 10000
}
var objArr = [
    {
        'name': '张三',
        'sal': 10000
    },
    {
        'name': '李四',
        'sal': 20000
    },
    {
        'name': '王五',
        'sal': 30000
    }
];

// 数组或者jquery对象可以被迭代
// 推荐使用第一种方式
// 1.jquery.each(被迭代的数组或者对象,callback)
$.each(objArr, function(index, obj) {
console.log('姓名是:' + obj.name + ",薪水是:" + obj.sal)
});

// 2.被迭代的数组或者对象.each(callback)
$(objArr).each(function(index, obj) {
console.log('姓名是:' + obj.name + ",薪水是:" + obj.sal)
});

// $(obj1).each(function(index, obj) {
// 	console.log(obj)
// });
$.each(obj1, function(index, obj) {
console.log(obj)
});

append 父元素插入子元素

//DIV标签插入到UL标签之后(父子关系)
// 父元素.append(子元素):给父元素追加子元素,支持批量操作
// 等效于js的父元素.appendChild(子元素)方法
$("ul").append($("div"));

//DIV标签插入到UL标签之前(父子关系)
// 该方法等效于js中的insertBefore()实现插入最前面的效果
$("ul").prepend($("div"));

// js中提供了一个createElement(标签)方法用于创建一个新的页面元素
// jquery没有对应的api,但是很多方法支持将一段html代码直接生成一个标签
$("ul").append("<li>张三</li>");

after 插入到标签之后（兄弟关系）

//DIV标签插入到UL标签之后(兄弟关系)
$("ul").after($("div"))

//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before($("div"))

find后代选择器 attr 设置元素属性

//取得form里第一个input元素的type属性
console.log($("form input:first").attr('type'))
// find(选择器)作用就是在前面的结果中再次过滤后代元素,找出符合条件的后代元素
// find方法的作用等效于后代选择器
// first() 获取集合中的第一个元素
console.log($("form").find("input:first"))
// attr(name,value):设置元素的属性
// attr(name):获取元素的指定属性值
// attr({name1:value1,name2:value2,.....}):批量设置元素的属性
console.log($("form").find("input").first())
//设置form里最后个input元素的为只读文本框
// $("form").find("input").last().attr('readonly', 'readonly');
$("form").find("input").last().attr({'readonly': 'readonly'});

创建页面元素

//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
// <body><div id="2015">哈哈</div></body>
// js方式创建页面元素
var div = document.createElement("div");
div.setAttribute('id', 'divID');
div.innerText = "哈哈";
// document.getElementsByTagName("body")[0].appendChild(div);		
//jquery方式
$("body").append('<div id="2022">哈哈</div>')	

删除页面元素

//删除ID为secondID的LI元素
// remove方法会删除符合条件的所有元素
$("li").remove("#secondID")
$("#secondID").remove()
//删除所有LI元素
$("li").remove()

//删除UL元素
$("ul").remove()

// js中的删除使用的是父元素.removeChild(子元素):使用父元素删除子元素
// jquery中:当前元素.remove() : 自己删除自己
// 实现原理:当前元素.parentNode.removeChild(当前元素)

获取元素内容

//取得<div>中的内容
console.log($("div").html())
console.log($("div").text())
//添加内容
$("div").text("哈哈1")
$("div").html("哈哈2")
$("div").text('<a href="#">百度一下</a>')
$("div").html('<a href="#">百度一下</a>')
// 本质上html()和text()的区别就是innerHTML和innerText的区别

// 1.设置id属性为inputID的input元素的value属性值
document.getElementById("inputID").setAttribute("value", 123);
// 2.获取id属性为inputID的input元素的value属性值
console.log(document.getElementById("inputID").getAttribute("value"))
console.log(document.getElementById("inputID").value)

//取得<option>的值和描述
console.log($("#city option:first").val())
console.log($("#city option:first").html())
console.log($("#city option:selected").val())
console.log($("#city option:selected").html())
//val()获取的是标签的value属性值，html()和text()获取的是内容

clone 克隆

// 在标签上,通过事件属性直接指定函数,这种我们称为静态绑定 了解即可
// 在js代码中,使用dom操作绑定事件和函数,我们称为动态绑定  必须会的
// js中事件的绑定还有通过监听器实现的,知道这种方式就行

// 1.复制原input元素，添加到原input元素后，与其同级
//原生js中,也有clone(deep)方法,deep是布尔值,true表示深克隆,子元素会被一起复制.false表示浅克隆,只复制元素自身
$("body").append($("ul").clone(true))
// 静态绑定的事件函数一定会被复制,只有动态绑定的事件函数才可以通过这个布尔值参数决定是否复制
$("input").after($("input").clone(true).val("新按钮"));

//2.为原input元素动态添加单击事件
$("input").click(function () {
	alert("动态事件") 
})

//添加到原input元素后，与其同级，且和原按钮有一样的行为
$("input").after($("input").clone(false).val("新按钮"));
// Jquery提供的clone(),一定复制子元素和静态事件,动态绑定的事件是否被复制取决于方法的布尔值

replaceWith 替换

// replaceWith()
// 参数1:html字符串,js选择器结果,jquery选择器结果,使用新的内容替换原有内容
// 参数2:函数,替换成功后指定
// 上面两个参数2选1
//双击<div>中的文本，用文本框替换文本
$("table div").dblclick(function(event) {
$(this).replaceWith('<input type="text">');
});

removeAttr 删除属性

//为<table>元素添加属性border/align/width
$("table").attr({
'border': '1',
'align': 'center',
'width': '400'
});

//将<table>元素的align属性删除
// removeAttr()删除一版的属性,对于静态绑定的事件效果不好,推荐使用prop("事件名",null)来删除
$("table").removeAttr('align')

操作样式

//为无样式的DIV添加样式
// js添加class属性:
// js对象.setAttrbute("class","类名")
// js对象.className = 类名
// jquery提供添加样式的方法是addClass(),删除样式的方法是removeClass() ,这两个方法都支持同时删除和添加多个样式,样式名之间使用空格连接
$("div:first").addClass('myClass myClass2')
//为有样式的DIV删除样式
$("div:last").removeClass('myClass myClass2')

//切换样式，即有样式的变成无样式，无样式的变成有样式
// toggleClass() 如果存在（不存在）就删除（添加）一个类
$("div").toggleClass('myClass');	
//最后一个DIV是否有样式
// hasClass() 判断指定元素是否存在这个样式
console.log($("div:last").hasClass('myClass'))

图片坐标和设置

//获取图片的坐标
var imgOffSet = $("img").offset();
console.log(imgOffSet.top);
console.log(imgOffSet.left);
//设置图片的坐标
// 图片的位置默认使用相对定位进行定位
$("img").offset({'top': '200','left': '200'})

//获取图片的宽高
// width() : 获取图片宽度
// width(data) : 设置图片宽度
// height() : 获取图片高度
// height(data) : 设置图片高度
console.log($("img").width())
console.log($("img").height())
//设置图片的宽高
$("img").width(320)
$("img").height(320)

兄弟和父子元素

//取得div元素的直接子元素内容，不含后代元素
// parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素
console.log($("div").children().text())

//取得div元素的下一个同级的兄弟元素内容	
// next()这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。
console.log($("div").next().text())	

//取得div元素的上一个同级的兄弟元素内容
// prev()只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素
console.log($("div").prev().text())	
//依次取得div元素的上下一个同级的所有兄弟元素的内容
// 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
$("div").siblings().each(function (index,obj) {
console.log(obj.innerHTML)
})

隐藏和显示

//图片隐蔽
// hide():隐藏显示的元素
// hide( speed, [callback] ): 隐藏的动画版
// speed: 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) 
// callback: 回调函数,当隐藏成功后,执行的函数
// 隐藏的实现是通过调整元素的宽度和高度实现的
$("img").hide(3000,function () {
alert('隐藏成功')
})
//休息3秒
$("img").show(3000,function () {
alert('显示成功')
})

淡入和淡出

//淡入显示图片
// 通过调整元素的透明度实现
$("img").fadeIn(3000,function () {
	alert('淡入成功')
})
//淡出隐蔽图片
$("img").fadeOut(3000,function () {
	alert('淡出成功')
})

滑动展示和隐藏内容

//向上下滑动
// 了解即可
$("input").click(function(event) {
$("div").slideToggle(1000);
});

event事件

ready 延迟加载

//定义a()和b()二个方法
function a(){
    alert("JS方式");
}
function b(){
    alert("JQUERY方式");
}

// 在js中有一个事件onload:当页面加载完成后,执行
// 但是在jquery中,没有对应的事件,有个类似的ready()

// 1.使用js的onload事件当页面加载完成后执行a函数
window.onload = function () {
	a();
}

// 2.使用jquery在页面加载完成后执行b函数
$(document).ready(function() {
	b();
});

// 3.使用简化的ready函数执行b函数
$(function () {
	b();
})

// 4.由于jquery封装的是dom操作,所以经常会出现动态绑定事件的需求,所以我们开发中,jquery代码一些写在ready函数中

// 5.ready函数的执行时机是否与onload相同?
// 1)onload代表2个完成:a:外部链接的文件或者图片下载完成 b:页面解析完成,dom模型初始化完成
// 2)ready代表的是:页面解析完成,dom模型初始化完成

change 选中改变事件

//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("#city").change(function(event) {
var $option = $("#city option:selected");
console.log($option.val())
console.log($option.html())
});

focus 获取焦点 select 文本选中

//加载页面时获取光标并选中所有文字
$(function () {
// 获取焦点
$("input").focus();
// 选中文字
$("input").select();

// focus():指定元素获取焦点
// focus(回调函数): 指定元素获取焦点事件
// select():指定元素选中内容(文本)
// select(回调函数): 文本选中事件
})

keyup

//当按键弹起时，显示所按键的unicode码
// 1.按键或者鼠标相关的事件一般事件源是document对象
// 2.事件中的回调函数可以指定一个参数event,代表事件对象,该对象浏览器自动创建,我们直接使用
// 3.按键的unicode码其实就是event对象中的keyCode值
$(document).keyup(function(event) {
console.log(event)
});

mousemove 鼠标移动坐标

//显示鼠标移动时的X和Y座标
$(document).mousemove(function (event) {

// 将鼠标的x和y坐标的值填充进输入框
$("#xID").val(event.clientX);
$("#yID").val(event.clientY);
})

鼠标移入和移出

//鼠标移到某行上，某行背景变色
$("table tr").mouseover(function () {
	$(this).css('background-color', 'pink'); 
})

//鼠标移出某行，某行还原
$("table tr").mouseout(function () {
	$(this).css('background-color', 'white'); 
})

//鼠标移到某图片上，为图片加边框
$("img").mouseover(function () {
	$(this).css('border', '5px solid red'); 
})

//鼠标移出图片，图片还原
$("img").mouseout(function () {
	$(this).css('border', '0'); 
})

表单提交案例

<script type="text/javascript">
    // 页面加载完成后,用户名获取焦点
    $(function () {
    $("#user").focus();
})

// 当用户名失去焦点时校验输入是否合法
$("#user").blur(function(event) {
    var pattern = /^[A-Za-z][A-Za-z0-9]{5,11}$/;
    if (pattern.test(this.value)) {
        // 在消息提示span中给出提示信息
        // removeClass()如果没有指定class,删除所有class
        $("#msg").html("用户名合法").removeClass().addClass('ok');
    }else {
        // 清空输入框内容,并让输入框获取焦点
        $("#msg").html("用户名非法").removeClass().addClass('error');
        this.value = "";
        this.focus();
    }
});
</script>


<script type="text/javascript">

    // var pattern = /^[A-Za-z][A-Za-z0-9]{5,11}$/;
    // * 表示0次或多次
    // [1-9]表示这一位必须出现,是数字但不能是0
    // [0-9]表示后面可以写多位数字,多位的范围表示0-n
    // var pattern = /^[1-9][0-9]*$/;
    // var str = "zaa哈哈ddasd";
    // var result = pattern.test(str);
    // console.log(result)

    //当表单提交前检测
    $("form").submit(function(event) {
    var pattern = /^[A-Za-z][A-Za-z0-9]{5,11}$/;
    var user = $("#user").val();
    if (pattern.test(user)) {
        // 校验通过,提交表单
        return true;
    }else {
        // 清空输入框内容,并让输入框获取焦点
        $("#msg").html("用户名非法").removeClass().addClass('error');
        this.value = "";
        this.focus();
        return false;
    }
});
</script>