0%

JQuery入门

1. jQuery 是什么?(了解)

  • jQuery 其实就是一堆的 js 函数,是普通的 js,只不过应用广泛,形成了行业标准。
  • 学习参考:http://www.w3school.com.cn/jquery/
  • 官网:http://jquery.com/

2. jQuery 的重点

  • 2.1 jQuery 入口函数(全球都会)
  • 2.2 jQuery 的选择器(其实就是 CSS 的选择器)
  • 2.3 jQuery 的 Dom 操作
  • 2.4 jQuery 的样式操作
  • 2.5 jQuery 的动画
  • 2.6 jQuery 的事件处理

3.jQuery 的入口函数

  • 3.1 语法

    • jQuery(document).read(function(){ });
    • $(function(){ });// **
    • window.onlaod = function(){}
    • $ === jQuery // $是 jQuery 全局函数的别名。
  • 3.2 注意事项: (重点)

    • document ready: 是 html 文档准备就绪,也就是 dom 树创建完成了。可以进行 dom 操作了。
      重要的是:html 页面下载完成,并准备就绪

    • window.onload: 是整个页面所有的资源都加载完成,图片、js、css 等…

  • 3.3 文档加载顺序: (重点)

    • 下载 html 页面,解析 html 标签,遇到 link 标签加载 css,遇到 script 加载 js..

4. jQuery 选择选取元素

4.1 jQuery 选择器

  • 4.1.1 ID 选择器(js 一般尽量用 ID 选择器,效率最高) (重点)
    • $(“#id”).html();
  • 4.1.2 类选择器 (重点)
    • $(“.className”).text();
  • 4.1.3 标签选择器 (重点)
    • $(‘p’).click();
  • 4.1.4 属性选择器
    • $(“li[id]”)、 $(“li[id=’link’]”).fadeIn();
  • 4.1.5 层级选择器 (重点)
    • $(“li .link”).show();
  • 4.1.6 父子选择器
    • $(“ul > li”)
  • 4.1.7 伪类选择器
    • $(“p:first”)
    • $(“ul li:eq(3)”)
  • 4.1.8 表单选择器
    • $(“:text”)
    • $(“:checkbox”)
    • $(“:checked”)

4.2 选择器汇总

1
2
3
4
5
*               $("*")              所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
1
2
3
4
:first  $("p:first")    第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
1
2
3
4
5
6
7
:eq(index)      $("ul li:eq(3)")    列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素 greater than
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素 less than
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素

:header $(":header") 所有标题元素 <h1> - <h6>
:animated 所有动画元素
1
2
3
4
5
6
:contains(text)     $(":contains('W3School')")  包含指定字符串的所有元素
:empty $(":empty") 无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格

s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
1
2
3
4
[attribute]         $("[href]")         所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
1
2
3
4
5
6
7
8
9
10
:input      $(":input")         所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
1
2
3
4
:enabled    $(":enabled")   所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

4.3 jQuery 选择方法

  • 4.3.1 获取父级元素
1
2
* $(selector).parent();     //获取直接父级
* $(selector).parents('p'); //获取所有父级元素直到html
  • 4.3.2 获取子代和后代的元素
1
2
3
* $(selector).children();   //获取直接子元素
* $(selector).find("span"); //获取所有的后代元素
* find方法 可能用的多。
  • 4.3.3 获取同级的元素
1
2
3
4
5
* $(selector).siblings()    //所有的兄弟节点
* $(selector).next() //下一个节点
* $(selector).nextAll() //后面的所有节点
* $(selector).prev() //前面一个的兄弟节点
* $(selector).prevAll() //前面的所有的兄弟节点
  • 4.3.4 过滤方法
1
2
3
4
5
6
* $("div p").last();        //取最后一个元素
* $("div p").first(); //取第一个元素
* $("p").eq(1); //去第n个元素
* $("p").filter(".intro"); //过滤,选择所有p标签带有 .intro类
$('p.intro')
* $("p").not(".intro"); //去除,跟上面的filetr正好相反

5.jQuery 的 Dom 操作

5.1 获取 html 的内容

$(selector).text() - 设置或返回所选元素的文本内容
$(selector).html() - 设置或返回所选元素的内容(包括 HTML 标记)
$(selector).val()  - 设置或返回表单字段的值
  • 获取和设置相同方法名,通过不同参数来确定是获取还是设置值
1
2
$("#blin").text("传智播客");
var txt = $("#blin").text();
  • 使用 html 来创建 dom 的方式效率比较高。 远大于: document.createElement();

  • 案例:02 动态创建表格.html

5.2 样式操作

  • 5.2.1 基本样式操作
1
2
3
4
5
6
7
8
9
10
11
$(selector).css("color","red") |css({})  设置或返回匹配元素的样式属性。
$(selector).height() 设置或返回匹配元素的高度。
$(selector).offset().left => { left:99, top: 22} 返回第一个匹配元素相对于文档的位置。left,top
$(selector).offsetParent() 返回最近的定位祖先元素。
$(selector).position() 返回第一个匹配元素相对于父元素的位置。
$(window).scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
$(window).scrollTop(0) 设置或返回匹配元素相对滚动条顶部的偏移。
<!-- onscroll -->
$(selector).on("scroll",function(){});

$(selector).width() 设置或返回匹配元素的宽度。
  • 5.2.2 样式类操作尽量操作样式类,少直接操作 css 属性
1
2
3
4
$(selector).addClass('class');     向匹配的元素添加指定的类名。
$(selector).removeClass('class'); 从所有匹配的元素中删除全部或者指定的类。
$(selector).toggleClass('class') 从匹配的元素中添加或删除一个类。
$(selector).hasClass('class') 检查匹配的元素是否拥有指定的类。

5.3 属性操作

1
2
$(selector).attr("id")      设置或返回匹配元素的属性和值
$(selector).removeAttr()从所有匹配的元素中移除指定的属性。

5.4 动态创建

1
2
3
4
5
6
7
8
9
10
$(selector).append()    - 在被选元素的结尾插入内容
$(selector).append(node)
$(selector).append('<div></div>')
$(selector).appendTo(); - 追加到..



$(selector).prepend() - 在被选元素的开头插入内容
$(selector).after() - 在被选元素之后插入内容
$(selector).before() - 在被选元素之前插入内容

案例 04 城市选择案例.html

6. 事件处理

6.1 简单事件绑定方法

  • .click(hander) .click() //绑定事件 或者触发 click 事件

  • .blur() //失去焦点事件,同上

  • .hover(mousein, mouseleave) //鼠标移入,移出

  • mouseout: 当鼠标离开元素及它的子元素的时都会触发。

  • mouseleave: 当鼠标离开自己时才会触发,子元素不触发。

  • .dbclick() 双击

  • change 改变,比如:文本框发送改变,下来列表发生改变等…

  • focus 获得焦点

  • keyup, keydown, keypress : 键盘 键被按下。

  • mousedown, mouseover

6.2 绑定事件的方式 bind 方式(不推荐,1.7 以后的 jQuery 版本被 on 取代)

  • 语法格式:.bind( eventType [, eventData ], handler )
  • 参数说明
    • 第一个参数:事件类型
    • 第二个参数:传递给事件响应方法的数据对象,可以省略。
    • 事件响应方法中获取数据方式: e.data
    • 第三个参数:事件响应方法
      第二个参数可以省略。
1
2
3
4
5
6
7
8
例如:
$("p").bind("click", function(e){
//事件响应方法
});

$("p").on('click',function(e){
//事件响应方法
})

6.3 delegate 方式(推荐,性能高,支持动态创建的元素)

* 语法格式:$(selector).delegate( selector, eventType, handler )
* 语法说明:
    - 第一个参数:selector, 子选择器
    - 第二个参数:事件类型
    - 第三个参数:事件响应方法

1
2
3
4
5
6
7
8
例如:
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});

