1、JQuery 基础
JQuery:JavaScript 的一个类库,对常用的方法和对象进行封装,方便我们使用。
JQuery 是单独的 js 文件,通过 script 标签的 src 属性导入即可。
获取一个 jquery 对象,格式:$("选择器")
或者 jQuery("选择器")
dom 对象和 jquery 对象之间的转换:
- dom 对象 ===> jquery 对象:
$(dom对象)
- jquery 对象 ===> dom对象:①
jquery对象[index]
、②jquery对象.get(index)
页面加载:(认真看下)
JS 中:window.onload=function(){}
在一个页面中只能使用一次
JQuery 在一个页面中可以使用多次:方式① $(function(){...})
、方式② $(document).ready(function(){});
PS:$(document).ready() 和 window.onload 等几个的区别?
1、JS 中,常见:window.onload
如:
window.onload = function(){
alert(“text1”);
};
等同于JQuery中
$(window).load(function(){
alert("text1");
});
他们都是用于当页面的所有元素,包括外部引用文件,图片等都加载完毕时运行函数内的 alert 函数。load 方法只能执行一次,如果在 js 文件里写了多个,只能执行最后一个。
2、另外:由于在 $(document).ready()
方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完,例如与图片有关的HTML下载完毕,并且已经解析为 DOM 树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。
要解决这个问题,可以使用 JQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。如:$(window).load(function(){ }) 等价于 window.onload = function(){ }…
3、在 JQuery 中,可以写 $(document).ready(function(){ })
等同于(简化写法为):$(function(){ })
他们都是用于当页面的标准 DOM 元素被解析成 DOM 树后就执行内代码。这个函数是可以在 js 文件里多次编写的,对于多人共同编写的js 就有很大的优势,因为所有行为函数都会执行到。而 $(document).ready()
函数在 HMTL 结构加载完后就可以执行,不需要等大型文件加载或者不存在的连接等耗时工作完成才执行,效率高。
详细参考:$(document).ready() 和 window.onload 的区别
派发事件:
$("选择器").click(function(){...});
相当于原生 JS 中dom对象.onclick=function(){....}
掌握:focus、blur、submit、change、click
jquery 中效果:
- 隐藏或展示:show(毫秒数)、hide(毫秒数)
- 滑入或滑出:slideDown(毫秒数):向下滑入、slideUp(毫秒数):向上滑出
- 淡入或淡出:fadeIn(int):淡入、fadeOut(int):淡出
2、选择器
基本选择器:★
$("#id值")
$(".class值")
$("标签名")
了解:$("*")
理解:获取多个选择器 用逗号隔开 $("#id值,.class值")
层次选择器:★
a b
:a的所有b后代a>b
:a的所有b孩子a+b
:a的下一个兄弟(大弟弟)a~b
:a的所有弟弟
基本过滤选择器:★
:frist
第一个:last
最后一个:odd
索引奇数:even
索引偶数:eq(index)
指定索引:gt(index)
>:lt(index)
<
内容过滤::has("选择器")
包含指定选择器的元素
可见过滤:
:hidden
在页面不展示元素 一般指input type="hidden"
和 样式中display:none
:visible
属性过滤器:★
- [属性名]
- [属性名=”值”]
表单过滤::input
所有的表单子标签 input select textarea button
表单对象属性过滤选择器:
:enabled
可用的:disabled
不可用:checked
选中的(针对于单选框和复选框的)- ★
:selected
选中的(针对于下拉选)
3、属性与CSS的操作
对属性的操作
attr():设置或获取元素的属性(jquery1.6版本之前)
- 方式1:获取
attr("属性名称")
- 方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性
attr({ "属性1":"值1", "属性2":"值2" })
prop()
和 attr 用法一致(jquery1.6版本之后)
移除属性:removeAttr("属性名称")
addClass("指定的样式值");
相当于 attr("class","指定的样式值");
removeClass("指定的样式值");
移除指定的样式
对 CSS 操作
操作元素的 style 属性。
css()
: 获取或设置 css 样式
- 方式1:获取
css("属性名")
- 方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({ "属性1":"值1", "属性2":"值2" });
获取元素的尺寸:width()、height()
文档处理
内部插入:
- a.append(c):将c插入到a的内部(标签体)后面
- a.prepend(c):将c插入到a的内部的前面
- appendTo
- prependTo
外部插入:
- a.after(c):将c放到a的后面
- a.before(c):将c放到a的前面
- a.insertAfter(c)
- a.insertBefore(c)
删除:
- empty() 清空元素
- remove() 删除元素
其他:val html text
- val:设置或者获取 values 属性
- html:获取或者设置标签体内容
text:获取或设置标签体内容,但只是标签文本内容( 不带样式,有区别于 html )
例如:
<div id="d1"><a href="http://www.baidu.com/">百度</a></div>
alert($("#d1").text());
弹出的内容为百度
alert*($("#d1").text());
弹出的内容为<a href="http://www.baidu.com/">百度</a>
遍历数组:
- 方式1:
jquery对象.each(function(){});
- 方式2:
$.each(jquery对象,function(){});
在 jquery 中创建元素:$("<标签名>").prop(属性).html(内容)