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

                         })

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

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