什么是jQuery,jQuery的特点。
什么是jQuery
流行的JavaScript库
简化JavaScript的开发,一些JavaScript库就诞生了,JavaScript库封装了很多预定义的对象和使用函数,能帮助使用者建立高难度交互的web2.0特性的富客户端页面,并且兼容各大浏览器,jQuery 极大地简化了 JavaScript 编程。
JQuery特点
轻量级:封装后的库不到100k下载快
强大的选择器:快速查找Dom元素
隐式遍历(迭代):一次操作多个元素
读写和一读数据/写数据用的是同一个函数
链式调用
事件处理
Dom操作
样式操作
动画
浏览器兼容
丰富的插件支持
jQuery的下载
访问jquery官网 来进行对jquery文件复制 再编辑器中新建一个js文件粘贴进去
jQuery官网:jQuery
jQuery的引入使用
jQuery的三种使用方法
<script>//相当于Jquery//第一种写法$(document).ready(function(){})//第二种写法$().ready(function(){})//第三种写法$(function(){//编写功能代码实现})
</script>
$符即jquery
在head标签中使用<script src="XXXX"></script>进行引入,src为文件路径,这个script标签中不能写js代码 不能写js代码 不能写js代码
js代码应在一个新的script标签中写
jQuery入口函数
jquery代码执行时不需要等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jquery已经做好了封装,不同于原生jsload事件:等页面文件、外部的js文件、css文件,图片等加载完毕才执行内部代码
//第一种写法
$(document).ready(function(){})
//第二种写法
$().ready(function(){})
//第三种写法
$(function(){})
将Dom对象转换为jQuery对象
jQuery对象与Dom对象转换
//获取dom元素
var div0 = docuement.querySelectorAll("div")
//获取jquery对象
var div1 = $("div")
//Dom对象转换为jquery对象
$(div0)
//jquery对象转换为Dom对象
//第一种
var div1 = $(div1[0])
//第二种
var div1 = $(div1.get(0))
jQuery基本选择器
id选择器:$("#id") 获取指定id元素
类选择器:$(".className") 获取所有类名相同元素
标签选择器:$("div") 获取所有div元素
并集选择器:$("div,p") 获取所有div元素和p元素
交集选择器:$("div.blue") 获取class为blue的div元素
层次选择器
子代选择器:$("ul>li") 仅包括子级li标签
后代选择器:$("ul li") 包括ul下的所有li标签
属性选择器
基本属性选择器
$("input[checked]") 获取checked选中的标签
$("input[name='username']") 获取input的name属性等于username的标签
$("input[name!='username']") 获取input的name属性不包含username的标签
$("div[class^='b']") 获取类名以b开始的标签
$("div[class*='z']") 获取类名包含z的标签
操作标签的属性
标签属性方法 attr(name)/attr(name,value) 读/写非布尔值的标签属性
标签属性方法 prop(name)/prop(name,value) 读/写布尔值的标签属性
删除属性方法 removeAttr(name)/removeProp(name) 删除指定名字属性
自定义属性方法 data() 读写标签的附加数据(data-*属性)
过滤选择器
div:eq(index) 获取索引为index的元素
div:odd 获取索引为奇数的元素
div:even 获取索引为偶数的元素
div:first 获取第一个元素
div:last 获取最后一个元素
div:gt(index) 获取索引大于index的元素
div:lt(index) 获取索引小于index的元素
div:not(selector) 去除某一个元素
筛选选择器
:contains('12') 如果元素中有某个内容则获取该元素
:has('p') 如果元素中有某个标签时则获取该元素
:empty 获取空元素或者不包含子元素的标签
:parent 获取含有子元素或文本的标签
筛选选择器(方法)
方法 | 使用 | 描述 |
---|---|---|
children(selector) | $("ul").children("li") | 相当于$("ul>li"),子类选择器 |
find(selector) | $("ul").find("li") | 相当于$("ul li"),后代选择器 |
siblings(selector) | $("#first").siblings("li") | 获取兄弟节点,不包括本身 |
parent() | $("#first").parent() | 查找父亲元素 |
eq(index) | $("li").eq(2) | 查找索引为2的li元素 |
next() | $("li").next() | 下一个兄弟 |
prev() | $("li").prev() | 上一个兄弟 |
CSS多个样式设置
<script>$(function(){//第一种$("div").click(function(){$(this).css({"color":"red","font-size":"20px"})//第二种$(this).css("color","red").css("font-size","20px")})})</script>
什么是jQuery,jQuery的特点。相关推荐
- jquery jQuery的入口函数 $函数 dom对象和jquery对象
文章目录 jquery jQuery的入口函数 $函数 dom对象和jquery对象 jQuery的入口函数 视频 代码 $函数 视频 代码 dom对象和jquery对象 视频 代码 jquery j ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- JQuery + jquery插件
免费开源的纯Html, JQuery + jquery插件 http://wijmo.com/ 转载于:https://www.cnblogs.com/Rising/archive/2010/12/1 ...
- [jQuery] jQuery中如何将数组转化为json字符串,然后再转化回来?
[jQuery] jQuery中如何将数组转化为json字符串,然后再转化回来? var typeOf = obj => Object.prototype.toString.call(obj); ...
- [jQuery] jQuery UI怎样自定义组件?
[jQuery] jQuery UI怎样自定义组件? 又是第一次,现在的感受是jQueryUI Widget能让你代码组织得更好,风格更一致. 如何开始使用首先用$.widget()方法开始定义你的组 ...
- [jQuery] jQuery和Zepto的区别?各自的使用场景?
[jQuery] jQuery和Zepto的区别?各自的使用场景? 创建$的方式不同.前者略微要大,后者略微小点.场景....emmmm 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
- [jQuery] jQuery与jQuery UI有啥区别?
[jQuery] jQuery与jQuery UI有啥区别? 1)jQuery是一个js库,主要提供的功能是选择器.属性修改和事件绑定等 2)jQuery UI则是在jQuery的基础上,利用jQue ...
- [jQuery] jQuery是通过哪个方法和Sizzle选择器结合的?
[jQuery] jQuery是通过哪个方法和Sizzle选择器结合的? 通过创建一个div元素,检测被传入的fn是否被当前浏览器支bai持 function assert( fn ) { var d ...
- [jQuery] jQuery的队列是如何实现的?队列可以用在哪些地方?
[jQuery] jQuery的队列是如何实现的?队列可以用在哪些地方? 一.队列是什么?队列是一种数据结构,跟生活中的排队是一样的,符合先进先出,后进后出的原则即:对一个数组做一些限制:1.只允许在 ...
- [jQuery] jquery.extend与jquery.fn.extend的区别?
[jQuery] jquery.extend与jquery.fn.extend的区别? 1.认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中,exte ...
最新文章
- 牛津大学计算机系主任:人工智能立法重在抓机遇、防危害
- 轻量级UIImageView分类缓存 库 AsyncImageView 使用
- STOMP协议规范--转载
- springboot学习笔记(二)
- 投票选举c语言程序,C语言元旦礼物:经典入门问题分析——选举投票
- HDU - 7072 Boring data structure problem 双端队列 + 思维
- Spring构造函数注入和参数名称
- QT信号与槽-启动系统程序以及相关控件介绍
- Leetcode 303.区域和检索 - 数组不可变
- 区分const,static,readonly,volatile四个关键字
- mysql索引简单介绍
- P2P协议:我下小电影,99%急死你
- 如何通过 SSH 连接到 Docker 容器
- Win10系统怎样让打开图片方式为照片查看器
- 李春葆《数据结构》第五版
- 《Android开源库》 Google 最新Hover Menu(悬浮菜单)
- java阿波罗入门介绍_十分钟入门Apollo
- 深入理解Java虚拟机——魔数与Class文件的版本
- 桌面快递查询物流信息查看神器
- Zotero配合坚果云Web DAV同步那些坑