jQuery基础2

xiaoxiao2022-06-30 215

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" 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)