$(".parentBox").on("click","p", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
*优势:效率较高*

6.4 one 绑定一次事件的方式

* .one( events [, data ], handler )
1
2
3
4
5
6
7
8
例如:
$( "p" ).one( "click", function() {
alert( $( this ).text() );
});

$("p").on("click",function(){
$(this).off('click');//事件方法执行了一次后,就立即解绑事件
})

6.5 on 绑定的方式(整合了 bind、delegate 烈建议使用的方式))

  • jQuery1.7 版本后,jQuery 用 on 统一了所有的事件处理的方法
  • 语法格式:$(selector).on( events [, selector ] [, data ], handler )
  • 参数介绍:
    • 第一个参数:events,事件名
    • 第二个参数:selector,类似 delegate
    • 第三个参数: 传递给事件响应方法的参数
    • 第四个参数:handler,事件处理方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
例如:
//绑定一个方法
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});

//给子元素绑定事件
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});

//绑定多个事件的方式
$( "div.test" ).on({
click: function() {
$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});

6.6 解绑

  • unbind 解绑 bind 方式绑定的事件( 在 jQuery1.7 以上被 on 和 off 代替)

    • $(selector).unbind(); //解绑所有的事件
    • $(selector).unbind(“click”); //解绑指定的事件
  • undelegate 解绑 delegate 事件

    • $( “p” ).undelegate(); //解绑所有的 delegate 事件
    • $( “p” ).undelegate( “click” ); //解绑所有的 click 事件
  • off 解绑 on 方式绑定的事件

    • $( “p” ).off();
    • $(“P”).off(‘click’);
    • $( “p” ).off( “click”, “**“ ); // 解绑所有的 click 事件,两个*表示所有
    • $( “body” ).off( “click”, “p”, foo );

6.7 触发事件

  • 6.7.1 简单事件触发
    • $(selector).click(); //触发 click 事件
  • 6.7.2 trigger 方法触发事件
    • $( “#foo” ).trigger( “click” );
  • 6.7.3 triggerHandler 触发 事件响应方法,不触发浏览器行为
    • $( “input” ).triggerHandler( “focus” );

6.8 event 对象的简介

  • event.data //传递的额外事件响应方法的额外参数

  • event.currentTarget === this //在事件响应方法中等同于 this,当前 Dom 对象

  • **event.target ** //事件触发源,不一定===this

  • event.pageX //The mouse position relative to the left edge of the document

  • event.pageY

  • event.stopPropagation()//阻止事件冒泡

  • e.preventDefault(); //阻止默认行为

  • event.type //事件类型:click,dbclick…

  • event.which //鼠标的按键类型:左 1 中 2 右 3

  • keydown : a,b,c

  • event.keyCode// code 的 c 是大写

7. jQuery 动画系统

7.1 隐藏显示

* $(selector).show(speed,callback);
* $(selector).hide(1000);
* $(selector).toggle("slow");

* 三个方法的语法都一致,参数可以有两个,第一个是动画的速度,第二个是动画执行完成后的回调函数。
* 第一个参数是:可以是单词或者毫秒数

7.2 淡入淡出

$(selector).fadeIn(speed, callback)
$(selector).fadeOut(1000)
$(selector).fadeToggle('fast',function(){})
参数等同于 7.1

* $(selector).fadeTo(.5); //淡入到  0透明,1不透明

7.3 滑动

* $(selector).slideDown(speed,callback);
* $(selector).slideUp(speed,callback);
* $(selector).slideToggle(speed,callback);

7.4 动画

* $(selector).animate({params},speed,callback);
1
2
3
4
5
6
7
8
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},2000);
}).animate({},1000);

