jQuery基础内容

原创 2018年04月16日 21:15:18
jQuery:
jquery: js的库,比js写得少,做的多
jquery使用: 1、下载库文件 http://www.jq22.com/jquery-info122
版本选择: 2.0版本以上没有做ie6-8的兼容性处理,一般选用1.8-1.11版本
2、通过cdn加速服务器直接引入线上的jquery库
jquery对象和DOM对象的区别和相互转换的方式:
jquery对象不能直接使用DOM对象的属性和方法
DOM对象也不能直接使用jquery的属性和方法
jquery对象转换成DOM对象: $('#box')[0] $('#box').get(0)
DOM对象转换成jquery对象: $(DOM对象)
文档就绪事件: 1、js的文档就绪事件 window.onload = function(){ }
等待DOM结构以及页面的资源加载完才会触发
2、jquery的文档就绪事件 $(document).ready(function(){ }) DOM结构加载完就触发
简写:$(function(){})
jquery基本语法:$(选择器).action().action();


常用效果: show() 显示
hide() 隐藏
toggle() 切换显示隐藏

slideDown(time) 展开
slideUp(time) 收起
slideToggle(time) 切换展开收起

fadeIn(time) 淡入
fadeOut(time) 淡出
fadeToggle(time) 切换淡入淡出

fadeTo(time,0.6) 指定透明度达到某个值就停止

animate({属性},time) 自定义动画
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
css属性值逐渐变换,color不可用
delay(1000) 动画延迟执行
stop() 停止动画,停留在当前状态
finish() 立刻完成动画,停留在最终状态

元素遍历
祖先
parent() 父元素
parents() 获取所有祖先元素 parents(选择器) 在所有祖先元素中筛选符合指定选择器的元素
parentsUntil(选择器) 获取祖先元素直到一个指定的元素(不包括)为止
后代
children() 获取所有子代元素 children(选择器) 在所有子代元素中筛选符合指定选择器的元素
find(选择器) 必须指定查找的选择器,在所有后代中获取指定元素
同胞
prev() 上一个兄弟
prevAll() 获取所有哥哥 prevAll(选择器) 在所有哥哥元素中筛选符合指定选择器的元素
prevUntil(选择器) 获取哥哥直到一个指定的元素(不包括)为止

next() 下一个兄弟
nextAll() 获取所有弟弟 nextAll(选择器) 在所有弟弟元素中筛选符合指定选择器的元素
nextUntil(选择器) 获取弟弟直到一个指定的元素(不包括)为止
siblings() 所有的同胞(不包括自己)

筛选
eq(index) 获取集合中指定索引的一项
first() 集合中的第一个
last() 集合中的最后一个
filter(选择器) 在集合中筛选符合指定选择器的元素
not(选择器) 在集合中排除符合指定选择器的元素
has(选择器) 在集合中筛选后代中含有指定选择器的元素的元素

attr(); 设置或获取元素属性(标签属性) setAttribute('flag',1); getAttribute('flag');
prop(); 获取或设置DOM对象属性
addClass(); 添加类
removeClass(); 移除类
toggleClass(); 切换类

html() 相当于innerHTML属性
text() 相当于innerText属性
val() 获取或设置表单元素的value属性

css() 设置或获取css样式
可以设置一组或多组属性 css('attrName',val); css({ attr1:val,attr2,val })
获取样式 css('attrName');
index() $(选择器).index() 获取指定元素在同级元素中的索引
$(选择器).index($(选择器)) 获取指定元素在指定集合中的索引

web前端jQuery基础

本套课程适用于前端基础小白学习
  • 2018年01月30日 11:36

JQuery笔记——关于Rebecca Murphey所著《jQuery基础》(jQuery Fundamentals)

【目录】  一、选择网页元素  二、改变结果集  三、链式操作  四、元素的操作:取值和赋值  五、元素的操作:移动  六、元素的操作:复制、删除和创建  七、工具方法  八、事件操作  九、特殊效果...
  • Illusion_1202
  • Illusion_1202
  • 2016-07-04 16:03:25
  • 1001

JQuery基础内容

* DOM对象和jQuery对象 * DOM对象:通过DOM解析HTML页面元素,所得到的DOM元素 * jQuery对象(底层还是DOM对象):通过jQuery包装DOM对象后产生的对象 * ...
  • qq_34416191
  • qq_34416191
  • 2016-09-02 16:17:00
  • 62

JS+JQuery+CSS基础笔记

  • 2014年04月15日 15:42
  • 257KB
  • 下载

JQuery基础.pdf

  • 2011年10月29日 00:17
  • 416KB
  • 下载

jQuery基础总结(一)

 一、什么是jQuery                      1、jQuery是由John Resig创建于2006年1月。               2、jQuery是继proto...
  • nishiwodeyan_1
  • nishiwodeyan_1
  • 2016-09-18 11:28:16
  • 87

jQuery和AJAX基础

jQuery和AJAX基础 jQuery 基础: 1.jQuery 选择器:   元素选择器:$("p"); #id 选择器:$("#test"); .class 选择器:$(".test");...
  • zhangwenxatu
  • zhangwenxatu
  • 2017-03-19 16:49:52
  • 295

Jquery基础DOM和css操作

Jquery 第 5 章 章  基础 DOM 和 和 CSS  操作 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM ...
  • lcn_Lynn
  • lcn_Lynn
  • 2017-09-03 11:54:44
  • 276

JQuery 快速入门

  • 2013年03月01日 15:48
  • 77KB
  • 下载

jquery课件

  • 2014年08月26日 07:02
  • 5.22MB
  • 下载
收藏助手
不良信息举报
您举报文章:jQuery基础内容
举报原因:
原因补充:

(最多只允许输入30个字)