jQuery
1.简介
-
什么是jQuery :
- JavaScript和查询query 就是辅助JavaScript开发的js类库.
-
核心思想:
- write less, do more. 写的更少做的更多.所以实现很多浏览器的兼容问题
-
jQuery流行程度
- 已成为最流行的JavaScript库
-
好处:
- 免费开源,轻量级
2.jQuery之helloword
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/* window.onload = function () {
var elementById = document.getElementById("btnId");
elementById.onclick = function () {
alert("原生js绑定事件");
}
}*/
$(function () {
// 1 通过id获取标签对象
var $btnId = $("#btnId");
// 2 绑定单击事件
$btnId.click(function () {
alert("jQuery的单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
3.jQuery核心函数
$ 是jQuery的核心函数,能完成jQuery的很多功能$() 就是调用这个函数.
-
传入参数是 函数时
- 作用:window.onload的作用
$(function){}页面加载完成类似于 windom.onload = function(){} 1 传入函数时; $(function() {}) 作用:类似 window.onload的作用 window.onload与$(fn) 1.执行时机 前者: 当前文档[完全加载] 后执行 后者: 当前文档[绘制完成] 后执行 2.当前文档中书写的次数 前者: 只能书写一次 [多些不会报错,后面会直接覆盖] 后者: 可以多次 3.语法结构 前者:只有一种 后者:有两种语法 $(function () { alert("jQuery第一种写法"); }); $(document).ready(function () { alert("jQuery第二种写法"); }) -
传入参数为[HTML]字符串时候
- 作用:选择器
$("#btn"); // 根据id属性查找标签对象 $("button"); // 根据标签名进行查找 $(".classA"); // 根据给定的class属性查找标签对象 -
传入参数为[选择器参数的时候]
- 作用:创建元素节点
$(function () { // 获取元素节点 var $li = $("<li>印度</li>"); // 把$li 添加到最后 var append = $("#city").append($li); }); </script> </head> <body> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> -
传入参数为[DOM对象]时:
- 那么会把dom对象转换为jQuery对象.
4.传入参数为DOM对象时 : $(DOM对象) 作用:将DOM转换为jQuery 如何区分DOM和jQuery对象? 观察alert(对象)的结果 结果:object Object,是jQuery object HTMLXXX, 是DOM对象 window.onload = function () { var elementById = document.getElementById("city"); alert(elementById); } var $city = $(elementById); alert($city);
4.jQuery和dom对象区分以及转换
-区分
```JavaScript
Dom对象
1.通过getElementById()查询出来的标签对象是Dom对象
2.通过createElement() 方法创建的对象，是Dom对象
dom对象的特点是 => [object HTMLButtonElement]
jQuery对象
3.通过JQuery提供的API创建的对象，是JQuery对象
4.通过JQuery包装的Dom对象，也是JQuery对象
5.通过JQuery提供的API查询到的对象，是JQuery对象
jQuery对象的特点是 : ==>> [object Object]
为什么需要将DOM与JQuery进行转换:?
答: 两者DOM和jQuery 无法调用对象属性和方法,
如果需要调用对方的属性或方法时,需要类型转换
DOM对象转化为jQuery对象
$(DOM对象)
jQuery对象和DOM对象
将jQuery看作为数组集合[记忆技巧][jQuery本质是伪装数组实现]
$div[0]
$div.get[0]
-
转换
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { // 表示页面加载完成之后 // 使用DOM对象调用DOM方法 // 通过id查找标签对象,并绑定单击事件 $("#dom2dom").click(function () { // 通过id获取标签对象 var elementById = document.getElementById("testDiv"); // 调用innerText方法 alert(elementById.innerText); }); // 使用jQuery对象调用jQuery方法 $("#jQuery2jQuery").click(function () { var $testDiv = $("#testDiv"); alert($testDiv.text()); }); // 使用DOM对象调用jQuery方法 $("#dom2jQuery").click(function () { var elementById = document.getElementById("testDiv"); alert($(elementById).text()) }); // 使用jQuery对象调用DOM方法 $("#jQuery2dom").click(function () { var $testDiv = $("#testDiv"); // alert($testDiv.get(0).innerText); alert($testDiv[0].innerText); }); }); </script> </head> <body> <div id="testDiv">Atguigu is Very Good!</div> <button id="dom2dom">使用DOM对象调用DOM方法</button> <button id="dom2jQuery">使用DOM对象调用jQuery方法</button> <button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button> <button id="jQuery2dom">使用jQuery对象调用DOM方法</button> </body> -
dom对象转化为jQuery对象（*重点）
- 先有dom对象
- $( dom对象 ) ===>>> jQuery对象
-
jQuery对象转为dom对象（*重点）
- 先有jQuery对象
- 通过下标获取dom对象 jquery对象[下标] 得到 dom对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJdK2v1E-1608425582804)(file:///C:\Users\psd\AppData\Local\Temp\ksohtml15328\wps3.jpg)]
5.jQuery选择器
-
基本选择器
id : 根据id进行筛选 .class : 根据class进行筛选 element: 根据标签进行筛选 * 所有元素 select1,select2, 并集选择器(组合选择器) -
层及选择器
层级选择器： ancestor descendant ： 后代选择器 parent > child ： 子代选择器 并且它是第一个选择器 的子元素 prev + next ： 相邻选择器[后] prev ~ siblings ： 兄弟[同辈]选择器[后] -
过滤选择器
:first 选择第一个元素 :last 选择最后一个元素 :not(selector) 选出不是selector的元素 :even 索引偶数选择器，从 0 开始计数 :odd 索引奇数 :eq(index) 索引等于index的元素 :gt(index) 索引大于index的元素 :lt(index) 索引小于index的元素 :header 选择h1等这些标题元素 :animated 选择正在执行动画的元素 -
内容过滤器
:contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素 :parent 匹配有子元素或文本内容的元素 :has(selector) 匹配含有选择器所匹配的元素的元素 -
可见选择器
:hidden 所有隐藏的元素 :visible 所有可见元素 -
属性与子元素过滤器
属性 [attribute] 包含attribute属性的元素 [attribute=value] attribute属性值等于value的元素 name="username" [attribute!=value] attribute属性值不等于value的元素 [attribute^=value] attribute属性的value值以value开头的 [attribute$=value] attribute属性的value值以value结尾 [attribute*=value] attribute属性的value值包含value的 [attrSel1][attrSel2][attrSelN] 同时满足[]里的所有条件的元素 子元素 :nth-child(index) 获取第index个元素。注意index不同于eq(index),这里从1开始 :first-child 匹配每一组父元素中的子元素中的第一个，与:first有不同 :last-child 匹配每一组父元素中的子元素中的最后一个，与:last有不同 :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配 -
表单及表单对象属性过滤器
表单 :input 选择所有的input框 :text 选择所有的text框 :password 选择所有的password框 :radio 选择所有的radio框 :checkbox 选择所有的checkbox框 :submit 选择所有的submit :image 选择所有的image :reset 选择所有的reset框 :button 选择所有的button按钮 :file 选择所有的文件筐 :hidden 选择所有的隐藏域 表单对象的属性 :enabled 可用的 :disabled 不可用的 :checked 选择的，checkbox或者单选按钮的选择 复选框、单选框等，不包括select中的option :selected 选择的，下拉列表的选择 匹配所有选中的option元素-
案例:对多选框里面的内容进行遍历
//4.获取多选框选中的内容 $("#btn4").click(function(){ // 方式一: 获取多选框选中的内容 // 获取选中的复选框 var $checkbox = $(":checkbox:checked"); // 进行遍历 for (var i = 0;i < $checkbox.length;i++) { alert($checkbox[i].value); } // 方式二: // each() 可以遍历jQuery中的每一个元素 // 有几个元素.each(function)就遍历几次 // 在each遍历function函数中,有一个this对象,这个this对象就是当前的dom对象 $(":checkbox:checked").each(function () { alert(this.value); });*/ -
案例:获取下拉框里面的内容
//5.获取下拉框选中的内容 $("#btn5").click(function(){ // 方式一: 获取下拉列表锁选中的内容 var $select = $("select option:selected"); // 进行each(function())进行遍历 $select.each(function () { alert(this.value); }); // 方式二: 先获取选中的option标签 var $option = $("option:selected"); // 遍历每一个option标签获取中间的文本 $option.each(function () { // 在each遍历的function函数中,有一个this对象. // 这个this对象是当前正在遍历到的dom对象 alert(this.innerText); }); });
-
6.jQuery的属性操作
-
html : 它可以设置和获取起始标签和结束标签里面的内容 innerHTML功能一样
含有HTML
-
text() : 它可以设置和获取起始标签和结束标签里面的文本 innerText功能一样
-
val() : 可以设置和获取表单项的value属性值
案例1:
$(function () { // html() 它可以设置和获取起始标签和结束标签中的内容 innerHTML功能一样 // html 不传参数就是获取 // var html = $("<div>1</div>").html(); // alert(html); // 传递参数就是设置 >标题1</h1>"); // var html = $("div:first").html("<h1>标题1</h1>"); // text() 它可以设置和获取起始标签和结束标签中的文本 innerText 功能一样 var text = $("div:eq(1)").text(); // alert(text); $("div:eq(1)").text("<h1>标题1</h1>"); // 给按钮绑定单击事件 $("button").click(function () { // val() 可以设置和获取表单项的value属性值 // 不传递参数就是获取输入框里面的内容 var val = $(":text").val(); alert("输入框里面的内容是:" + val); // 传递参数就设计输入框里面的内容 $(":text").val("设置"); }); }) </script> </head> <body> <div>1</div> <div>2 <div>1</div> </div> <input type="text"> <button>按钮</button> </body>案例2:
<script type="text/javascript"> $(function () { /* // 设置单选框被选中 // 匹配所有单选按钮 $(":radio").val(["radio2"]); // 设置复选框被选中 $(":checkbox").val(["checkbox1","checkbox2","checkbox3"]); // 设置多选的下拉框 $("#multiple").val(["mul3","mul4"]); // 设置单选的下拉框 $("#single").val(["sin3"]);*/ // val 方法同时设置多个表单项的值( 值决定选中状态 )示例代码： $(":radio,:checkbox,#multiple,#single").val(["radio2","checkbox2","checkbox3","mul2","mul4","sin2"]); }); </script> </head> <body> 单选： <input name="radio" type="radio" value="radio1" />radio1 <input name="radio" type="radio" value="radio2" />radio2 <br/> 多选： <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2 <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3 <br/> 下拉多选 ： <select id="multiple" multiple="multiple" size="4"> <option value="mul1">mul1</option> <option value="mul2">mul2</option> <option value="mul3">mul3</option> <option value="mul4">mul4</option> </select> <br/> 下拉单选 ： <select id="single"> <option value="sin1">sin1</option> <option value="sin2">sin2</option> <option value="sin3">sin3</option> </select> </body>
7.jQuery的属性操作
-
attr():设置和获取属性的值
-
prop():设置和获取属性的值
-
(推荐操作 checked , selected , readOnly , disable 这类操作)
-
attr() 和 prop()区别:
$(function () { // 一个参数,属性名,是获取 // var attr = $(":checkbox:first").attr("name"); // alert(attr); // checkbox1 var attr = $(":checkbox:first").prop("checked"); alert(attr); // 两个是设置 一个是参数名,一个是参数值 // var attr = $(":checkbox:first").attr("name","abc"); // alert(attr) // var prop = $(":checkbox:eq(1)").prop("checked",true); // alert(prop); // $(":checkbox:eq(2)").attr("abc","168888"); /* *attr() 设置和获取属性的值 (不推荐操作 checked,selected,readOnly,disable,等这类属性) 它们返回的是true和false *attr 方法它可以设置非标准属性的(自定义属性) *prop() 设置和获取属性的值(只推荐操作 checked,selected,readOnly,disable,等这类属性) */ }); </script> </head> <body> 多选： <input name="checkbox1" type="checkbox" value="checkbox1" />checkbox1 <input name="checkbox2" type="checkbox" value="checkbox2" />checkbox2 <input name="checkbox3" type="checkbox" value="checkbox3" />checkbox3 <br/> </body>
-
-
jQuery操作元素【标签】节点
-
增
-
内后 :
-
append(): a. append(b) : ab
-
appendTo(): a.appendTo(b) : ba
-
-
内前:
- prepend()
- prepentdTo()
-
外后:
- after()
- insertAfter()
-
外前:
- before()
- insertBefore()
-
-
删
- empty() : 删除匹配的子元素[掏空]
- remove() : 删除匹配元素
-
改
- replaceWith() : a.replayWith(b) 用b 替换a
- replaceALl() : a.replaceALl(b) 用a替换b全部
-
查
- first()
- last()
- eq() : 匹配指定索引
- filter : 筛选出与指定表达式匹配的元素集合。
- children()：匹配子代元素节点
- find()：匹配后代元素节点
- parent()：匹配父一代元素节点
- parents()：匹配祖先元素节点
- next()：匹配下一个元素节点
- prev()：匹配上一个元素节点
- siblings()：匹配兄弟【上下】元素节点
-
-
jQuery操作CSS样式表：
-
addClass() : 添加样式
-
removeClass() : 删除样式
-
toggleClass() : 有就删除,没有就添加
-
offset() : 获取和设置元素的坐标位置
<title>Insert title here</title> <!-- 设置css 样式: --> <style type="text/css"> .bg_c{ background: #aaaaaa; } </style> <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ // 给文本框绑定change事件 $("#username").change(function () { var username = $(this).val(); if (username == "wzg168"){ // alert("用户名已存在"); $("#unMsg").html("<b>用户名已存在</b>").css("color","#f00"); } else { // alert("用户名可用"); $("#unMsg").html("<b>可用</b>").css("color","#0f0"); } }); $("#myDiv").mouseover(function () { $(this).addClass("bg_c"); }).mouseout(function () { $(this).removeClass("bg_c"); }); }); </script> </head> <body> <form action=""> 用户名：<input type="text" name="username" id="username"> <span id="unMsg"></span> <br> 密码：<input type="password" name="pwd"><br> <input type="submit"> </form> <br> <!-- 测试mouseover 和 mouseout 事件 --> <div id="myDiv" class> 测试mouseover 和 mouseout </div> </body>
-
-
jQuery常用事件:
- ready(function) : 当前文档绘制完成之后执行[触发函数]
- click(function) : 单击事件
- live(“事件名”,function) : 事件委派
- jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效
- delegate(“选择器”,“事件名”,function) ; live 的升级版
- change(function) : 文本改变且失去焦点事件
- mouseover() : 鼠标移入[悬停]事件
- mouseout() : 鼠标移除事件
8.正则表达式
8.1为什么使用正则表达式
- 传统方式验证表单中数据时，只可验证基本的非空规则。如验证较复杂规则，代码难度及代码负责较大。固使用正则。
8.2正则概述
- 就是验证一组数据的规则
8.3正则语法
- var reg = /规则/;
- var reg = /1/
- {n}：匹配n次
- {n,} : 匹配至少n次【>=n】
- {n，m}：匹配至少n次，最大m次【n<=index<=m】
7.4正则中特殊规则
- 特殊字符
- \d, 等价于[0,9]
- \w, 等价于[a-zA-Z0-9_]
- . , 等价于除\n之外的任意字符
- 特殊次数
- *, 等价于{0, }
- +, 等价于{1, }
- ?, 等价于{0,1 }
- 常用正则规则
- var reg = var reg = /2+(.[a-z\d]+)*@([\da-z](-[\da-z])?)+(.{1,2}[a-z]+)+$/ //邮箱
扫一扫
4750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
