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选择器的更多相关文章

  1. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  2. python基础学习笔记——类空间问题以及类之间的关系

    一. 类的空间问题 1.1 何处可以添加对象属性 class A: def __init__(self,name): self.name = name def func(self,sex): self ...

  3. jQuery学习笔记(在js中增加、删除及定位控件的操作)

    代码内容很多都是从amazeui直接copy过来的,先声明,请不要说在下抄袭- - <!-------------------- HTML代码 ----------------------> ...

  4. python学习 day017打卡 类与类之间的关系

    本节主要的内容: 1.依赖关系 2.关联关系,组合关系,聚合关系 3.继承关系,self到底是什么? 4.类中的特殊成员 一.类与类之间的依赖关系 在面向对象的世界中,类与类中存在以下关系: 1.依赖 ...

  5. jQuery 学习之路(1):引子

    一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...

  6. jQuery学习和知识点总结归纳

    jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用.jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作.下面把PHP程 ...

  7. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  8. jQuery学习笔记(一):入门【转】

    由于工作的需要,发现JQuery是一个绕不开的东西,现在开始学习. 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用J ...

  9. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

随机推荐

  1. $(document).ready()方法的使用

    之前看了,锋利的jquery这本书.开始了对jquery的学习.很多东西还是不能应用自如,并没有把jquery变成自己的东西.某日程序突然失效,是单击行的时候取属性,但是不知道为什么,取不到值.$(t ...

  2. [转]Android音频底层调试-基于tinyalsa

    http://blog.csdn.net/kangear/article/details/38139669 [-] 编译tinyalsa配套工具 查看当前系统的声卡 tinymix查看混响器 使用ti ...

  3. 使用Linux碎解一

    一.安装VMwarestation. 二.安装Linux系统(这里是CentOS7) 步骤: #==========================part1===================== ...

  4. CentOS7安装问题及解决方案记录

    CentOS7系统已安装好: 一.我想要实现系统桌面化. 需要运行 yum 命令. 出现第一个error: 1.提示错误:can not find a valid baseurl 86_X64.... ...

  5. 循序渐进Python3(八) -- 0 -- 初识socket

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...

  6. 单位换算(格式化十进制数-B),获取时间工具类CommenUtil

    package com.example.administrator.filemanager.utils;import java.text.DecimalFormat;import java.text. ...

  7. Android Runtime

    [Android Runtime] Every Android application runs in its own process, with its own instance of the Da ...

  8. 分享一个Object.defineProperties 定义一个在原对象可读可写的方法

    function A(){ this.name = 'hellow word'; } Object.defineProperties( A.prototype,{ doSomething2 : { v ...

  9. fiddler 配置

    fiddler 是一个抓包工具: 配置模拟器:(逍遥游安卓模拟器) 逍遥参考:http://www.xyaz.cn/thread-163-1-1.html 1.启动模拟器后,点击设置,点击进入Wi-F ...

  10. oracle 学习笔记2

    1.oracle 中rowid和rownum的区别 oracle 数据库中,每一行都有一个唯一行的标识符,ROWID,数据库内部用来存储行的物理位置.ROWID是一个18位数字,采用base-64编码 ...