这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战
什么是jquery?
jquery简介
jquery是JavaScript的一个库 jquery 极大的简化了JavaScript的编程
为什么使用jQuery而不用js?
做的多,写的少,兼容性比较大 事件的处理机制,完善的ajax
目前其他的JavaScript库
prototype dojo dwr
jquery 写的语法
方式一
方式二
jquery 和 JavaScript区别
jQuery的简单练习
jQuery 选择器
1 元素选择器
("元素名")
2 ,id 选择器
$("#id的名字")
3,class 选择器
$(".class名");
4选取所有元素
$("*") (一般不用)
5选取当前 HTML 元素
$(this)
6选取 class 为 intro 的
元素
$("p.intro")
7选取第一个
元素
$(p:first)
8 选取第一个
- 元素的第一个
-
$(ul li:first)
9,选取每个
- 元素的第一个
- 元素
$(ul li :first-child)
10,选取带有 href 属性的元素 $("[href]")
11,选取所有 target 属性值等于 "_blank" 的 元素 $("a[target='_blank']")
12 选取所有 target 属性值不等于 "_blank" 的 元素
$("a[target!='_blank']")
13 选取所有 type="button" 的 元素 和 元素 $(":button")
14 选取偶数位置的 元素 $("tr:event")
15选取奇数位置的 元素
$("tr:odd");
选择器归类 基本选择器 包括:id选择器,类选择器,通配选择器,多元素匹配 层级选择器:页面肯定是有嵌套关系的元素,我们首先要找到第一层的关系 再去找这个元素 jquery中的层级选择器有:后代选择器,子元素选择器,相邻元素选择器,同辈元素选择器把选择出来的元素进一步选择 基本过滤器
通过选择器我们选定到页面上的元素,但是有些元素内部包含多个元素,这时候我们还可以使用过滤器 表单选择器 input 匹配所有的表单元素 text 匹配文本框的元素 password 匹配密码框的元素。。。。。。。。。 jquery属性 attr()设置标签的属性,可以读或者写 removeAttr()移除标签的某个属性 html()文本 可以获取html size ()获取的是个数 length个数,注意,size ()有括号 length没有括号。 jQuery 事件
什么是事件? 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
简单事件 jquery中的简单事件就是我们在学习JavaScript时候的事件,对应页面上的某种操作,例如点击事件,在JavaScript中是onclick 在jquery上是click ,基本上JavaScript 中的事件,在jquery中都有在jquery省略on 即可 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload hover
点击事件 click()
双击事件 dblclick()
鼠标事件穿过事件 mouseenter()
当鼠标指针离开元素时 mouseleave()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件 mousedown()
当在元素上松开鼠标按钮时,会发生 mouseup 事件 mouseup()
hover()方法用于模拟光标悬停事件。 hover()
当元素获得焦点时,发生 focus 事件 focus()
当元素失去焦点时,发生 blur 事件 blur()
jquery的插入替换等。。。 通过JavaScript操作dom,来实现获取页面元素,做一些修改等,同样的利用jquery也可以操作Dom
append 和appendTO 一个是在父元素内插入子元素,一个是吧子元素插入父元素,都插入内部
在。。。之前和之后插入ps(本人和这位叫张雨涵的是好盆友,所以骂了几句哈!!问题不大)
替换
删除
复制
代码 1 插入。。。。的练习 ps(本人和这位叫张雨涵的是好盆友,所以骂了几句哈!!问题不大)
选择器练习
效果
离开会变回去哈 选择器练习
轮播!!
榜单切换的
设置绝对路径和相对路径的三种情况 1 只有一个DIV设置了绝对位置,那么这个DIV 会以浏览器左上角为坐便原点进行移动 2,有两个div 父的Div 设置为相对的 子的为绝对路径 字的会以父级的左上角边框相对移动 3 如果有好多的父的都设置相对路径,那么子的Div 根据距离自己最近的div 移动 行级转成块级的
html中只有两个行级的元素 span ,a 标签 行级元素无法设置宽和高,是根据里面的内容变化的 精灵技术 写法:background :url(图片路径) no-repeat x 轴 y 轴 (需要图片的像素);精灵技术都在第三象限
动画效果
遍历
获取相邻元素
添加获取移除元素
- 元素
$(ul li :first-child)