- jQuery介绍
在JavaScript的使用过程中，存在很多问题，例如：兼容问题(咱不考虑)，元素获取方式单一(只能用基本的选择器)等等，因此就出现了很多第三方的封装库(将复杂的、麻烦的功能进行封装，提供给用户一种简单的、可直接调用的形式进行使用)，在众多的第三方库中脱颖而出的就是jQuery
**理念：**写的少，做的多。（用更少的代码做更多的事情）
**注意：**jQuery中提供的函数或对象与js中的函数或对象是没有关系的。
导入JQuery的代码包
**
2. jQuery基本使用：
## 选择器：
**
```html
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
//使用js进行获取
var btns = document.getElementsByTagName("button");
var btns2 = document.getElementsByClassName("btn");
//使用jQuery的形式获取 jQuery的形式获取到的元素都是一组元素
//命名的时候为了和js的变量进行区分，通常jQuery的变量前面都会加上一个$
var $btns = $('button');
var $btns2 = $('.btn');
//典型错误：$ is not defined 该错误的出现意味着jQuery的文件未加载成功
//控制台输出
console.log($btns);
console.log($btns2);
//获取除了submit按钮之外的其他的input标签
var $inNodes = $('input:not([type="submit"])');
console.log($inNodes);
//jQuery中提供的常用选择器
console.log($('button:eq(1)')); //= eq
console.log($('button:gt(1)')); //> gt
console.log($('button:lt(1)')); //< lt
</script>
2.2 获取对象-过滤选择器
```html
//jQuery中提供的常用过滤器
// eq =
console.log($('button').eq(1));
// next 下一个
console.log($('input[type="text"]').next());
// parent 父类
console.log($('button').parent());
//children 子
console.log($('button').parent().children('button:eq(0)'));
2.3 获取及修改元素的值
//得到匹配元素集合中每个元素的合并文本，包括他们的后代 text（）
//console.log($('p').text());
//修改值
console.log($('p').text('揍你啊'));
//获取集合中第一个匹配元素的HTML内容 html（）
//console.log($('p').html());
//修改值
//console.log($('p').html('揍你啊'));
//获取匹配的元素集合中第一个元素的当前值 val
//console.log($('input').val());
//将修改集合中每个元素的值
//$('input').val("lala");
2.4 获取及修改样式
<script type="text/javascript">
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
//this.style.color = "red";
//修改单个样式.css(key,val)
//$('button').css('color','darkcyan');
//修改多个样式.css({key:val,key:val,...})
$('button').css({'color':'red','font-size':'20px'})
//获取样式
console.log($('button').css('font-size'));
}
</script>
- jQuery和js对象之间的转换
jQuery对象只能使用jQuery中提供的函数或属性，同样的jQuery中的属性或函数只能由jQuery对象调用
JS对象只能使用JS中提供的函数或属性，同样的JS中的属性或函数只能由JS对象进行调用
<script type="text/javascript">
//获取元素使用jquery
var $btn = $('button');
//将jQuery对象转换为js对象
//var btn = $btn[0]; //利用数组本身的特性(下标)
var btn = $btn.get(0); //jQuery本身提供的一种转换函数
btn.onclick = function(){
//将js对象转换为jQuery对象 this是js对象 $(js对象)
//console.log(this.innerHTML);
console.log($(this).html());
}
</script>
-
jQuery中的遍历形式
遍历一：$(‘选择器’).each(function(index,element){})，该写法是用于遍历获取到的元素对象
//目的：输出元素的内容 函数中不带参数
/* $('button').each(function(){
console.log(this.innerHTML);
}) */
//函数中带有一个参数,该参数代表下标
/* $('button').each(function(index){
console.log(index);
}) */
//参数一：下标，参数二：对象
$('button').each(function(index,element){
console.log(index,element.innerHTML);
})
console.log("-----------灵魂分割线-----------");
//遍历指定的集合数据,参数一：代表要遍历的集合对象，参数二：函数
var arr = ["张飞","刘备","关羽"];
/* $.each(arr,function(){
console.log(this);
}) */
/* $.each(arr,function(index){
console.log(index);
}) */
$.each(arr,function(index,element){
console.log(index,element);
})
var json = {"name":'张飞',"age":13};
$.each(json,function(key,val){
console.log(key,val);
})
- jQuery事件绑定
js中的所有事件都是以on开头的，在jQuery中是都不加on的
ready和onload的区别：
1、onload事件是在页面的DOM结构及图片资源都加载完毕后执行的，而ready事件是在DOM结构加载完后执行
2、onload事件只能使用一次，使用多次会被覆盖 ready事件可使用多次
实例：
//onload是在页面结构都加载完毕(DOM树结构及图片资源)后才开始执行其中的代码
window.onload = function(){
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
alert(this.innerHTML);
}
}
window.onload = function(){
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
alert("hahaha");
}
}
$(document).ready(function(){
$('button').click(function(){
alert($(this).html());
})
})
$(function(){
$('button').click(function(){
alert($(this).html());
})
})```
在js中是无法直接给一组元素绑定事件的，但是在jQuery中可以
```html
$('button').click(function(){
alert($(this).html())
})
$('button').click(show)
function show(){
alert($(this).html())
}
焦点事件，失去焦点blur，获取焦点focus
//该函数的目的是为了验证表单中的数据，并给出验证的结果
function check(){
return false;
}
//jQuery中直接在函数返回结果即可
$('form').submit(function(){
return true;
})
上述的写法都是给元素进行单一的事件绑定，能否同时对元素绑定多个事件呢？
js中给后添加进来(通过js动态添加到页面中的元素)的元素绑定事件是一件比较麻烦的事情，jQuery中能否处理呢
在jQuery中提供了多种事件绑定的函数，根据版本的迭代更新，目前常用的主流的是on事件，其他的事件有：bind/unbind，live/die，delegate/undelegate。在jQuery的3.1.1的版本中，通过源码可以知道，新版本中的bind等事件的底层也是通过on来实现的。
关于使用on给元素绑定事件：
var divNode = document.getElementsByTagName('div')[0];
//需要指定要绑定的事件名，函数
$('button').on('click',function(){
//创建元素
var pNode = document.createElement('p');
//赋值
pNode.innerHTML = "show you";
//添加到div中
divNode.appendChild(pNode)
})
//需求：在点击P标签后显示p标签中的内容
var $pNodes = $('p');
$pNodes.on('click',function(){
console.log($(this).html());
})
//语法:父元素对象.on(事件名,子元素,function(){})
$('div').on('click','p',function(){
console.log($(this).html());
})
事件冒泡-事件向上传递-通常存在于具有包裹关系的元素中
$('button').click(function(){
alert('btn up');
})
$('div').click(function(){
alert('div up')
})
$('body').click(function(){
alert('body up')
})
如何阻止事件冒泡？
只要有事件的存在就一定有事件源-event
阻止事件冒泡：event.stopPropagation();
$('button').click(function(event){
event.stopPropagation();
alert('btn up');
})
on同时绑定多个事件
$('input').blur(function(){
var phone = $(this).val();
var $span = $(this).next();
if(phone.length!=11){
$span.html('手机号错误')
$span.css('color','red')
}else{
$span.html('')
}
})
$('input').focus(function(){
$(this).next().html('请输入11位手机号');
$(this).next().css('color','black')
})
$('input').on({
'blur':function(){
var phone = $(this).val();
var $span = $(this).next();
if(phone.length!=11){
$span.html('手机号错误')
$span.css('color','red')
}else{
$span.html('')
}
},
'focus':function(){
$(this).next().html('请输入11位手机号');
$(this).next().css('color','black')
}
})
6.jQuery动态增删元素
使用JavaScript的形式进行元素的增删时，优点是逻辑清晰明了，缺点是比较繁琐
7.表单验证案例
7.1 正则表达式
正则表达式主要是为了去处理(验证)一些**比较复杂**的数据，例如：手机号运营商区分、身份证号验证等
如果只是简单的验证就不要多此一举再去使用正则表达式，例如：是否为空、是否是11位数字等
要求：通常情况下，公司会提供所需要的正则表达式的语句，或者公司没这方面的要求，通常情况下就直接百度一个。
扫一扫
4683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
