一、jQuery操作属性和样式
操作属性
原生js 中的通过元素.属性名或者元素.setAttribute()方式操作元素属性,jQuery给我们封装了attr() 和removeAttr()，更加简单的操作属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .x{ background-color: #FF0000; } </style> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function fun1(){ // 获取某个属性的值 var color_value = $("#f1").attr("color") console.log(color_value) var color_value = $("#f1").attr("size") console.log(color_value) var color_value = $("#f1").attr("id") console.log(color_value) } function fun2(){ //删除某个属性 $("#f1").removeAttr("color") } function fun3(){ //增加属性 $("#f1").attr("class", 'x') } function fun4(){ //修改属性 $("#f1").attr("size", '7') } </script> </head> <body> <font size="3" color="cadetblue" id="f1">零丁洋里叹零丁</font> <hr> <input type="button" value="获取属性" onclick="fun1()"> <input type="button" value="删除属性" onclick="fun2()"> <input type="button" value="增加属性" onclick="fun3()"> <input type="button" value="修改属性" onclick="fun4()"> </body> </html>
操作样式
原生js 中的通过元素.style.样式名=’样式值’的方式操作元素样式,jQuery给我们封装了css()方法,便于操作样式,实际开发中样式选择器使用类选择器,所以jQuery针对于这一情况,给我们封装了addClass removeClass toggleClass 三个方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a{ width: 200px; height: 50px; background-color: #6495ED; } .b{ border: 10px solid green; border-radius: 20px; } </style> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function fun1(){ //获取样式 var width_value = $("#d1").css("width") console.log(width_value) var height_value = $("#d1").css("height") console.log(height_value) var bg_value = $("#d1").css("background-color") console.log(bg_value) //修改样式 $("#d1").css("width", '300px') $("#d1").css("height", '300px') $("#d1").css("background-color", 'yellow') } /* 在jQuery中，封装了操作class属性值的方法 */ function fun2(){ //给 $("#d2").addClass("b") } function fun3(){ $("#d2").removeClass("b") } function fun4(){ $("#d2").toggleClass("b") } </script> </head> <body> <div id="d1" class="a"> 风萧萧兮易水寒，壮士一去兮不复还 </div> <input type="button" value="修改css样式" onclick="fun1()"/> <hr > <div id="d2" class="a"> 复为慷慨羽声，士皆瞋目 </div> <input type="button" value="添加class属性值" onclick="fun2()"/> <input type="button" value="删除class属性值" onclick="fun3()"/> <input type="button" value="切换class属性值" onclick="fun4()"/> </body> </html>
二、jQuery操作元素文本和增删元素
操作文本
原生js 中的通过元素.innerText和innerHTML和.value属性操作标签内部文本和内容,jQuery给我们封装了text(),html()和val()三个方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ width: 200px; height: 100px; background-color: #6495ED; } </style> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function func1(){ //获取单标签的文本信息，其实就是获取value属性的值 var input_value = $("#i1").val() console.log(input_value) //获取双标签的文本信息 var div_text = $("#d1").text() console.log(div_text) //获取双标签中的文字和HTML标签信息 var div_html = $("#d1").html() console.log(div_html) } function func2(){ //修改文本信息 //修改单标签 $("#i1").val("小吴") //修改双标签 $("#d1").text("这是个普通的文本") //在上面双标签修改的时候text这是普通文本信息，如果修改后的内容有HTML标签是无法生效的 // $("#d1").html("<h1>这是个普通的文本</h1>") } function func3(){ //删除单标签文本信息 其实就是给value属性给一个控制 $("#i1").val("") //删除双标签文字信息 // $("#d1").text("") // $("#d1").html("") //.empty()也可以起到删除双标签文本信息的作用,情况内容 $("#d1").empty() } </script> </head> <body> <input type="text" value="请输入姓名" id='i1'/> <div id='d1'> 男 <span>难道还有第三性别</span> 女 </div> <input type="button" value="获取文字信息" onclick="func1()" /> <input type="button" value="修改文字信息" onclick="func2()" /> <input type="button" value="删除文字信息" onclick="func3()" /> </body> </html>
增删元素
原生js 中的对于元素的创建,增加和删除代码比较繁琐,而jQuery从元素的创建到元素的增加和删除都给我们提供了更加便捷的方法
- 创建元素
$('<span>text<span>')
- 追加元素
append() appendTo() 添加内部标签
before() insertBefore() 向前增加标签
after() insertAfter() 向后增加标签
- 删除元素
empty() 清空字标签
remove() 移除当前标签
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div01{ width: 300px; height: 200px; background-color: #6495ED; } </style> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function func1(){ //增加元素 var font_obj = $("<font>张无忌</font>") font_obj.css("size", '7') font_obj.css("color", 'brown') //指定添加带div元素 $("#div01").append(font_obj) } function func2(){ //AppendTo增加元素 var font_obj = $("<font>晓明</font>") font_obj.css("size", "5") font_obj.css("color", "red") font_obj.appendTo($("#div01")) } function func3(){ //在某个元素之前添加元素 var h_obj = $("<h1>人名字：</h1>") //指定新增 $("#div01").before(h_obj) } function func4(){ //在某个元素之前添加元素 var h_obj = $("<h1>人名字：</h1>") //指定新增 h_obj.insertBefore($("#div01")) } function func5(){ //在某个元素之前添加元素 var h_obj = $("<h1>人名字：</h1>") //指定新增 $("#div01").after(h_obj) } function func6(){ //在某个元素之前添加元素 var h_obj = $("<h1>人名字：</h1>") //指定新增 h_obj.insertAfter($("#div01")) } function func7(){ $("#div01").empty() } function func8(){ //删除元素本身 $("#div01").remove() } </script> </head> <body> <div id="div01"> </div> <hr > <input type="button" value="Append增加元素" onclick="func1()"/> <input type="button" value="AppendTo增加元素" onclick="func2()"/> <input type="button" value="before在某个元素之前增加元素" onclick="func3()"/> <input type="button" value="insertBefore在某个元素之前增加元素" onclick="func4()"/> <input type="button" value="after在某个元素之前增加元素" onclick="func5()"/> <input type="button" value="insertAfter在某个元素之前增加元素" onclick="func6()"/> <input type="button" value="empty删除某个元素里面的元素" onclick="func7()"/> <input type="button" value="remove删除元素本身" onclick="func8()"/> </body> </html>
三、jQuery绑定和触发事件
操作事件无非就是绑定事件,触发事件,解绑定事件.原生js中的通过DOM编程和在标签上的事件属性绑定事件,jQuery中,我们可以使用
- 事件的绑定:bind(),live()(1.8及之前可用),on()(1.9之后推荐使用),one()
- 事件解绑定:unbind()
- 事件的触发:行为触发, jQuery方法触发
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ width: 100px; height: 100px; background-color: #6495ED; } </style> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //添加事件 function fun1(){ //方式一：采用原生js的方式 /* var div_element = document.getElementById("d1") div_element.onmouseover=function(){ alert("哈哈，没想到吧！！！") } */ /*方式二：bind方式绑定事件 在jQuery中，事件的名称= 原始名称去掉on onlick click onmouserover mouseover */ // $("#d1").bind("mouseover", function(){ // //当鼠标移动上去的时候，改变颜色 // $("#d1").css('background-color', "red") // }) /* one 绑定一次事件 */ $("#d1").one("mouseover", function(){ //当鼠标移动上去的时候，改变颜色 $("#d1").css('background-color', "red") }) $("#d1").one("mouseleave", function(){ $("#d1").css("background-color","rosybrown") }) } function fun2(){ //解绑所有事件 //$("#d1").unbind() //指定解绑某个事件 $("#d1").unbind("mouseleave") } function fun3(){ $("#i1").focus() } </script> </head> <body> <div id="d1"> 小小黑 </div> <input type="button" value="添加事件" onclick="fun1()" /> <input type="button" value="解绑事件" onclick="fun2()" /> <br> <input type="text" id="i1"/> <input type="button" value="点击获取焦点" onclick="fun3()" /> </body> </html>
四、DOM对象和jQuery对象之间转换
使用原生JavaScript方式获得的页面结点对象简称为DOM对象，使用jQuery核心函数获得的对象我们可以简称为jQuery对象,这两种方式获得的对象即是是页面上同一个元素,那么也是不一样的,二者之间的API是不通用的.而在某些情况下,我们往往无法选择接收的对象,只能被动使用,那么这个时候我们可以让二者实现转换,以达到可以调用API实现功能的目的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //通过js获取dom对象 var f1_dom = document.getElementById("f1") console.log(f1_dom) //通过jQuery获取jQuery对象 var f1_jQuery = $("#f1") console.log(f1_jQuery) //将dom对象转换为jQuery对象，转换后就可以调用jQuery中的方法 var fj = $(f1_dom).text() console.log(fj) //将jQuery对象转换为dom对象 var fd = f1_jQuery.get(0).innerText //获取第0个 console.log(fd) //将jQuery对象转换为dom对象也可以这样写 var fd = f1_jQuery[0].innerText //取第0个 console.log(fd) }) </script> </head> <body> <font size="7" color="lightcoral" id="f1">且听风吟</font> </body> </html>
注意:
使用原生JavaScript中DOM对象转换成jQuery对象方式是$(dom对象)，jQuery对象转换成DOM对象的方式是jQuery对象[0]/.get(0)
五、jQuery迭代遍历方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //获取所有的li标签 var $li_list = $("li") //输出 // console.log($li_list) //方式一：采用for循环遍历 for(var i=0; i< $li_list.length;i++){ //输出每一个li标签，然后获得文本内容 //** 这里虽然是用的jQuery但是获取的DOM对象 console.log($li_list[i].innerText) } //方式二： for(var li in $li_list){ console.log($li_list[li].innerText) } //方式三：在jQuery中提供了更加方便的方法each $li_list.each(function(idx,element_obj){ //注意： //idx:指的下标索引 //element_obj：指的是取出的元素对象，但是注意这里是dom对象 console.log(idx) console.log(element_obj.innerText) //如果要使用jquery对象方法，则需要先转换在使用 console.log($(element_obj).text()) }) //上面的写法可以进行变形， $.each($li_list,function(idx,element_obj){ //注意： //idx:指的下标索引 //element_obj：指的是取出的元素对象，但是注意这里是dom对象 console.log(idx) console.log(element_obj.innerText) //如果要使用jquery对象方法，则需要先转换在使用 console.log($(element_obj).text()) }) }) </script> </head> <body> <h1>课程选择：</h1> <ul> <li>英语</li> <li>高数</li> <li>物理</li> <li>化学</li> <li>美术</li> </ul> </body> </html>
