Jquery 使用和Jquery选择器
jquery中的*对象($)
jquery 中最常用的对象即 $ 对象,要想使用 jquery 的方法必须通过 $ 对象。只有将普通的 dom 对象封装成 jquery 对象,然后才能调用 jquery 中的各种方法。 $ 是 jquery 简写,在代码中可以使用 jquery 代替$ $ ,但一般为了方便大家都直接使用 $。
例如;
通过和javascript对比
//window.onload=function(){} 页面中只能存在一个 window.onload=function () { console.log(" 页面完全加载后才触发该事件"); }; //$(document).ready(function(){}); 可以存在多个 $(docelem).ready(function () { console.log("1"); }); //$(document).ready(function(){}); 只要 dom 元素加载完就触发 $(docelem).ready(function () { console.log("2"); });
// 想在 jquery 中实现 window.onload $(window).load(function () { alert(" 哈哈1"); }); $(window).load(function () { alert(" 哈哈2"); }); // 速度明显比 window.onload 快 $(document).ready(function () { alert(" 嘎嘎"); });
window.onload只能写一次,重复会被后面的干掉页面所有的标签,图片,外部引入加载后才触发$(document).ready()dom基本标签加载后就触发可以写多个$(document).ready()和$(function)一样
jquery对象和dom对象互转
dom对象转jquery对象操作方便,毕竟jquery中方法都是封装好了的,而且兼容问题解决的很好,代码少,方便.jquery对象转dom对象,因为jquery中文件一直在更新,很多东西都是随着使用而进行封装和升级,不太可能把所有dom中用到的进行封装,还有很多未知的兼容问题没有封装进去,所以,有的时候jquery中不能解决的问题,还需要原生的js代码来解决,所以,jquery对象有的时候需要转成dom对象来进行操作。
1.dom对象转成jquery对象,加$就可以了
例如:
/*取得<input>标签中的value属性的内容[dom对象->jquery对象] var inputelement = document.getelementbyid("inputid");//dom对象 var $input = $(inputelement);//jquery对象 var value = $input.val(); alert(value); */
2.jquery对象转dom对象
例如:
/*取得<div>标签中的文本内容[jquery对象->dom对象,方法一] var $div = $("#divid");//jquery对象 var divelement = $div[0];//dom对象 var html = divelement.innerhtml; alert(html); */ //取得<div>标签中的文本内容[jquery对象->dom对象,方法二] var $div = $("#divid");//jquery对象 var divelement = $div.get(0);//dom对象 var html = divelement.html(); alert(html);
注意:jquery 对象不能直接调用 dom 中对象的属性或者是方法,反之一样
例如:
$(function () { var dv1 = $("#dv");// 由 jquery 对象转成了 dom 对象 var dv2 = document.getelementbyid("dv");// 对象 // 必然报错 , 为什么 ? 因为 jquery 对象不能直接调用 dom 中对象的属性或者是方法 dv1.innerhtml = "<p> 哈哈</p>"; // 同理 , 下面这行代码必然报错 , 为什么呢 ? 因为 dom 对象是不能直接调用 jquery 对象的方法的 dv2.html("<p> 哈哈</p>"); });
jquery案例
网页开关灯,点击按钮实现网页开关灯效果(通过和javascript对比)
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../jquery-1.12.2.js"></script> </head> <body> <input type="button" value="关灯" id="btn"> <script> //javascript /*window.onload = function(){ document.getelementbyid('btn').onclick = function(){ if(this.value == '关灯'){ document.body.style.backgroundcolor = 'black'; this.value = '开灯'; }else{ document.body.style.backgroundcolor = 'white'; this.value = '关灯'; } }; };*/ //jquery $(function(){ $('#btn').click(function(){ if($(this).val()=='关灯'){ $('body').css('background-color','black'); $(this).val('开灯'); }else{ $('body').css('background-color','white'); $(this).val('关灯'); } }); }) </script> </body> </html>
jquery选择器
1.jquery 选择器 实现了从css1 到css3 的所有选择器
2.jquery和js设置css属性的不同:
jquery: $(#id").css('background',"red") js: dom.style.backgroundcolor="red'
3.$(“#demo”): 选择 id为demo的第一个元素 (id选择器)
$("#demo").css('background','black") //有多个只选择第一个
4.$(“.item”) : 选择所有class为item的元素 (类选择器)
$(".item").css('background','black")
5.$(‘div’) : 选择所有标签为div的元素 (标签选择器)
$('div') .css('background','black")
6.$(“*”) : 选择所有的元素,配合其他选择器来使用
$("*").css('background','black")
7.$(‘.item,div’) : 选择多个指定的选择器,这里是指item和div元素
$('.item,div') .css('background','black")
8.层级选择器
(1)后代选择器
$(“#dv li”)或者$(“ul li”)或者$(“.cls li”)
(2)子代选择器(直接的所有子元素,儿子)
$(“#ul>li”)或者$(“div >span”)或者$(“.cls >li”)
(3)获取当前元素的相邻元素:
$(“div + span”)
(4)获取当前元素后面所有元素
$(“div ~ span”)
9.索引选择器
eq(3) 获取索引的元素
gt(3) 索引大于3 的所有元素
lt(3) 索引小于3 的所有的元素
$("#u1 li:eq(7)").css("backgroundcolor","red"); $("#u1 li:gt(7)").css("backgroundcolor","green"); $("#u1 li:lt(5)").css("backgroundcolor","black");
规律:jquery完全是结合了css获取class的模式来操作dom
$(selector).css('background','black")
jquery几个常见的方法(更多方法参考离线手册,地址:链接:https://pan.baidu.com/s/1ihrt7l68f_cgcqmdhm-nmw 提取码:0ue5 )
1. .html() 方法,设置标签中间显示其他标签及内容,类似于innerhtml
2. .text() 方法,设置标签中间显示的文本内容,类似于innertext
3. .val() 方法.设置input标签中value的值,类似于value
4. .css() 方法,.设置元素的样式,类似于style
注意::
()中写字符串,一个参数,就是要设置的值,什么也不写,返回的是这个属性的值
.css()写的是键值对
特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢
上一篇: 如何在Mac上保存整个网页
下一篇: 设计模式-工厂模式