32.jQuery基础

1. jQuery介绍

在JavaScript的使用过程中，存在很多问题，例如：兼容问题(咱不考虑)，元素获取方式单一(只能用基本的选择器)等等，因此就出现了很多第三方的封装库(将复杂的、麻烦的功能进行封装，提供给用户一种简单的、可直接调用的形式进行使用)，在众多的第三方库中脱颖而出的就是jQuery

理念：写的少，做的多。（用更少的代码做更多的事情）

注意：jQuery中提供的函数或对象与js中的函数或对象是没有关系的。

2. jQuery基本使用

2.1 获取对象-css及css3中提到的选择器

//基本选择器
<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);
</script>

console.log("--------灵魂分割线----------");
//css2/3中提供的选择器
//获取除了submit按钮之外的其他的input标签
var $inNodes = $('input:not([type="submit"])');
console.log($inNodes);

console.log("--------灵魂分割线----------");
var $btns3 = $('button:nth-of-type(2n+1)');
console.log($btns3);
//jQuery中提供的常用选择器
console.log($('button:eq(1)'));//=
console.log($('button:gt(1)'));//>
console.log($('button:lt(1)'));//<
console.log("--------灵魂分割线----------");

2.2 获取对象-过滤选择器

//jQuery中提供的常用过滤器
console.log($('button').eq(1));
console.log($('input[type="text"]').next());
console.log($('button').parent());
console.log($('button').parent().children('button:eq(0)'));

2.3 获取及修改元素的值

//得到匹配元素集合中每个元素的合并文本，包括他们的后代
//console.log($('p').text());
console.log($('p').text('揍你啊'));

//获取集合中第一个匹配元素的HTML内容 
//console.log($('p').html());
//console.log($('p').html('揍你啊'));

//获取匹配的元素集合中第一个元素的当前值
//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>

3. 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>

4. 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);
})

5. jQuery事件绑定

js中的所有事件都是以on开头的，在jQuery中是都不加on的

ready和"md-end-block md-p">1、"md-end-block md-p md-focus">2、"language-javascript">// function(){ var btn = document.getElementsByTagName("button")[0]; btn.onclick = function(){ alert(this.innerHTML); } } window. 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中可以

$('button').click(function(){
    alert($(this).html())
})

$('button').click(show)
function show(){
    alert($(this).html())
}

焦点事件，失去焦点blur，获取焦点focus

//焦点事件，当输入框获取到焦点时改变其背景颜色
$('input').focus(function(){
    $(this).css('background-color','pink')
})

//失去焦点事件，当输入框失去焦点时将背景变为白色
$('input').blur(function(){
    $(this).css('background-color','white')
})

表单提交事件，submit

//该函数的目的是为了验证表单中的数据，并给出验证的结果
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的形式进行元素的增删时，优点是逻辑清晰明了，缺点是比较繁琐

<script type="text/javascript">
    //此处模拟从后台拿到的数据
    var jsonArr = [
        {name:"刘备",age:14,sex:"男",address:"三国"},
        {name:"关羽",age:13,sex:"男",address:"三国"},
        {name:"张飞",age:12,sex:"男",address:"三国"}
    ];
var i = 1;
$('button:eq(0)').click(function(){
    $.each(jsonArr,function(index,json){
        $('table').append("<tr class='add'><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+
                          json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td><td><span class='operation show'>查看</span><span class='operation del'>删除</span></td></tr>")
        // $("<tr><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td></tr>").appendTo($('table'))
        //$('table').prepend("<tr><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td></tr>")
    })
})

$('button:eq(1)').click(function(){
    //情况指定元素中的子元素
    //$('table').empty()
    $('tr').remove('[class="add"]')
})

//给删除标签添加点击事件
$('table').on('click','.del',function(){
    $(this).parent().parent().remove()
})
</script>

7.表单验证案例

正则表达式主要是为了去处理(验证)一些比较复杂的数据，例如：手机号运营商区分、身份证号验证等

如果只是简单的验证就不要多此一举再去使用正则表达式，例如：是否为空、是否是11位数字等

要求：只需要各位掌握其基本的使用形式即可，不需要你写复杂的表达式，因为，通常情况下，公司会提供所需要的正则表达式的语句，或者公司没这方面的要求，通常情况下就直接百度一个。

注意：本文归作者所有，未经作者允许，不得转载

1. jQuery介绍

2. jQuery基本使用

3. jQuery和js对象之间的转换

4. jQuery中的遍历形式

5. jQuery事件绑定

6.jQuery动态增删元素

7.表单验证案例

已有 0 条评论

热门阅读

SQL数据库中如何把一个表的同一个字段复制到同一个表的另一个字段

postgresql 日期字符串转换

创建SpringBoot的web项目，打jar包，在本地和linux服务器上部署，完美解决404等问题

String转Json有三种方法

解决Vue中文本输入框v-model双向绑定后数据不显示的问题

文件上传下载系统服务

springboot定时任务注解使用

Postgresql like错误的坑(ERROR: could not determine data ...)

最新发布