jQuery
jQuery是一个快速,小巧,功能丰富的javascript库,可以通过jQuery来更加方便处理HTML document操作,事件绑定,实现动态效果。
jQuery文档很全面,想详细,提供很多成熟插件。
jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果对象是jQuery对象,它就可以使用jQuery方法
获取JQuery对象,实现需要引入jQuery库文件,在变量前加$就能获取
jQuery引入
jQuery引入方式有两种方式,
- 事先下载jquery库,下载本地后在引入:
<script scr="jquery-3.3.1.js"></script>
- 直接使用CDN方式:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
jQuery示例
1 | jQuery和javascript操作DOM对象: |
jQuery查询元素
选择器
1 | $("*") 查找所有 |
层级选择器
1 | $(".outer div") 后代div标签 |
属性选择器
1 | $('[id="div1"]') id为idv1的选择 |
表单选择器
1 | $("[type='text’]") ---->(":text") |
jQuery筛选元素
过滤筛选器
1 | $("li:first") 获取li标签第一个 |
查找筛选器
1 | $("div").children("test") 查找子代 |
jQuery操作元素
操作属性
1 | $("div").attr("con"); 取值,返回值,或者设值 |
class类操作
1 | $("").addClass(class|fn) 增加class |
html/文本/值操作
1 | $("").html([val|fn]) 获取html文档 |
css操作
1 | $("").css("color","red") |
jQuery其他操作
位置
1 | $("").offset([coordinates]) 偏移量,根据视口的偏移量 |
尺寸
1 | $("").height([val|fn]) 内容高度 |
jQuery文档处理
创建标签对象
1 | $('<p>') |
内部插入
1 | $("").append(content|fn) 示例:$("p").append("<b>hello</b>") 在p标签内后添加hello |
外部添加
1 | $("").after(content|fn) 示例:$("p").after("<b>hello</b>") #在<p>标签之后添加 |
替换,删除,复制
1 | 替换 |
jQuery事件
事件绑定
1 | $("").bind('click',function(){ |
解除绑定
1 | $("").unbind('click') |
事件委托
1 | $("").on(env,selector,function(){ |
回调函数
1 | 实例: |
页面载入
1 | $(document).ready(function(){ |
jQuery动画效果
显示,隐藏,切换
1 | 显示 |
上,下,切换滑动
1 | $("").slideUp() |
淡入,淡出,切换
1 | $("").fadeIn() |
jQuery插件
1 | <script> |
jQuery Ajax
在JavaScript可以通过XMLHttpRequest 对象来处理与后端服务器异步请求,在jQuery也有自己的Ajax方法
1 | <!--示例--> |