jQuery基础2

    xiaoxiao2022-06-30  207

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

    最新回复(0)