jQuery
程序员文章站
2024-03-05 18:09:37
...
一.jQuery 的下载和安装
1.http://jquery.com/ 下载
2.版本
（1）完整版 : jquery-3.3.1.js -->学习版本(学习源码 想高手学习是最好学习方法)
（2）压缩版 : jquery-3.3.1.min.js -->开发版本(压缩版，减少传输)
3.安装
下载完建一个JS文件夹,将下载的源码放进去
引用的时候加上路径即可
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>二.DOM 对象和 jQuery 包装集对象
原始的 Dom 对象只有 DOM 接口提供的方法和属性， 通过 js 代码获取的对象都是 dom 对象；而通过 jQuery获取的对象是 jQuery 包装集对象， 简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提供的方法。
DOM与IQuery的相互转化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="mybtn1">button</button>
<script type="text/javascript">
// jquery对象包装集
var jqObj = $('#mybtn1');
console.log(jqObj);
jqObj = jQuery('#mybtn1');
console.log(jqObj);
// 原生js对象
var domObj = document.getElementById('mybtn1');
console.log(domObj);
// jq->dom
var jqToDom = jqObj[0]; // ***常用
jqToDom = jqObj.get(0);
console.log(jqToDom);
// dom->jq
var domToJq = $(domObj); // ***常用
domToJq = jQuery(domObj);
console.log(domToJq);
</script>
</body>
</html>
三.jQuery 选择器
相关的API参考:http://jquery.cuishifeng.cn/index.html
1. 基础选择器 Basics
2. 层次选择器 Hierarchy
3. 表单选择器 Forms
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq选择器</title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*$(document).ready(function(){
alert('aaaaa');
});*/
// 页面加载完成以后
$(function(){
// id选择器
var jqobj = $('#mydiv1'); // 一个包装集
console.log(jqobj);
// class 选择器
var jqobjs = $('.beau'); // 一个包装集集合
console.log(jqobjs);
console.log("=======================");
// 遍历jquery包装集集合
for(var i=0;i<jqobjs.length; i++){
console.log(jqobjs[i]); // dom对象
console.log($(jqobjs[i]));
}
console.log("=======================");
// each方法属于jquery对象的方法， this指代集合中当前的元素，this是一个dom对象
jqobjs.each(function(){
console.log(this); // dom对象
console.log($(this));
})
// element
jqobjs = $('div');
console.log(jqobjs.length);
jqobjs = $('*');
console.log(jqobjs.length);
// 分组选择器
jqobjs = $('div,p');
console.log(jqobjs.length);
})
</script>
</head>
<body>
<div id="mydiv1"></div>
<div class="beau"></div>
<div class="beau"></div>
<p></p>
</body>
</html>
四.jQuery DOM 操作
常用的从几个方面来操作， 查找元素（选择器已经实现） ；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点； 删除、添加、修改、设定节点的 CSS 样式；动画操作等。 注意： 以下的操作方式只适用于 jQuery 对象。
1. 操作元素的属性
a.获取属性
b.设置属性
c.移除属性
2. 操作元素的样式
对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
1） css({‘样式名’ :’样式值’ ,’样式名 2’ :’样式值 2’ })
例： css({"background-color":"red","color":"#fff"});
2） css(“样式名” ,”样式值” )
例： css('color','white')
3. 操作元素的内容
对于元素还可以操作其中的内容，例如文本，值，甚至是 html。
4. 创建元素
在 jQuery 中创建元素很简单，直接使用核心函数即可
5. 添加元素
6. 删除元素
7. 遍历元素
each()
$(selector).each(function(index,element)) :遍历元素,参数 function 为遍历时的回调函数，index 为遍历元素的***，从 0 开始。element 是当前的元素，此时是 dom 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动块</title>
<style type="text/css">
div{
height: 100px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 80px;
left: 10px;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var obj = $('#mydiv1');
var btn1 = $('#btn1');
var btn2 = $('#btn2');
var btn3 = $('#btn3');
var btn4 = $('#btn4');
var btn5 = $('#btn5');
btn1.click(function(){
obj.css('left','1430px');
})
btn2.on('click',function(){
obj.css('left','0px');
});
btn3.on('click',function(){
// 让div慢慢向右边移动， left越来越大， 1430px
//console.log(old);
var id = window.setInterval(function(){
var old = parseInt(obj.css('left')); // 100px --> 100
if(old>1430){
window.clearInterval(id);
}else{
obj.css('left',(old+3) + 'px');
}
},5);
});
btn4.on('click',function(){
// 让div慢慢向左边移动， left越来越小， 10px
//console.log(old);
var id = window.setInterval(function(){
var old = parseInt(obj.css('left')); // 100px --> 100
if(old<10){
window.clearInterval(id);
}else{
obj.css('left',(old-3) + 'px');
}
},5);
});
btn5.on('click',function(){
// 让div慢慢向两边移动，
var mytime = 5;
var mylength = 3;
setInterval(function(){
var old = parseInt(obj.css('left')); // 100px --> 100
if(old>1430){
mylength *= -1;
}else if(old<100){
mylength *=-1;
}
obj.css('left',old+mylength + 'px');
},mytime);
});
})
</script>
</head>
<body>
<button id="btn1">——></button>
<button id="btn2"><——</button>
<button id="btn3">--></button>
<button id="btn4"><--</button>
<button id="btn5"><--></button>
<div id="mydiv1"></div>
</body>
</html>
五.Jquery 事件
相关的API参考:http://jquery.cuishifeng.cn/index.html
六.初见ajax(Asynchronous JavaScript + XML)
2005年 Jesse James Garrett 发表了一篇文章，标题为： “Ajax： A newApproach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫： Ajax，是 Asynchronous JavaScript + XML 的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。
学会在eclipse中写jQuery项目,引入Tomcat
推荐阅读
-
springMVC框架下JQuery传递并解析Json数据
-
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
-
使用jQuery Autocomplete(自动完成)插件 博客分类： JavaScript，jQuery jqueryautocoomplete
-
ASP.NET开发者使用jQuery应该了解的几件事情
-
Asp.net利用JQuery弹出层加载数据代码
-
在Asp.net中使用JQuery插件之jTip代码
-
struts2+jsp+jquery+Jcrop实现图片裁剪并上传实例
-
asp.net jQuery Ajax用户登录功能的实现
-
asp.net+jquery Gridview的多行拖放， 以及跨控件拖放
-
php+mysql+jquery实现简易的检索自动补全提示功能