初识JQuery

初识JQuery
JQuery是js的一个库!封装好的一个库!它就是类似于java中的一个jar包。
jQuery是最具代表性的一个库,它是划时代的产品。
1.了解jQuery
核心理念:write less,do more
只要js能做的,它都能做,大大简化了开发代码。
1.强大的选择器,还单独定制了一套高级选择器。
2.出色的DOM封装
简化且封装了大量的DOM操作。
3.可靠的事件处理机制
Jq把所有事件都封装了一个个的单独函数。

4.浏览器的兼容性好
jQ封装过程中处理了兼容性问题。JQ2.0以前的版本 兼容IE6 7 8
5.隐士迭代
很多选择器在使用时无感知的进行了一系列的迭代(遍历)处理。
6.丰富的插件支持
Jq插件非常丰富,因为jq大大简化了开发,所以很多开发人员也乐意使用jq取开发一些js插件。
7.对AJAX做了大量封装
一种一步无刷新的请求技术。
2.掌握jQuery的环境搭建和使用
1.环境搭建
·下载jq(可以从jq官网,jq插件库网,GitHub)
版本选择:1.12,4或者1.8.3它们兼容IE6/7/8
每个版本都会有两种文件选择:开发版(可以直接看到原编码,方便调试),发布版(压缩后文件体积比较小,加载速度快)。
在这里插入图片描述
2.2原生js的页面加载函数和JQ的页面加载函数的区别
在这里插入图片描述
2.3 jq的语法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.4jQ的基本页面操作函数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.5 jQ的链式操作
对一个对象进行多重操作,并将操作结果返回给对象。
2.6 jQ和DOM对象的转换
jQ的函数和DOM的函数属性等都是独立的,不可通用,所以有些时候我们需要进行转换,才能使用对应的一些函数。(忘记了一些)函数但记得另一个的函数(使用)
在这里插入图片描述
在这里插入图片描述
3.掌握jQuery的常用选择器
1.基本选择器
在这里插入图片描述 1.点击dt的时候,利用标签选择器将两个

的内容显示
$(“dt”).click(function(){
// jQ有隐式迭代
$(“dd”).show();
});

2.利用标签选择器,将

元素的字体颜色设置为蓝色
$(“h1”).css(“color”,“blue”);

3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px
$(".price").css({
“background”:"#efefef",
“padding”:“5px”
});

4.利用id选择器将id名为author的字体颜色设置为#083499
$("#author").css(“color”,"#083499");

5.利用并集选择器 将类名为intro和标签

的字体颜色设置为#ff0000
$(".intro,dd,dt").css(“color”,"#ff0000");

6.使用全局选择器将所有字体粗细设置为加粗
$("*").css(“font-weight”,“bold”);

2.层次选择器
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190624173120318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFzdHVkZW50aGhoaw==,size_16,color_FFFFFF,t_70)
3.属性选择器
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190624173128551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFzdHVkZW50aGhoaw==,size_16,color_FFFFFF,t_70)
4.过滤选择器
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190624173137533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFzdHVkZW50aGhoaw==,size_16,color_FFFFFF,t_70)
5.可见性过滤选择器
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190624173146130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFzdHVkZW50aGhoaw==,size_16,color_FFFFFF,t_70)










  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值