jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器
1. 什么是jQuery以及学习的意义等
jQuery是一个js库
JS库是什么？
把常用的方法，进行封装，封装到一个单独的js文件当中，要用的时候直接调用。
学习jQuery主要学什么？
学习jQuery提供给我们的方法
2.jQuery的使用步骤
1）引入jQuery包
2）写进入口函数
入口函数的两种书写方式：
方式一： $(document).ready(function(){
});
方式二：
$(function(){
});
3)
写入需要实现的功能
例：
<script src="jquery-1.12.4.js"></script>//引入jQuary包 <script>
$(document).ready(function(){ //入口函数
$("#btn1").click(function(){//需要执行的功能
$("div").show(400,500);
});
$("#btn2").click(function(){
$("div").text("我是文字内容");
})
});
</script>
jQuery的版本
大版本：
1.x (1.1-1.12) ie 6/7/8 支持的
2.x (2.1-2.12) 不支持ie 678
3.x 不支持ie 678
小版本：
每个大版本又分两个小版本：
compressed(压缩版): 将变量名尽可能的变为单个字母，把注释和换行空格全部去掉用以减小体积
uncompressed(未压缩版): 注释全部保留，变量名尽可能的语义化
根据小版本体积大小不同，使用环境不同
项目上线，使用压缩版
开发过程当中使用未压缩版
扩展：
3.x之后的版本，出现一个 slim 版 削减版
移除了 effects ajax 模块
入口函数的注意事项
//1. 在使用jQuery之前未引包 $ is not defined
//2. 引包的顺序一定要注意，在使用之前引包 $ is not defined
//3. 引包的路径一定要写对！
$符号是什么
//$本质 就是一个函数,根据所给的参数不同 功能不同
//第一种用法：
//传入字符串css选择器
//功能：获取页面上的元素
//栗子：$("#id")
//语法：$(selector)
//第二种用法：
//传入DOM对象
//功能：把DOM对象转成jQuery对象
//栗子：$(document)
//语法：$(DOMObj)
//第三种用法：
//传入一个fucntion
//功能：入口函数
//$(function)
JQuery对象和DOM对象
<script>
$(document).ready(function(){
// dom对象通过js方法获取到的元素 就是DOM对象
var son1=document.getElementById("son1");
son1.style.backgroundColor="pink";
// son1.css("backgroundColor","green");//错误 dom也不能调用jauary方法
//jquary对象通过jQuery方法获取到的元素 就是jQuery对象
var $lis=$("li");
$lis.css("backgroundColor","green");
// $lis.style.backgroundColor="pink";//错误 jquary不能调用dom方法
});
</script>
jQuery和JavaScript
//jQuery对象其实就是DOM对象的包装集。
//dom对象以伪数组的形式存放在jQuery对象中
基本选择器（id选择器、类选择器、标签选择器、交集/并集选择器）
//基础选择器
//id选择器 $("#id")
//类选择器 $(".className")
//标签选择器 $("TagName")
//交集选择器 $(selector1selector2)
//并集选择器 $(selector1,selector2)
层级选择器（子代、后代）
//层级选择器
//后代选择器 $(selector1 selector2)
//子代选择器 $(selector1>selector2)
案例：
<script src="jquery-1.12.4.js"></script>
<script> $(function(){
// $(".hf,.wsy").css("backgroundColor","pink"); //并集选择器
// $("li.nj").css("backgroundColor","grey"); //交集选择器 // $("#dlt>li").css("backgroundColor","red"); //子代选择器
$("#dlt li").css("backgroundColor","blue"); //后代选择器
}); </script>
<ul id="sl">
<li>联合司令官</li>
</ul>
<ul id="dlt">
<li class="tz">李云龙</li>
<li>狙击手</li>
<li>士兵</li>
<ul class="fl">
<li>俘虏1</li>
<li>俘虏2</li>
<li>俘虏3</li>
</ul>
<li>士兵</li>
<li>士兵</li>
<li class="hf">伙夫</li>
<li class="wsy">卫生员</li>
</ul>
<ul id="tfe">
<li class="tz">楚云飞</li>
<li>狙击手</li>
<li>士兵</li>
<li class="nj">士兵</li>
<li>士兵</li>
<li class="hf">伙夫</li>
<li class="wsy">卫生员</li>
</ul>
<ul id="bx">
<li>百姓</li>
<li>百姓</li>
</ul>
过滤选择器（odd，even，eq）
<script>
$(document).ready(function () {
$("li:odd").css("backgroundColor","lightblue");//奇数过滤选择器
$("li:even").css("backgroundColor","red");//偶数过滤选择器
$("li:eq(5)").text("改变的文字");//序号过滤选择器
});
</script>
<body>
<ul>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ul>
筛选选择器(children(selector)、find(selector)、next()、siblings(selector)、parent()、eq(index))
$(this).children(selector)获取当前元素的子代标签
$(this).find(selector) //在当前元素的后代元素中寻找和selector对应的元素
$(this).next() //获取当前元素的下一个元素
$(this).siblings(selector) //获取当前元素的兄弟元素
$(this).parent() //获取当前元素的父级元素
$(this).eq(index)) //获取当前元素的索引位置
jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器的更多相关文章
- jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- python基础学习笔记——类空间问题以及类之间的关系
一. 类的空间问题 1.1 何处可以添加对象属性 class A: def __init__(self,name): self.name = name def func(self,sex): self ...
- jQuery学习笔记（在js中增加、删除及定位控件的操作）
代码内容很多都是从amazeui直接copy过来的,先声明,请不要说在下抄袭- - <!-------------------- HTML代码 ----------------------> ...
- python学习 day017打卡 类与类之间的关系
本节主要的内容: 1.依赖关系 2.关联关系,组合关系,聚合关系 3.继承关系,self到底是什么? 4.类中的特殊成员 一.类与类之间的依赖关系 在面向对象的世界中,类与类中存在以下关系: 1.依赖 ...
- jQuery 学习之路（1）：引子
一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...
- jQuery学习和知识点总结归纳
jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用.jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作.下面把PHP程 ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记（一）：入门【转】
由于工作的需要,发现JQuery是一个绕不开的东西,现在开始学习. 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用J ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
随机推荐
- 基于log4net的支持动态文件名、按日期和大小自动分割文件的日志组件
最近处理一个日志功能,用log4net的配置不能完全满足要求,所以在其基础上简单封装了一下,支持以下功能: 1 零配置 内置默认配置,引用dll后不需要添加或修改任何配置文件也可以使用 2 动态指定文 ...
- 第三周作业--Word Counter
需求分析: 1.写出一个程序,模仿wc.exe,通过输入文件名,实现文件内容读取: 2.统计出文件内容的总字符数.总单词数.行数.每行字符数.每行单词数. 代码分析: 一.打开文件. FILE *fp ...
- SpringMVC 表单复选框处理
<form action="" method="post"> <c:forEach items="${dblist}" v ...
- QPainter类的一些问题
QPainter painter1(this);//新建类 painter1.setRenderHint(QPainter::Antialiasing,true);//设置反锯齿 painter1.s ...
- mysql高性能索引策略
转载说明:http://www.nyankosama.com/2014/12/19/high-performance-index/ 1. 引言 随着互联网时代地到来,各种各样的基于互联网的应用和服务进 ...
- beautifulsoup小节
在beautifulsoup中,一个tag可能有很多个属性. tag <b class="boldest"> 有一个 “class” 的属性,值为 “boldest” ...
- REST 风格的api
REST即表述性状态传递,是设计风格不是标准.REST架构风格有以下6个约束: 1. 客户-服务器(Client-Server):通信只能由客户端单方面发起,表现为请求-响应形式. 2.无状态:通信的 ...
- hdu4578 Transformation
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4578 题目大意:n个数(初始为0)m个操作,操作类型有4种,操作1把区间的每个数+a,操作2把区间的每 ...
- 驱动开发学习笔记. 0.02 基于EASYARM-IMX283 烧写uboot和linux系统
驱动开发读书笔记. 0.02 基于EASYARM-IMX283 怎么烧写自己裁剪的linux内核?(非所有arm9通用) 手上有一块tq2440,但是不知道什么原因,没有办法烧boot进norflas ...
- 使用新浪云 Java 环境搭建一个简单的微信处理后台
前一段时间,写了一篇在新浪云上搭建自己的网站的教程,通过简单构建了一个 maven 的项目,展示部署的整个流程,具体的操作可以参看这里. 新浪云服务器除了可以搭建自己的网站以外,也非常的适合作为微信公 ...