JQuery 入门
1. JQuery 库概述
1. JQuery 库包含的功能
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- 工具类
2. JQuery 语法
2.1 $(selector).action()
- "$":定义 JQuery;
- "selector": 查询或查找 HTML 元素;
- "action()": 执行对元素的操作;
2.2 noConfilct
- 解决 jQuery 库的 "$" 符号与其他库的冲突
3. JQuery 选择器
// index.html
<body>
<p class="pclass">大家好</p>
<p id="pid">下雨天</p>
<button>点击这里</button>
</body>
// app.js
$(document).ready(function(){
$("button").click(function(){
$("#pid").text("id选择器被修改!");
$(".pclass").text("class 选择器也被修改了.....");
});
});
4. JQuery 事件
4.1 绑定事件和解除绑定事件
- 添加绑定:
bind或on; - 解除绑定:
unbind或off;
// index.html
<body>
<button id="clickMeBtn">点击这里01</button>
</body>
// app.js
$(document).ready(function{
$("#clickMeBtn").on("click",clickHandler2);
// 解除绑定
$("#clickMeBtn").off("click");
});
// 定义点击事件
function clickHandler2(e){
console.log("点击这里01......");
}
4.2 事件的目标和冒泡
event.stopImmediatePropagation():阻止其他事件被触发,以及阻止事件的冒泡;event.stopPropagation(): 阻止事件冒泡.
4.3 自定义事件
// index.html
<body>
<button id="clickMeBtn">点击这里</button>
</body>
// app.js
// 定义 ClickMeBtn;
var ClickMeBtn;
$(document).ready(function(){
ClickMeBtn = $("#clickMeBtn");
ClickMeBtn.click(function(){
// trigger 触发该事件
ClickMeBtn.trigger("MyEvent");
});
// 自定义 MyEvent 事件, 并绑定到 ClickMeBtn 上面
ClickMeBtn.bind("MyEvent",function(event){
console.log(event);
});
});
2. JQuery DOM 操作
// index.html
<body>
<p id="p2">下了好久的一场雨</p>
<input type="text" id="username"/>
<a href="https://github.com/Noodlescn" id="aid">个人主页</a>
<div id="div" style="width:200px; height:200px; border:1px solid black; background-color:blue">
<p>这是一段文本</p>
<p>这是一段文本</p>
</div>
<button id="btn">点击这里</button>
</body>
// app.js
$(document).ready(function(){
$("#btn").click(function(){
// 获取p元素中的文本
console.log("text:"+$("#p2").text());
});
// 获取输入框文本
$("#btn").click(function(){
console.log("text:"+$("#username").val());
});
// 获取属性
$("#btn").click(function(){
console.log("text:"+$("#aid").attr("href"));
});
// 设置 p 元素中的文本值
$("#btn").click(function(){
// html 中可以带有html标签
$("#p2").html("<a href='https://github.con/Noodlescn'>我的个人主页</a>");
});
// 更改 a 的 href 属性
$("#btn").click(function(){
$("#aid").attr("href","http://www.cnblogs.com/linkworld");
});
/*
* 添加元素
* append: 在选中元素的后面添加内容;
* preappend: 在选中元素的前面添加内容;
* before:换行之后,在选中元素的前面添加;
* after:换行之后,在选中元素的后面添加;
*/
funtion appendText(){
// 添加元素的三种方式: html, jQuery, DOM
// html: text1 = "<p>内容1</p>"
// jQuery: text2 = $("<p></p>").text("内容2");
// DOM: text3 = document.createElement("p");
// text3.innerHTML = "内容3";
$("body").append(text1,text2,text3);
}
// 删除元素
// remove: 全部删除
// empty: 将元素中的内容清空
$("#btn").click(function(){
$("#div").remove();
// $("#div").empty();
});
});
3. JQuery 效果
- 隐藏/显示:
hide(), show(), toggle(); - 淡入/淡出:
fadeIn(), fadeOut(), fadeToggle(), fadeTo()fadeTo(duration,opacity)- 设置透明度,duration, 表示动画持续时间; opaticy, 表示透明度.
- 滑动:
slideDown(), slideToggle(), slideUp();
4.回调函数: 例如,fadeIn(duration,complete);, 其中的 complete 是在淡入动画执行完毕后,调用一次的函数.
// index.html
<body>
<p id="text">一段文本</p>
<button id="btn">点击这里</p>
</body>
// app.js
$(document).ready({
// 隐藏和显示
$("#btn").click(function(){
// 1000 表示从隐藏开始到结束一共需要 1000 毫秒
$("#text").hide(1000); // 隐藏
$("#text").show(1000); // 显示
});
// 或者使用 toggle, 点击第一次,隐藏; 点击第二次,显示
$("#btn").click(function(){
$("#text").toggle(1000);
})
});
4. JQuery AJAX
// jQuery 提供的 ajax 方法: ajax, post, get, load, getJSON, getScript
$.ajax({
url: 请求地址,
type: 请求方式, 默认为 GET
data: 请求参数,
async:true, 是否为异步请求,
cache: false, 是否缓存结果
dataType: 响应的数据格式(xml,text,json)
success: function(data){....},
error: 出现异常后,执行的处理方式
});
$.post(url,{参数},function(data){}, 'json');
5. JQuery 扩展
5.1 JQuery 为开发插件提供了两个方法, 分别是:
jQuery.fn.extend(object): 给 jQuery 对象添加方法;jQuery.extend(object): 为 jQuery 类添加新的方法;
5.2 JQuery.fn.extend(object)
jQuery.fn = jQuery.prototype, prototype 相当于 javascript 中的 类, jQuery 表示一个封装的
非常好的类,而语句$("#btn")会生成一个 jQuery 类的实例;jQuery.fn.extend(object),就是为 jQuery 类添加"成员函数", jQuery 类的实例可以使用这个"成员函数";
// 比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便 alert 当前编辑框里的内容
$.fn.extend({
alertWhileClick: function(){
$(this).click(function(){
alert($(this).val());
});
}
});
// 调用方式:
$("#input").alertWhileClick();
5.3 JQuery.extend(object)
- 为 jQuery 类添加类方法,可以理解为添加静态方法;
//示例
$.extend({
add:function(a,b){return a+b;}
});
// 调用方式:
$.add(3,4); // 结果为 7
6. JQuery CSS
// index.html
<body>
<div></div>
</body>
// app.js
$(document).ready(function(){
// 设置 div 的样式
$("div").css({
width:"100px",height:"50px",backgroundColor:"red"
});
// 第二种方式,加载 css 文件中的样式
// 在 js 中需要引入该 css 文件
$("div").addClass("style2"); // 参数为 样式名称
});
// style2.css
.style{
width:100px;
height:100px;
background-color:blue;
}
7. JQuery 的遍历和过滤
-
向下遍历:
children(可选参数):直接子元素,不包含"孙子辈"元素;find(参数): 查找任意子元素,必须指定参数;
-
向上遍历
parent():只能向上遍历一层;parents():向上遍历所有;parentUtil():区间,遍历两个元素直接的内容;
-
同级遍历
siblings():遍历同级所有元素;next(): 同级中的下一个;nexeAll(): 同级中处于下面的所有元素;nextUtil(): 区间;prev(): 前一个;preAll(): 前面所有;preUntil():区间;
-
遍历中的过滤
first(): 寻找同样元素中的第一个;last(): 寻找同样元素中的最后一个;eq():filter(): 符合要求的保留not(): 取反
// index.html
<body>
<div>
<p>div1</p>
</div>
<div>
<p class="pclass">div2</p>
</div>
<div>
<p class="pclass">div3</p>
</div>
<div>
<p>div4</p>
</div>
</body>
// app.js
$(document).ready(function(){
// 只修改 div1
$("div p").first().css("background-color","red");
// eq(index), 指定结果中的第几个元素,从0开始
// 修改 div2
$("div p").eq(1).css("background-color","red");
// 修改 div2 和 div3
$("div p").filter(".pclass").css("background-color","red");
// 修改 div1 和 div4
$("div p").not(".pclass").css("background-color","red");
});
参考资料
