努力到无能为力,拼搏到感动自己 !
一 核心：函数和对象访问
1页面加载函数:
最原始最麻烦的写法
jQuery(document).ready(function(){});
简写方式(开发中常用)
$(function(){});
2 JQ与JS页面加载的区别:
① JS页面加载存在覆盖问题，加载速度比JQ慢(除了要加载整个页面还得加载与之相关资源)
② JQ页面加载不存在覆盖问题，按照书写顺序依次执行，加载速度比JS块(当整个文档绘制完毕后就执行)
3 JQ对象与DOM对象之间的转换:
①JQ向DOM转换 (可能忘记了JQ里面的方法但是记得DOM的操作)
方式一: $(element).get(index,一般都是0)
方式二： $(element)[0]
②DOM向JQ转换 (使用$()将DOM对象包裹起来)
$(DOM对象)
注意：##
JQ和DOM对象不能互相使用对方的属性和方法！
4 遍历
在对象访问中的遍历：
$(DOM对象).each(function(i,n){})
其中，i代表角标，n代表被遍历后的每一个元素,DOM对象就是被遍历的对象。
JQ工具类中的遍历方式：
$.each(被遍历的对象,function(i,n){});
二 选择器
1 基本选择器
1 id选择器
2 类选择器
3 元素选择器
4 通配符*
** 多个选择器同时作用(并集) : 注意，多个选择器之间使用逗号(,)分开 **
2 层级选择器
A B (寻找A下面的所有包含B元素的内容(儿子、孙子、重孙子))
A>B (寻找A下面的所有包含B元素的内容(只找儿子))
A+B (寻找A下面的所有包含B元素的内容(下一个同桌))
A~B (寻找A下面的所有包含B元素的内容(兄弟元素))
3 基本过滤选择器
过滤选择器都有一个共同的特性 : 前面都有冒号 " : "
:first (索引为第一的本标签)
:last (索引为最后一个的本标签)
:even (索引为偶数,从零开始)
:odd (索引为奇数)
:lt(n) (索引小于n)
:gt(n) (索引da于n)
4 属性选择器
写法：其它选择器[属性名='属性值']
注意手册里面的attr的写法
5表单选择器
:input
:text
:checked (选择框被选中的元素)
:selected (下拉表选中的元素)
三 属性操作
属性
attr(name) 获取属性名为name属性值
attr(name,value) 设置一个属性名为name，属性值为value的属性
attr(properties) 设置多个属性
removeAttr(name) 删除属性名为
name的属性
CSS类
addClass(class属性值)
一般开发的时候CSS样式都是由别人写好的，我们只需要调用此方法即可，完成添加新的样式
removeClass(class属性值)
移除指定class值的样式
toggleClass(class属性值)
切换指定的样式(一次是带有class属性值的样式，一次是没有的样式)
html/text/val
html() 获取html里面的内容，它包含html标签
html(val) 设置一个内容
text() 获取文本值，不包含html标签
text(val) 设置文本的值
val() 获取标签中value属性的值
val(val) 给标签中value属性设置值
四 CSS操作
css(name) 获取指定名称为name的样式
css(name,value ) 设置属性名为name的value值样式
css(properties) 设置多个CSS样式
五 文档处理
内部插入
append() A.append(B):将B插入到A的内部的末尾处 (进行的是剪切操作)
appendTo() A.appendTo(B):将A插入到B的内部的末尾处 (进行的是剪切操作)
prepend() A.prepend(B):将B插入到A的内部的开头处 (进行的是剪切操作)
prependTo() A.prependTo(B):将A插入到B的内部的开头 (进行的是剪切操作)
外部插入
after() A.after(B):将B插入到A的外部的后面 (进行的是剪切操作)
before() A.before(B):将B插入到A的外部的前面 (进行的是剪切操作)
insertBefore() A.insertBefore(B) 将A添加到B的前面(外面)
insertAfter() A.insertAfter(B) 将A加入B的后面(外部)
复制
clone() /clone(true)
如果里面有参数true，那么表示复制过去的内容也与原内容具有相同的事件(请参考相关代码)
删除
empty() 删除所有的子节点，不包括自己
Remove() 删除所有子节点，包括自己，同时删除事件
detach() 删除所有子节点，包括自己，将事件保留
替换
$(A).replaceWith($(B)) 用对象$(B)的替换掉$(A)
$(A).replaceAll($(B)) 用$(A)替换掉$(B)
六 效果和事件
效果
显示：show()
隐藏：hide()
淡入：fadeIn()
淡出：fadeOut()
滑入：slideDown()
滑出：slideUp()
以上函数都可以有参数：
可以是英文字母 : slow /normal / fast
可以是毫秒值： 例如: $(A).show(3000)
事件
我们在开发中使用JQ事件与JS大致相同，只需要将事件前面的on去掉即可
页面加载
** 问题引入：**
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
/* 执行错误，为什么？
因为dom还未加载完毕。*/
</script>
解决办法：
方式一：将整个JS代码放到Body后面
方式二：将真个JS代码放到页面加载函数里面)
事件绑定
绑定方式：
$("#img").bind('click',function(){});
事件移除
解绑方式：
$('#btn').unbind("click");
事件合成
$(".head").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
努力到无能为力,拼搏到感动自己!
网友评论