一、简介
1、什么是jQuery
jQuery是一个轻量级、快速简洁的javaScript库，能让我们方便快捷的选择元素操作元素属性。
2、下载地址
3、jQuery使用方式
$("div")等价于jQuery("div"),通常使用前者。
二、查找元素
1、选择器
a、基本选择器
$("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(".classname,.classname1,#id1") //组合选择器 $("#id>.classname ") //子元素选择器 $("#id .classname ") //后代元素选择器 $("#id + .classname ") //紧邻下一个元素选择器 $("#id ~ .classname ") //兄弟元素选择器
$("div[id]") //所有含有 id 属性的 div 元素 $("div[id='123']") // id属性值为123的div 元素 $("div[id='!123']") // id属性值不等于123的div 元素 $("div[id='^qq']") // id属性值以qq开头的div 元素 $("div[id='$zz']") // id属性值以zz结尾的div 元素 $("div[id='*bb']") // id属性值包含bb的div 元素 $("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
b、表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") //所有复选框 $(":submit") //所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域 $("input:enable") //可用input元素 $("input:disable") //禁用的input元素 $("input:checked") //所有选中的元素 $("select option:selected") //select中所有选中的option元素
2、筛选器
a、基本筛选器
$('li:first') //第一个元素 $('li:last') //最后一个元素 $("li:even") //索引为偶数的元素 $("li:odd") //索引为奇数的元素 $("li:eq(1)") //给定索引值的元素 $("li:gt(0)") //大于给定索引值的元素 $("li:lt(2)") //小于给定索引值的元素 $(":focus") //当前获取焦点的元素 $(":animated") //正在执行动画效果的元素
b、内容筛选器
$("div:contains('John')") //包含John文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有选择器所匹配的元素 $("td:parent") //含有子元素或者文本的元素
c、可见性筛选器
$("tr:hidden") //所有隐藏的tr元素
$("tr:visible") //所有可见的tr元素
3、过滤器
过滤器行为基本和筛选器一致，但过滤器作为方法来调用，使用更加灵活，因此尽可能使用过滤器而不是筛选器。
a、过滤
$("p").eq(0) //当前操作中第N个jQuery对象,类似索引
$('li').first() //第一个元素
$('li').last() //最后一个元素
$(this).hasClass("test") //元素是否含有某个特定的类,返回布尔值
$('li').has('ul') //包含特定后代的元素
$('li').slice(0,2) //选取一个子集，如果起始是负数，则从后开始。
$("input[type='checkbox']").parent().is("form") //如果其中至少有一个元素符合这个给定的表达式就返回true。
b、查找
//查找方法中都可以带表达式进行过滤
$("div").children() //div中的每个子元素,第一层 $("div").find("span") //div中的包含的所有span元素,后代
$("div").contents() //div下的所有节点，包括文本节点而不是元素。页面有Iframe需要载入的时候用到contents()
$("div").filter("span") //包含span元素的div标签。 $("p").next() //紧邻p元素后的一个同辈元素 $("p").nextAll() //p元素之后所有的同辈元素 $("#test").nextUntil("#test2") //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾 $("p").prev() //紧邻p元素前的一个同辈元素 $("p").prevAll() //p元素之前所有的同辈元素 $("#test").prevUntil("#test2") //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾 $("p").parent() //每个p元素的父元素 $("p").parents() //每个p元素的所有祖先元素,body,html $("#test").parentsUntil("#test2") //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾 $("div").siblings() //所有的同辈元素,不包括自己
$("p").find("span").end() //结束当前链条中的最近的筛选操作，并将匹配筛选之前的元素。
$("li").index("#test") //id为test的li元素，在选择器中的的相对位置索引。如果index()不传参数，则结果为li元素的第一个元素相对于同辈元素的索引位置。
三、操作元素
1、属性操作
a、基本属性操作
$("img").attr("src"); //返回文档中所有图像的src属性值 $("img").attr("src","test.jpg"); //设置所有图像的src属性 $("img").removeAttr("src"); //将文档中图像的src属性删除 $("input[type='checkbox']").prop("checked", true); //选中复选框 $("input[type='checkbox']").prop("checked", false); $("img").removeProp("src"); //删除img的src属性 //需要注意的是：当我们对checkbox,radio,select等选择性的表当取选中状态的时候，不要使用checked属性，而使用prop属性。
b、CSS类操作
$("p").addClass("selected"); //为p元素加上 'selected' 类
$("p").removeClass("selected"); //从p元素中删除 'selected' 类
$("p").toggleClass("selected"); //如果存在就删除,否则就添加
$("p").hasClass("active"); //判断p元素是否存在active的类，返回bool值
c、HTML代码/文本/值
$('p').html(); //返回p元素的html内容
$("p").html("Hello test!"); //设置p元素的html内容
$('p').text(); //返回p元素的文本内容
$("p").text("test"); //设置p元素的文本内容
$("input").val(); //获取文本框中的值
$("input").val("test"); //设置文本框中的内容
2、CSS操作
a、CSS样式操作
$("p").css("color"); //访问查看p元素的color属性
$("p").css("color","red"); //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" }); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
b、位置
$('p').offset() //元素的border外边界相对页面文档（document）左上角的偏移,Object {top: 16, left: 16}
$('p').offset().top
$('p').offset().left
$("p").position() //元素的margin外边界相对于有postion属性的父元素的padding内边界距离,对可见元素有效，Object {top: 2, left: 2}，如果父元素没有设置postion属性会一直向外查找直到body元素，这时就和offset的值相同。
$(window).scrollTop() //获取滚轮滑的高度
$(window).scrollLeft() //获取滚轮滑的宽度
$(window).scrollTop('100') //设置滚轮滑的高度为100
Title
3、文档处理
a、内部插入
$("p").append("test"); //每个p元素内后面追加内容 $("p").appendTo("div"); //p元素追加到div内后 $("p").prepend("Hello"); //每个p元素内前面追加内容 $("p").prependTo("div"); //p元素追加到div内前
b、外部插入
$("p").after("test"); //每个p元素同级之后插入内容 $("p").before("test"); //在每个p元素同级之前插入内容 $("p").insertAfter("#test"); //所有p元素插入到id为test元素的后面 $("p").insertBefore("#test"); //所有p元素插入到id为test元素的前面
c、替换
$("p").replaceWith("Paragraph. "); //将所有匹配的元素替换成指定的HTML或DOM元素 $("Paragraph. ").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素
d、删除
$("p").replaceWith("Paragraph. "); //将所有匹配的元素替换成指定的HTML或DOM元素 $("Paragraph. ").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素
e、复制
$("p").clone() //克隆元素并选中克隆的副本 $("p").clone(true) //布尔值指事件处理函数是否会被复制
四、动态效果
1、基础动态效果
$("p").show() //显示隐藏的匹配元素 $("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为1000毫秒 $("p").hide() //隐藏显示的元素 $("p").toggle(); //切换 显示/隐藏 $("p").slideDown("1000"); //用1000毫秒时间将段落滑下 $("p").slideUp("1000"); //用1000毫秒时间将段落滑上 $("p").slideToggle("1000"); //用1000毫秒时间将段落滑上，滑下 $("p").fadeIn("1000"); //用1000毫秒时间将段落淡入 $("p").fadeOut("1000"); //用1000毫秒时间将段落淡出 $("p").fadeToggle("1000"); //用1000毫秒时间将段落淡入,淡出 $("p").fadeTo("slow", 0.6); //用1000毫秒时间将段落的透明度调整到0.6
Title
hello
Title
出现
隐藏
toggle
helloworld
滑动
Title
淡入淡出
所有的效果都可以添加回调函数callback()。
2、自定义动画效果
语法格式
.animate( properties [, duration ] [, easing ] [, complete ] ) .animate( properties, options ) properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只能动画效果的。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。 duration动画执行的时间. easing动画运动的算法,jQuery库中是默认的时调用 swing. complete回调,动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发.
animate(上)
动画效果观察
内部动画
点击观察动画效果：
五、事件
特殊的--页面载入事件
在页面载入后才开始执行脚本
$(document).ready(function(){ 代码块 }); //简写 $(function() { 代码块 });
1、基本事件类型
$("p").click(); //单击事件 $("p").dblclick(); //双击事件 $("button").mousedown()//当按下鼠标时触发事件 $("button").mouseup() //元素上放松鼠标按钮时触发事件 $("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件 $("p").mouseover() //当鼠标指针位于元素上方时触发事件 $("p").mouseout() //当鼠标指针从元素上移开时触发事件 $("p").foucusin() //当元素获得焦点时，触发 focusin 事件。 $("p").focusout() //当元素失去焦点时触发 focusout 事件。 $("p").hover(fun_mouseover,fun_mouseout) //当鼠标移到元素上时触发fun_mouseover函数，当鼠标移出元素时触发fun_mouseout函数 $("input[type=text]").focus() //元素获得焦点时,触发 focus 事件 $("input[type=text]").blur() //元素失去焦点时,触发 blur事件 $("input").select() //当input 元素中的文本被选择时触发事件 $("input").change() //当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。 $("form").submit() //当提交表单时触发事件 $(window).keydown() //当键盘或按钮被按下时触发事件 $(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次 $("input").keyup() //当按钮被松开时触发事件 $(window).scroll() //当用户滚动时触发事件 $(window).resize() //当调整浏览器窗口的大小时触发事件 $(window).unload() //用户离开页面时
2、事件处理
3.0后基本只是用on替代以前的bind，live，delegate等方法，因此这里仅介绍on方法。on方法支持事件冒泡。
a、事件绑定
.on( events [, selector ] [, data ], handler(eventObject) )表达式
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
$("#elem").click(function(){})
$("#elem").on('click',function(){}) //on方式
$("#elem").on("mouseover mouseout",function(){ }); //多个事件绑定同一个函数
$("#elem").on({ //多个事件绑定不同函数
mouseover:function(){},
mouseout:function(){},
});
$("#elem").one('click',function(){}) //绑定一个一次性的事件处理函数
on绑定多事件
测试一
点击触发：on('click',fn)
测试二
点击触发：on('mousedown mouseup')
测试三
点击触发：on(mousedown:fn1,mouseup:fn2)
b、事件委托
$("#elem").on('click',“p",function(){}) //事件绑定在最上层#elem元素上，当用户触发在p元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
事件委托，通过事件对象区别触发元素
- 点击：触发一
- 点击：触发二
- 点击：触发三
- 点击：触发四
c、事件解除
//假设绑定两个事件$("elem").on("mousedown mouseup",fn) $("elem").off("mousedown") //删除一个事件 $("elem").off("mousedown mouseup") //删除所有事件 $("elem").off() //删除所有事件 //假设绑定两个事件$("div").on("mousedown","p,a",fn) $("div").off( "click", "**" ) //删除所有委托事件 $("div").off( "click", "p" ) //删除p元素委托事件
3、事件对象
$("p").click(function(event){
alert(event.type); //"click"
});
(evnet object)属性方法：
event.pageX //事件发生时，鼠标距离网页文档（document)左上角的水平距离
event.pageY //事件发生时，鼠标距离网页文档（document）左上角的垂直距离
event.screenX //事件发生时，鼠标距离屏幕左上角的水平距离。
event.screenY
event.clientX //事件发生时，鼠标距当前盒子左上角的水平距离。
event.clientY
event.type //事件的类型
event.which //按下了哪一个键
event.timeStamp //这个属性返回事件触发时距离1970年1月1日的毫秒数。时间戳
event.data //在事件对象上绑定数据，然后传入事件处理函数
event.target //事件针对的网页元素，js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
event.preventDefault() //阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() //停止事件向上层元素冒泡
event.currentTarget //冒泡前的当前触发事件的DOM对象, 等同于this.
4、自定义事件
。。待补充
六、扩展
1、扩展方法
//方式一 jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); $("input[type=checkbox]").check(); $("input[type=radio]").uncheck();
2、扩展jQuery功能
//方式二 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, //三元运算 max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); //2 $.max(4,5); //5
Title
111
222
七、jQuery工具函数
常用方法
$.trim() //去除字符串两端的空格 $.each() //遍历一个数组或对象，for循环,return false能跳出each循环 $.inArray() //返回一个值在数组中的索引位置，不存在返回-1
其他方法 $.grep() //返回数组中符合某种标准的元素 $.extend() //将多个对象，合并到第一个对象 $.makeArray() //将对象转化为数组 $.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等 $.isArray() //判断某个参数是否为数组 $.isEmptyObject() //判断某个对象是否为空(不含有任何属性) $.isFunction() //判断某个参数是否为函数 $.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象 $.support() //判断浏览器是否支持某个特性
八、实例部分
Title
Title
内容一
内容二
内容三
Title
床前明月光
疑是地上霜
我是郭德纲
Title
主机名
IP
端口
操作
c1.com
1.1.1.1
8888
Edit
c2.com
1.1.1.1
8888
Edit
c3.com
1.1.1.1
8888
Edit
4.com
1.1.1.1
8888
Edit
Title
Title
<
>
放大镜
转载于:https://www.cnblogs.com/tkqasn/p/5775816.html