7.5 结束动画

* $(selector).stop()
* $(selector).stop(stopAll,goToEnd);
  • 案例:

8. jQuery 补充

  • 8.1 each 函数
    • 全局的
      • $.each(array, function(index, object){})
    • 普通 jQuery 对象的 each 方法
      • $(“li”).each(function(index, element){} )
      • 参数的顺序是一致的。

入口函数:
1:
$(document).ready(function(){})
2:
$(function(){})

切换元素隐藏和显示
slideToggle()

元素属性操作
设置属性
attr(“属性名”,”属性值”)
获取属性
attr(“属性名”)
删除属性
remoceAttr(“属性名”)

操作类属性
添加类名
addClass()
删除类名
removeClass()

表单操作
表单设置值
val(值)
表单获取值
val()

标签内容方法
设置 html
html(“内容(可以是 html 代码)”)
获取 html
html()
设置文本内容
text(“内容”)
获取文本内
text()

节点操作
内部插入节点
插入元素节点到末尾
append(“元素标签”)
$(“元素标签”).appendTo(obj)

插入节点到首位
        prepend("元素标签")
        $("元素标签").prependTo(obj)
外部插入节点
    插入至目标后面
        after(“元素标签”)
        $(“元素标签”).insertBefore(obj)
    插入至前面目标
        before(“元素标签”)
        $(“元素标签”).insertAfter(obj)
删除节点
    删除选中的元素(自杀)
        remove()
    清空子元素
        mpty()
复制节点
    潜复制
        clone()
    深复制,复制事件
        clone(true)
包裹节点
    包裹单个节点
        $(被包裹”).wrap(包裹)
    包裹全部节点到一个元素内
        $(“被包裹”).wrapAll(包裹)
替换节点
    $(被替换).replaceWith(“元素标签”)
获取前面所有的兄弟元素
    prevAll()
获取后面所有的兄弟元素
    nextAll()

透明度
fedeTo(500,0.5)

选择下一个元素
next()

遍历选择的元素
each(function(index,value){}h
动画
显示隐藏
show()
hide()
淡入淡出
fadeIn()
fadeOut()
淡出到指定透明度
dadeTo()
渐入
slideDown()
渐出
slideUp()
自定义动画
animate(function(){},速度(毫秒))

停止动画
stop(boolean,boolean)

事件
鼠标经过事件
mouseenter
鼠标离开
mouseleave
滚动条事件
scroll
绑定多个事件
bind(“事件一 事件二”function(){})
bind({“事件一”:执行代码,”事件二”:执行代码})
bind(“事件”,形参,function(e){console.log(e.data);})
只触发一次事件
one(“事件”,function(){})
向指定元素的子元素添加一个或多个事件处理程序
父元素.delegate(“子元素”,”事件”,function(){})
强烈推荐,基本功能都具备
on(事件,子元素,形参,function(){})
移除事件
unbind()
undelegate()
off()
获得焦点
focus()
触发指定事件
click: 元素对象.click()
trigger(事件)
triggerHandler()
键盘按下
keyDown()

获取元素坐标值
offset()

获取相对于父元素的坐标值(子绝父相)
position()
设置坐标值
offset({top:值,left:值})

获取滚动条已卷高度(隐藏的页面高度)
scrollTop()
scrollLeft();
设置滚动条高度
scrollTop(值)
scrollLeft(值)

阻止冒泡
event.stopPropagation()
组织默认行为
event.preventDefault()
获取时间类型
event.type()
鼠标的按下类型
event.which()

获得键盘按下的编码
event.keyCode
获取事件源
event.currentTarget
event.target

结束当前的链式编程,恢复上一级的状况
end()
遍历选中的元素执行所指定的函数
each(function(index,obj)

-------------本文结束,感谢您的阅读-------------
最近打算存点钱,吃点高端的像沙县小吃这样的餐厅