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()写的是键值对

特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢

Jquery 使用和Jquery选择器的更多相关文章

  1. jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  3. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

  4. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  5. 【学习笔记】锋利的jQuery(一)选择器

    一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...

  6. 汇总jQuery的61种选择器及示例

    汇总jQuery的61种选择器及示例 恋痿喃 ㄍń稀广 因罘乐睽 ú燔蒇 骤幄觳 ч豹 齑骝氮铷 宅廓Ω孓 锏遒 荛猩ㄜ彬 芡钷ж ┊贩错鹌 掩饰着可还是几步就窜到了门口看着这个让她 ...

  7. jQuery(2)——选择器

    选择器 利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为.jQuery的行为规则都必须在获取到元素后才能生效. [jQuery选择器的优势] (1)简洁的写法 ...

  8. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  9. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  10. (jQuery知识点整理-含有选择器)

                                       第一单元                                       jQuery介绍:   javaScript ...

随机推荐

  1. 分门别类总结Java中的各种锁,让你彻底记住

    概念 公平锁/非公平锁 公平锁是指多个线程按照申请锁的顺序来获取锁. 非公平锁是指多个线程获取锁的顺序并不是按照申请锁的顺序,有可能后申请的线程比先申请的线程优先获取锁.有可能,会造成优先级反转或者饥 ...

  2. 仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]

    本文为原创分享,转载请注明出处. 1.引言 即时通讯IM应用中的聊天消息时间显示是个再常见不过的需求,现在都讲究用户体验,所以时间显示再也不能像传统软件一样简单粗地暴显示成“年/月/日 时:分:秒”这 ...

  3. Mysql优化之索引和字段

    Mysql优化是一个老生常谈的问题, 优化的方向也优化很多:从架构层;从设计层;从存储层;从SQL语句层; 今天讲解一下从索引和字段: 字段优化: ①  尽量使用TINYINT.SMALLINT.ME ...

  4. Cassandra与Mongo的事务实现之分布式协议

    摘要 NoSql不同于关系型数据库,是分布式存储,因此想要实现关系型数据库中的事务就不是那么简单了.本文结合Cassandra中的paxos和Mongo的two phase commit来谈谈Nosq ...

  5. Python内置函数(13)——complex

    英文文档: class complex([real[, imag]]) Return a complex number with the value real + imag*1j or convert ...

  6. EF下lambda与linq查询&&扩展方法

    1. linq查询数据 WebTestDBEntities db = new WebTestDBEntities(); 1.1 linq查询所有列数据 var userInfoList = from ...

  7. bind(),unbind(),hover(),toggle(),animate()

    First.bind() bind(Type,fn) type:click/mouseover/mouseout fn:functionsecond.unbind() unbind(Type,fn) ...

  8. SpringBoot入门教程(三)通过properties实现多个数据库环境自动切换配置

    前面的文章已经介绍了CentOS部署SpringBoot项目从0到1的详细过程,包括Linux安装ftp.Tomcat以及Java jdk的全部过程.这篇文章主要介绍关于springboot如何通过多 ...

  9. 初学Java Web(5)——cookie-session学习

    HTTP 协议 Web 浏览器与 Web 服务器之间的一问一答的交互过程必须遵守一定的规则,这样的规则就是 HTTP 协议. HTTP 是 hypertext transfer protocol(超文 ...

  10. SmartSql For Asp.Net Core 最佳实践

    常规操作 安装 SmartSql Install-Package SmartSql 安装 SmartSql.DIExtension Install-Package SmartSql.DIExtensi ...