1. 理解
1.1 概述
jquery是一个优秀的javascript的轻量级框架之一,兼容css3和各大浏览器,提供了dom、events、animate、ajax等简易的操作。并且jquery的插件非常丰富,大多数功能都有相应的插件解决方案。jquery的宗旨是write less do more。
js---->jquery----->插件(功能)
1.2 jquery的下载与引入
下载:www.jquery.com
引入:在需要使用jquery的html中使用js的引入方式进行引入
script : type="text/javascript" src="jquery-1.11.0.min.js"
1.3 jquery与js的区别
jquery本质上虽然也是js,但如果使用jquery的属性和方法那么必须保证对象是jquery对象而不是js对象。使用js获取的对象是js对象,使用jquery方式获取的对象是jquery对象。两者的关系与区别总结如下:
1.3.1 jquery对象与js对象之间的转换
js对象转换成jQuery对象,语法:$(js对象)
jQuery对象转换成js对象,语法:jquery对象[索引]或jquery对象.get(索引)
1.3.2 事件的写法不同,意义相同
js的事件的写法:js对象.onclick = function()
jquery的事件的写法:jquery对象.click( function() )
1.3.3 js的页面加载完毕与jquery的页面加载完毕
js的页面加载完毕:window.onload = function()
jquery的页面加载完毕:$(document).ready(function())
两者区别:
1.3.3.1 jquery的页面加载完毕有简写形式:$( function() )
1.3.3.2 jquery的页面加载完毕事件可以写多次,而js只能写一次,写多次也只会执行最后一次
2. jquery的选择器
jquery的选择器与css的选择器的作用是完全一样的,目的是精确快速的定位到某个html元素上并获取该元素对象,进而使用juery的方法对该html进行操作。
jquery常用的选择器有如下:
基本选择器,层级选择器,属性选择器,基本过滤选择器,表单属性选择器等
jquery基本 $(选择器)
2.1 基本选择器
标签选择器(元素选择器):$("html标签名")
id选择器:$("#id的属性值")
类选择器:$(".class的属性值")
2.2 层级选择器
获得A元素内部的所有的B元素:$("A B ") --- 后代选择器
获得A元素下面的所有B子元素:$("A > B")
获得A元素同级下一个B元素:$("A + B")
获得A元素同级所有后面B元素:$("A ~ B")
2.3 属性选择器
获得有属性名的元素:$("A[属性名]")
获得属性名 等于 值 元素:$("A[属性名=值]")
获得属性名 不等于 值 元素:$("A[属性名!=值]")
获得属性名 以 值 开头 元素:$("A[属性名^=值]")
获得属性名 以 值 结尾 元素:$("A[属性名$=值]")
获得属性名 含有 值 元素:$("A[属性名*=值]")
复合属性选择器,多个属性同时过滤:$("A[属性名!=值][属性名!=值][属性名!=值]")
2.4 基本过滤选择器
获得选择的元素中的第一个元素: :first
获得选择的元素中的最后一个元素: :last
不包括指定内容的元素例如: :not(selecter)
偶数,从 0 开始计数: :even
奇数,从 0 开始技术: :odd
指定第几个: :eq(index)
大于n个: :gt(index)
小于n个: :lt(index)
2.5 表单属性选择器
可用: :enabled
不可用: :disabled
3. jquery的操作方法
3.1 jquery的DOM操作方法
3.1.1 html代码/文本/值/属性:html()/text()/val()
html() === innerHTML
text() === innerText
val() === value
html text val 传递参数代表赋值 空参代表获取
3.1.2 html属性操作:attr()/prop()
attr() === setAttribute和getAttribute
attr(属性名称); --- 获取属性的值
attr(属性名称,属性值) --- 设置的属性的值
3.1.3 html的class属性操作:addClass() removeClass()
addClass(值) === attr(“class”,值)
removeClass(class值) === removeAttr(“class值”)
3.1.4 html的样式的操作:css()
css() ==== js对象.style.属性
css(css属性名) 获取css属性名称对应值
css(css属性名,值) 设置css样式
3.1.5 html的元素的创建:$(“标签”);
$(“
”) === createElement(“li”)3.1.6 html的内部插入:append() prepend()
append() === appendChild
prepend() 加入所有子元素的最前面
3.1.7 html元素的删除操作:remove()
注意:jquery中的大部分方法是集设置值与获取值为一体的
3.2 jquery的效果
3.2.1 元素的显示与隐藏
show(speed ,fn) 显示
参数 speed,显示速度,单位:毫秒。固定字符串:slow, normal, or fast
参数 fn,显示成功之后回调函数。
hide() 隐藏
toggle() 切换
3.2.2 元素的滑动显示与隐藏
slideDown() 显示,高度变大。
slideUp() 隐藏,高度变小。
slideToggle() 切换
3.2.3 元素的淡入淡出的显示与隐藏
fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
补充:js页面的编码方法
encodeURI() : 编码
decodeURI() : 解码
function函数是否要定义在页面加载完毕事件内部
评论区