1. jquery选择器
- 标签选择器
$('li') // 选择所有的li标签 - 类选择器
$('.class') // 选择class为class的标签 - id选择器
$('#id') // 选择id为id的标签 - 层级选择器
$('#ul1 li span') // 选择id为ul1标签下的所有li标签下的span标签 - 属性选择器
$('input[name=first]') // 选择name属性等于first的input标签
2. 选择集过滤
- has(选择器名称)方法，表示选取包含指定选择器的标签
- eq(索引)方法，表示选取指定索引的标签
3. 选择集的转移
- 以选择的标签为参照，然后获取转移后的标签
- 选择集转移操作
$('#box').prev(); // 表示选择id是box元素的上一个同级元素 $('#box').prevAll(); // 表示选择id是box元素的上面的所有的同级元素 $('#box').next(); // 表示选择id是box元素的下一个的同级元素 $('#box').nextAll(); // 表示选择id是box元素的下面的所有的同级元素 $('#box').parent(); // 表示选择id是box元素的父元素 $('#box').children(); // 表示选择id是box元素的所有子元素 $('#box').siblings(); // 表示选择id是box元素的其它同级元素 $('#box').find('.class'); // 表示选择id是box元素的class等于class的元素
4. jquery常用的事件（先获取控件标签，再添加事件）
- 鼠标点击
click(); - 元素失去焦点
blur(); - 元素获得焦点
focus(); - 鼠标进入（进入子元素也触发）
mouseover(); - 鼠标离开
mouseout(); - DOM加载完成
ready();
5. json数据格式
- 对象格式
- 数组格式
6. ajax
- 发送异步的http请求，与后台通信进行数据的获取，实现局部刷新。
7. 总结
- jquery示例1
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- jquery包的导入 --> <script type="text/javascript" src="*.*"></script> <style> .class { font-size: 10pt; color: red; } </style> <script type="text/javascript"> // 页面标签和数据加载完成执行 window.onload=function(){ var dv1 = document.getElementById("dv1"); alert(dv1); } // 页面标签加载完成执行，不等待数据加载完成，比window.onload快 $(document).ready(function(){ var $dv1 = $("#dv1"); alert($dv1); }); // 简写 $(function(){ var $dv1 = $("#dv1"); alert($dv1); // 获取标签的内容 var rst = $dv1.html(); // 设置标签的内容，之前的内容会清除 $dv1.html('<span style="color: red;">hello</span>'); // 追加标签的内容 $dv1.append('<span style="color: red;">hello</span>'); // 设置样式属性 $dv1.css({"font-size": "10pt", "color": "red"}); // 获取样式属性 $dv1.css('font-size'); // 设置样式以外的其他属性 $dv1.prop({"name": "dv1", "class": "dvCls"}); // 获取样式以外的其他属性 $dv1.prop("name"); // 获取value时的两种方式 var $txt1 = $('#txt1'); $txt1.prop("value"); $txt1.val(); // 设置value时的两种方式 $txt1.prop({"value": "1"}); $txt1.val("1"); }); // 选择集过滤 // 选择有id标签为txt1的div var $dv2 = $('div').has('#txt1'); // 选择第二个div var $dv3 = $('div').eq(1); </script> </head> <body> <div id="dv1">div1</div> <div> <input type="text" name="" id="txt1"> </div> <div> <input type="text" name="" id="txt2"> <input type="text" name="" id="txt3"> </div> </body> </html> - jquery示例2
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- jquery包导入 --> <script type="text/javascript" src="*.*"></script> <script type="text/javascript"> $(function() { // 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作 var $ul1 = $('#ul1'); $ul1.delegate("li", "click", function() { $(this).css({"color": "red"}); }); var $div = $('div'); $div.delegate("#p1,#btn1", "click", function(){ alert("OK"); }); }); // javascript对象 var obj = new Object(); // 给对象添加属性 obj.name = "user"; obj.age = 18; // 添加方法 obj.writeObj = function() { console.log(obj.name + obj.age); } // 调用对象的属性和方法 alert(obj.name); obj.writeObj(); // 对象字面量创建对象 var obj2 = { name:"user", age:18, writeObj:function(){ console.log(obj.name + obj.age); } } </script> </head> <body> <div> <p id="p1"></p> <input type="button" id="btn1"> <ul id="ul1"> <li>a</li> <li>b</li> </ul> </div> </body> </html> - json示例
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript"> // 对象格式的json var json1 = '{"name": "user","age": 18}'; // 数组格式的json var json2 = '["user", 18]'; // json数据转换为js对象 var obj = JSON.parse(json1); alert(obj.name); </script> </head> <body> </body> </html> - ajax示例
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="*.*"></script> <script type="text/javascript"> $.ajax({ // 请求地址 url:'', // 请求方式，默认是GET，常用的还有POST type:'', // 设置返回的数据格式，常用的是JSON dataType:'', // data：设置发送给服务器的数据，没有不需要设置 data:{"name":"ls"} // 请求成功后的回调函数 success:function(response){ console.log(response); }, // 请求失败后的回调函数 error:function(){}, // 设置是否异步，默认是true，表示异步，一般省略 async:true }); // 发送get方式的ajax的简写形式 // 1. 请求的url // 2. 请求发送给web服务器的参数 // 3. 请求成功的回调函数 // 4. 返回数据的解析方式 // 5. error 失败执行的回调函数 $.get('',{},function(response){ console.log(response); },'JSON').error(function(){ }); </script> </head> <body> </body> </html>
2540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
