文章目录
jQuery
定义：jquery的版本：
1、压缩版：体积小，代码结构混淆，适用于正式网站
2、未压缩版：体积大，代码结构清晰，适用于开发网站
调用：使用CDN调用jquery：Http://code.jquery.com/jquery-3.0.0.min.js
使用本地文件调用jquery
确认jquery版本号:$.fn.jquery或$().jquery
在浏览器中查看jquery的版本
1、$.fn.jquery
2、$().jquery
jQuery的调用
1、$(docment).ready
事件，在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容（例如图片）家在之前，比传统的onload事件执行更靠前
2、jQuery.noConflict
某些框架也是用$符号作为简写（就像jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行
作用：
1、将$代替jQuery规则破坏
2、重新定义jQuery的快捷方式
jQuery的选择器
选择器
对元素的获取
语法：$(选择器)
基本选择器：同css基本选择器
特殊选择器：
1、：first
2、：last
3、：eq(数字) 从零开始，表示第一个
4、：odd 表示按照索引排列的奇数元素
5、：even 表示按照索引排列的偶数元素
。。。。。。
返回值：满足条件的所有元素（id选择器除外）
<body>
<div class="qqq">1</div>
<div class="qqq">2</div>
<div class="qqq">3</div>
<div class="qqq">4</div>
<div class="qqq">5</div>
<script>
console.log($('div'))
console.log($('div:first'))
console.log($('div:last'))
console.log($('div:odd'))
console.log($('div:even'))
</script>
</body>
筛选器
对已经获取到的元素集合进行二次筛选
1.first() =>元素集合里面的第一个
2.last() =>元素集合里面的最后一个
3.eq(索引) =>元素集合里面指定索引的那一个
4.next() =>当前元素的下一个元素
5.nextAll() =>
元素集合.nextAll() 获取当前元素后面的所有兄弟元素
元素集合.nextAll(选择器) 获取到当前元素后面所有元素中指定选择器的那个元素
6.nextUntil() =>
元素集合.nextUntil() 获取到当前元素后面所有的兄弟元素
元素集合.nextUntil(选择器) 获取到当前元素后面所有的兄弟元素直到选择器元素位置（不包含选择器元素）
7.prev() =>当前元素的上一个元素
。。。。。
jQuery操作文本
操作元素内的文本和超文本
注意：属于jQuery的方法，只能jquery元素集合调用，原生DOM不能调用
1、html()
语法：
1）元素集合.html()
获取钙元素的超文本内容，以字符串的形式返回
2）元素集合.html(‘内容’)
设置元素集合内元素的超文本内容
完全覆盖式写入
隐式迭代：元素集合内有多少元素，就写入多少元素
2、text()
语法：
1）元素集合.text()
获取该元素的文本内容，以字符串的形式返回
完全覆盖式的写入
隐式迭代：元素集合内有多少元素，就写入多少元素
3.val()
语法：
1）元素集合.val()
获取元素集合内元素的value值
2）元素集合.val(内容)
设置元素集合内元素的value值
完全覆盖式的写入
隐式迭代：元素集合内有多少元素，就写入多少元素
<p>大家好</p>
<p>我是哒哒哒</p>
<input type="text" value="hello world">
<input type="text" value="hello world">
<input type="text" value="大家好">
<input type="text" value="这里是标签">
<input type="text" value="hello world">
<script>
console.log($('p').text());
$('p').text("你是谁");
//获取
//console.log($('input').val());
//设置
$('input').val('李往');
</script>
jQuery文档操作
创建
1、使用jQuery创建标签
2、$("<p></p>")创建一个空标签
3、$("<h1>jQuery</h1>")创建 一个h1标签其内容为jQuery
获取或设置内容
1、jQuery对节点内容的操作
2、text():获取设置对象的文本内容
3、html():获取或设置对象的子节点
4、val():获取或设置对象的值
<p id="test">这是一个p标签</p>
<input type="password" name="" value="" class="pwd">
<button id="btn1">按钮</button>
<button id="btn2">密码</button>
$(document).ready(function(){
$("#btn1").click(function(){
alert("text:" + $("#test").text());
});
$("#btn2").click(function(){
alert("password:" + $(".pwd").val())
});
$("#btn1").click(function(){
$("#test").text("修改内容");
});
$("#btn2").click( function(){
$("#test").html("你们<strong>新</strong>课了");
});
});
添加
1、使用jQuery添加节点
2、prepend()、append()、after()、before()
3、prependTo()、appendTo()、insertAfter()、insertBefore()
$(document).ready(function(){
$("#btn1").click(function(){
$("#test").prepend($("<span>prepend</span>"));
});
$("#btn2").click(function(){
$("#test").append($("<span>append</span>"));
});
$("#btn3").click(function(){
$("#test").before($("<span>before</span>"));
});
$("#btn4").click(function(){
$("#test").after($("<span>after</span>"));
});
});
删除
1、使用jQuery移除节点
remove(); 删除被选元素本身
可以带一个选择器作为参数
empty(); 删除被选元素子元素
删除类的函数都会返回删除前被选择器选中的对象
var tag = null;
//删除元素
$("#btn1").click(function(){
tag = $("#test").remove();
});
//删除元素的子元素
$("#btn2").click(function(){
$("#test").empty();
});
$("#btn3").click(function(){
$("body").prepend(tag);
});
$("#btn4").click(function(){
tag = $("p").remove("#test");
});
其他操作
1、使用jQuery替换节点
replaceAll()、replaceWith()
2、使用jQuery包裹节点或移除包裹
wrap()、wrapAll()、wrapinner()、unwrap()
3、使用jQuery克隆节点
clone()
jQuery 样式操作
1、addClass(),removeClass;
添加/删除class
2、hasClass();
检查是否有某个指定的class
3、toggleClass():
如果某个指定的class不存在，则添加该class，否则就删除它
jQuery 属性操作
1、attr();
添加或返回指定的属性值
2、removeAttr();
删除指定的属性值
3、val();
获得或设置表单对象的值
4、data();
以json形式返回data-*属性值
jQuery CSS操作
1、$('p').css('font-size');
获得p标签的字体大小
2、$('p').css('font-size',16);
将所有p标签的字体设置成16px
jQuery 遍历操作
1、向上遍历：
parent()、parents()、parentsUntil()、closest()
2、向下遍历：
find()，children()
3、同级遍历：
siblings()、next()、nextAll()、nextUntil()、prev()，prevAll()、prevUntil()
事件
概念：
指可以被计算机识别的某些特定的操作（如：按下按键，移动鼠标）
声明事件（注册handle）===》执行事件（注册handle）
常见的事件系统==》观察者模式
绑定事件
1、直接绑定：$elm.click(function); 常用
2、bind() ：$elm.bind('click',function);
3、live() : $elm.live('click',function);
4、delegate(): $elm.delegate('set','click',function);
5、on : $elm.on('click',function); 常用
例如：$("#test").click(function(){
alert("直接绑定");
});
$("#test").bind('click',function(){
alert("直接绑定");
});
$("#test").on('click',function(){
alert("直接绑定");
});
移除事件
1、$elm.unbind('click',fun);
2、$elm.die('click',fun);
3、$elm.undelegate('set','click',fun);
4、$elm.off('click',fun);
强行触发事件
1、直接触发 ：$elm.click()
2、trigger ：$elm.trigger('click');
省份<select name="province" id="province">
<option value="1">安徽</option>
<option value="2">湖南</option>
</select>
城市<select name="city" id="city">
</select>
<script>
$("#province").change(function(){
var provinceVal = $("#province").val();
alert(provinceVal);
$("#city").html('');//城市的将数据清空
switch(provinceVal){
case "1":
$("#city").append($("<option>合肥</option>"));
$("#city").append($("<option>芜湖</option>"));
$("#city").append($("<option>六安</option>"));
$("#city").append($("<option>淮南</option>"));
$("#city").append($("<option>宣城</option>"));
$("#city").append($("<option>亳州</option>"));
$("#city").append($("<option>淮北</option>"));
break
case "2":
$("#city").append($("<option>长沙</option>"));
$("#city").append($("<option>株洲</option>"));
$("#city").append($("<option>湘潭</option>"));
break;
}
});
$("#province").change();//使用此触发更改操作
</script>
事件对象
所有的事件都会接收一个event参数
参数就是事件对象
有些属性可能就是某些事件特有的
鼠标事件
<input type="button" id="btn" value="鼠标点击事件">
<script>
var eventHandle = function(evt){
console.log(evt.type)
};
// 鼠标事件
$("#btn").on("mouseenter",eventHandle);
$("#btn").on("mouseover",eventHandle);
$("#btn").on("mousedown",eventHandle);
$("#btn").on("mouseup",eventHandle);
$("#btn").on("click",eventHandle);
$("#btn").on("dblclick",eventHandle);
$("#btn").on("mouseout",eventHandle);
$("#btn").on("mouseleave",eventHandle);
//鼠标长按事件
var runId = 0;
$("#btn").on("mousedown",function(evt){
runId = setTimeout(function(){
$("#btn").trigger("holding");
},1000)
});
$("#btn").on("mouseup",function(evt){
clearTimeout(runId);
});
$("#btn").on("holding",function(){
console.log("holding handle");
});
</script>
键盘事件
<input type="text" id="myTest">
<script>
//监听事件
var eventHandle = function(evt){
console.log(evt.which,evt.type);
}
$(document).on("keydown",eventHandle);
$(document).on("keypress",eventHandle);
$(document).on("keyup",eventHandle);
</script>
表单事件
年龄：<input type="text" name="" id="myTest">
<script>
var eventHandle = function(evt){
console.log(evt.which,evt.type);
}
$("#myTest").on("focusin",eventHandle);
$("#myTest").on("change",function(){
if($("#myTest").val()>99){
alert("太大了！");
$("#myTest").val("");
}
});
$("#myTest").on("focusout",eventHandle);
$("#myTest").on("select",eventHandle);
$("#myTest").on("submit",eventHandle);
</script>
jQuery简单特效
使用jQuery处理Ajax
HTTP协议
1、超文本传输协议（HTTP、HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议
2、所有的www文件都必须遵守这个标准
3、设计HTTP最初的目的是为了提供一种发布个接收的HTML页面的方法。
一次HTTP操作称为一个事务，其工作过程可以分为四步：
Ajax请求
1、AJAX = Asynchronous javaScript andXML（异步的JavaScript和XML）
2、AJAX不是新的编程语言，而是一种使用现有标准的新方法
3、AJAX是与服务器交换数据并更新部分网页的艺术，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
jQuery中处理Ajax的方法
1、$(selector).load(URL,data,callback);
为某个对象加载HTML块级内容
2、$.get(URL,callback);
通过GET方法请求一个地址，并返回数据，有getJSON和getScript那两种变形
3、$.post(URL,data.callback)
通过post方法请求地址;
定制化jQuery
扩展jQuery
方法：
1、$.extend:为jQuery本身添加全局函数，在这个函数中，this对象指向jQuery本身
2、$.fn.extend:为jQuery对象添加方法，在这个函数中，this对象指向运行时获取到的jQuery对象数组
扫一扫
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
