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()写的是键值对
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
Jquery 使用和Jquery选择器的更多相关文章
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器
1. 什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- 【学习笔记】锋利的jQuery（一）选择器
一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...
- 汇总jQuery的61种选择器及示例
汇总jQuery的61种选择器及示例 恋痿喃 ㄍń稀广 因罘乐睽 ú燔蒇 骤幄觳 ч豹 齑骝氮铷 宅廓Ω孓 锏遒 荛猩ㄜ彬 芡钷ж ┊贩错鹌 掩饰着可还是几步就窜到了门口看着这个让她 ...
- jQuery（2）——选择器
选择器 利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为.jQuery的行为规则都必须在获取到元素后才能生效. [jQuery选择器的优势] (1)简洁的写法 ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- （jQuery知识点整理-含有选择器）
第一单元 jQuery介绍: javaScript ...
随机推荐
- [Swift]LeetCode529. 扫雷游戏 | Minesweeper
Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix representin ...
- [Swift]LeetCode1026. 节点与其祖先之间的最大差值 | Maximum Difference Between Node and Ancestor
Given the root of a binary tree, find the maximum value V for which there exists different nodes A a ...
- [Abp 源码分析]十四、DTO 自动验证
0.简介 在平时开发 API 接口的时候需要对前端传入的参数进行校验之后才能进入业务逻辑进行处理,否则一旦前端传入一些非法/无效数据到 API 当中,轻则导致程序报错,重则导致整个业务流程出现问题. ...
- solr之环境配置四
Solr链接数据库(mysql,mssql) 一.链接mysql 1.使用DataImportHandler导入并索引数据,配置 $SOLR_HOME\core0\conf\solrconfig.xm ...
- SpringCloud Ribbon的分析
Spring Cloud Ribbon主要用于客户端的负载均衡.最基本的用法便是使用RestTemplate进行动态的负载均衡.我们只需要加入如下的配置便能完成客户端的负载均衡. @Configura ...
- synchronized底层实现学习
上文我们总结了 synchronized 关键字的基本用法以及作用,并未涉及 synchronized 底层是如何实现的,所谓刨根问底,本文我们就开始 synchronized 原理的探索之旅吧(*& ...
- RabbitMQ消息队列（六）-消息任务分发与消息ACK确认机制（.Net Core版）
在前面一章介绍了在.Net Core中如何使用RabbitMQ,至此入门的的部分就完成了,我们内心中一定还有很多疑问:如果多个消费者消费同一个队列怎么办?如果这几个消费者分任务的权重不同怎么办?怎么把 ...
- C++STL模板库适配器之queue队列
目录 适配器之队列 一丶队列简介 二丶队列(queue)代码操作 1.常用方法 适配器之队列 一丶队列简介 队列是先进先出的数据结构. 在STL中使用 queue表示. 底层使用的是序列容器deque ...
- java集合框架容器 java框架层级 继承图结构 集合框架的抽象类 集合框架主要实现类
本文关键词: java集合框架 框架设计理念 容器 继承层级结构 继承图 集合框架中的抽象类 主要的实现类 实现类特性 集合框架分类 集合框架并发包 并发实现类 什么是容器? 由一个或多个确 ...
- .Net语言 APP开发平台——Smobiler学习日志：如何快速实现手机上的资源上传功能
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的“Smobil ...