JQuery小结

努力到无能为力,拼搏到感动自己 !

一 核心:函数和对象访问

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();

                         })

努力到无能为力,拼搏到感动自己!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、页面加载 JQ的页面加载比JS要快,当整个dom树结构生成完毕后就会加载 JQ页面加载不存在覆盖问题,加载的时...
    zengsiyong阅读 4,676评论 0 17
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 10,999评论 0 106
  • 内容回顾 JS开发步骤确定事件(onclick鼠标点击事件,onsubmit表单的提交事件,onload页面加载完...
    chcvn阅读 3,427评论 0 3
  • 01 《战狼2》打了谁的脸? 平时不爱看国产电影的我,看了《战狼2》后,感觉大大地惊喜和惊艳:完全不输给我看过的任...
    可闻桃杏香阅读 4,048评论 2 6
  • 还记得,小时候学习古诗文的时候,总结中心思想的时候,通常都写些什么吗!?“诗人描绘了……,身处在……环境之中,将…...
    baller阅读 3,184评论 0 3

友情链接更多精彩内容