jQuery基础2

最新推荐文章于 2025-04-20 17:56:16 发布

jen51890

最新推荐文章于 2025-04-20 17:56:16 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

分类专栏：基础知识文章标签： jQuery 事件正则 DOM ajax

本文链接：https://blog.youkuaiyun.com/jen51890/article/details/90439051

基础知识专栏收录该内容

15 篇文章

订阅专栏

jquery事件

- ready() DOM加载完成
- click() 鼠标单击  
- blur() 元素失去焦点
- focus() 元素获得焦点
- mouseover() 鼠标进入（进入子元素也触发）
- mouseout() 鼠标离开（离开子元素也触发）
- mouseenter() 鼠标进入（进入子元素不触发）
- mouseleave() 鼠标离开（离开子元素不触发）
- submit() 单击表单提交按钮时执行submit函数

<script>    
$(function(){
        $('input').focus(function(){
            // 清空也有条件：如果是默认值
            if($(this).val() == '请输入用户名'){
                $(this).val('')
            }
        })
        $('input').blur(function(){
            // 还回默认值条件：如果用户没有输入数据
            if($(this).val() == ''){
                $(this).val('请输入用户名')
            }
        })
    })
 </script>
    <!-- <input type="text" placeholder="请输入用户名"> -->
    <input type="text" value="请输入用户名">

正则在js的使用方法

在jQuery中，没有额外封装正则的使用方法，用原生js实现正则

正则表达式在js的两种写法：

var re=new RegExp(‘规则’, ‘可选参数’)
var re=/规则/参数

常用函数
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

合法：返回true
不合法：返回false

事件冒泡

什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
阻止事件冒泡方法
event.stopPropagation()
阻止默认行为
event.preventDefault();
合并阻止操作，阻止冒泡和阻止默认行为合并起来写
return false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
//导入jquery函数库
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
    $(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
//阻止事件冒泡
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})
    </script>
    <style>
    .father{
        width: 400px;
        height: 400px;
        background: black;
    }
    .son{
        width: 300px;
        height: 300px;
        background: red;
    }
    .grandson{
        width: 200px;
        height: 200px;
        background: goldenrod;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="grandson"></div>
        </div>
    </div>
</body>
</html>

事件委托的原理及写法

事件委托就是利用冒泡的原理，把事件加到父级上
事件委托好处：
- 可极大减少事件绑定次数，提高性能
- 可让动态加入的子元素绑定相同的命令
  3.写法： $(目标).delegate(目标,事件属性，匿名函数)

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

DOM常用操作

DOM 文档对象模型 document object model
在dom中把标签元素称为节点(node)

1. append() ： 在子级的尾部追加
   //创建新的节点
   var $li = $('<li>2222222</li>')
   //在ul的子级尾部追加节点<li>2222222</li>
   $('ul').append($li)

2. after() ： 在同级的下面追加
	var $div = $('<div>2222222</div>')
    //在ul的下面追加节点<div>2222222</div>
    $('ul').after($div)

3. remove() 删除节点 
  //删除ul节点
  $('ul').remove()

4. empty() ：清空节点
   $('ul').empty()  // 清空节点

js对象

的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

//创建javascript对象有两种方法，
var person = new Object();
// 添加属性：
person.name = 'tom';
person.age = '25';
// 添加方法：
person.sayName = function(){
    alert(this.name);
}
//方法二：
var person2 = {
    name:'Rose',
    age: 18,
    sayName:function(){
        alert('My name is' + this.name);
    }
}

json

类似于javascript对象的一种数据格式对象，与JavaScript对象写法不同的是，json对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

ajax

$.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步

//以前的写法：
$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
    success:function(dat){
        alert(dat.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

//新的写法(推荐)：
$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

//$.ajax的简写方式
//$.ajax按照请求方式可以简写成$.get或者$.post方式

$.get("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});

$.post("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});