jQuery基本知识
jquery基本操作笔记
jq和js
可以共存,不能混用;
1
2
3
4
5
6
|
$( '.box' ).css( 'background' , 'red' ); $( ".box" ).css({ color: "#ff0011" , background: "blue" }); $( 'li:eq(2)' ).css( 'background' , 'red' ); //:first选择 $( 'li:odd' ).css( 'background' , 'red' ); //even奇数行,odd偶数行 $( 'li' ).filter( '.box' ).css( 'background' , 'red' ); filter过滤、筛选; $( 'li' ).filter( '[title=hello]' ).css( 'background' , 'red' ); |
方法函数化:
1
2
3
4
5
6
7
8
9
|
window.onload = function (){}; $( function (){}); function $(){} innerHTML = 123; html(123) function html(){} onclick = function (){}; click( function (){}) function click(){} |
1
2
3
|
$( '#div1' ).click( function (){ alert( $( this ).html() ); }); |
jquery中的this的写法是 $(this) ;html() 因为方法函数法的思想的存在,() 是不能省去的,运行函数;这在jquery中很常见;
js和jquery的关系:
可以互存,不能混用;
1
2
3
4
5
6
7
8
|
$( function (){ $( '#div1' ).click( function (){ //alert( $(this).html() ); //jq的写法; //alert( this.innerHTML ); //js的写法;这样写也是正确的; alert( $( this ).innerHTML ); //错误的;前面是jquery,后面是js,混用了,不允许; alert( this .html() ); //错误的;前面是js,后面是jquery,混用了,不允许; }); }); |
链式操作:
1
2
3
4
5
6
7
8
9
10
11
|
$( function (){ /*var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv.click(function(){ alert(123); });*/ $( '#div1' ).html( 'hello' ).css( 'background' , 'red' ).click( function (){ alert(123); }); }); |
建议熟悉了,再写链式写法;
取值和赋值合体:
赋值和取值用的同一种方法,只不过是通过有没有参数来决定是取值还是赋值;
1
2
3
4
5
6
7
8
|
$( function (){ //oDiv.innerHTML = 'hello'; //赋值 //alert( oDiv.innerHTML ); //取值 //$('#div1').html('hello'); //赋值 //alert( $('#div1').html() ); //取值 css( 'width' , '200px' ) //设置width是200px; css( 'width' ) //获取width的值; }); |
取值和赋值:获取的时候只能获取一个,赋值的时候赋值到所有的;
1
2
3
4
|
$( function (){ //alert( $('li').html() ); //当一组元素的时候,取值是一组中的第一个;会弹出内容:aaa $( 'li' ).html( 'hello' ); //当一组元素的时候,赋值是一组中的所有元素 }); |
$()下的常用方法
attr()
1
2
3
4
5
|
$( function (){ //alert($('div').attr('title')); 获取title属性 $( 'div' ).attr( 'title' , '456' ); //设置title $( 'div' ).attr( 'class' , 'box' ); //设置class }); |
filter:过滤
not: filter的反义词
1
2
3
4
|
$( function (){ //$('div').filter('.box').css('background','red'); //只带有box的才会被选择 $( 'div' ).not( '.box' ).css( 'background' , 'red' ); //不带有box的才会选择;not和filter是反义词 }); |
has和filter的区别
has是包含的意思,选择的是元素里面的东西;
而filter针对的元素自身的选择;
1
2
3
4
5
|
$( function (){ //$('div').has('span').css('background','red'); //$('div').has('.box').css('background','red'); //has是选择元素里面的东西,不能选择到第二个div $( 'div' ).filter( '.box' ).css( 'background' , 'red' ); //filter是针对元素自身的;只会选择到第二个div }); |
next和prev:
next选择下一个兄弟节点;
prex选择上一个兄弟节点;
find 查找当前元素下所有的后代元素;
eq() 一组中的第几个;
index() 一组元素的索引;通过一组索引,来控制另外一个索引;
1
2
3
|
$( function (){ alert( $( '#h' ).index() ); //索引就是当前元素在所有兄弟节点中的位置; }); |
选项卡:
原生js和jquery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
window.onload = function (){ var oDiv = document.getElementById( 'div1' ); var aInput = oDiv.getElementsByTagName( 'input' ); var aCon = oDiv.getElementsByTagName( 'div' ); for ( var i=0;i<aInput.length;i++){ aInput[i].index = i; aInput[i].onclick = function (){ for ( var i=0;i<aInput.length;i++){ aInput[i].className = '' ; aCon[i].style.display = 'none' ; } this .className = 'active' ; aCon[ this .index].style.display = 'block' ; }; } }; |
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( $(this).index() ).css('display','block');
});
});
1
2
3
4
5
6
7
8
9
10
|
<body> <div id= "div1" > <input class = "active" type= "button" value= "1" /> <input type= "button" value= "2" /> <input type= "button" value= "3" /> <div style= "display:block" >111111</div> <div>222222</div> <div>333333</div> </div> </body> |
这里的jquery是根据js的思路来编写的;
也可以用其他的思路来做这个选项卡,用到siblings()等;
addClass和removeClass
1
2
3
4
|
$( function (){ $( 'div' ).addClass( 'box2 box4' ); $( 'div' ).removeClass( 'box1' ); }); |
width() innerWidth() outerWidth() 获取元素的宽和区别:
1
2
3
4
5
6
|
$( function (){ alert( $( 'div' ).width() ); //width alert( $( 'div' ).innerWidth() ); //width + padding alert( $( 'div' ).outerWidth() ); //width + padding + border alert( $( 'div' ).outerWidth( true ) ); //width + padding + border + margin }); |
insertBefore() insertAfter()
注意:insertBefore是剪切的功能,不是复制的功能;
1
2
3
4
5
6
7
8
9
|
$( function (){ //$('span').insertBefore( $('div') ); //将span调整到div的前面,jq中的insertBefore和js中的insertBefore是一样的;具备剪切的功能,而不是复制的功能; //$('div').insertAfter( $('span') ); //将div放在span的后面; //$('div').appendTo( $('span') ); //和js中的appendChildren是一样的;作用是把一个节点添加到指定节点最后的位置; //$('div').prependTo( $('span') ); //原生js中没有,作用是把一个节点添加到指定节点最开始的位置; //insertBefore和before的区别 :后续操作变了;主要是我们写链式操作会有影响; //$('span').insertBefore( $('div') ).css('background','red'); $( 'div' ).before( $( 'span' ) ).css( 'background' , 'red' ); }); |
remove() 删除节点
1
2
3
|
$( function (){ $( 'div' ).remove(); }); |
on() off() 事件的写法:
off取消事件;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$( function (){ /*$('div').click(function(){ alert(123); });*/ /*$('div').on('click',function(){ //支持多个事件,支持系统事件和自定义事件 alert(123); });*/ /*$('div').on('click mouseover',function(){ //多个事件,中间用空格 alert(123); });*/ /*$('div').on({ 'click' : function(){ //中间用冒号 alert(123); }, 'mouseover' : function(){ alert(456); } });*/ //点击弹出123.移入弹出456 说明on还是很灵活的 $( 'div' ).on( 'click mouseover' , function (){ alert(123); $( 'div' ).off( 'mouseover' ); //执行后,mouseover事件会被关闭 }); }); |
scrollTop() 获取和设置滚动距离
1
2
3
4
5
|
$( function (){ $(document).click( function (){ alert( $(window).scrollTop() ); //获取滚动距离 }); }); |
编写弹窗效果:
首先,在DOM中创建元素是非常容易的事情;
1
2
|
var oDiv = $( '<div>div</div>' ); //创建div元素和内容 $( 'body' ).append( oDiv ); |
弹窗效果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$( function (){ $( '#input1' ).click( function (){ //动态创建元素和内容 var oLogin = $( '<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>' ); //中间不能有空格 $( 'body' ).append( oLogin ); //插入元素 //让弹窗居中 oLogin.css( 'left' , ($(window).width() - oLogin.outerWidth())/2 ); //设置left值 oLogin.css( 'top' , ($(window).height() - oLogin.outerHeight())/2 ); //设置top值 $( '#close' ).click( function (){ oLogin.remove(); //移除节点 }); //在调整窗口大小事件和滚动事件,调整弹出窗的位置; $(window).on( 'resize scroll' , function (){ //在调整窗口大小事件和滚动事件 oLogin.css( 'left' , ($(window).width() - oLogin.outerWidth())/2 ); oLogin.css( 'top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() ); //top值要注意加上滚动距离 }); }); }); |
ev pageX which
preventDefault stopPropagation
one()
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$( function (){ /*$('div').click(function(ev){ //ev : jq中直接使用,是兼容后的event对象 //ev.pageX(鼠标坐标-->相对于文档的) js中是使用clientX(相对于可视区域的) //ev.which : js中的keyCode ev.preventDefault(); //阻止默认事件 ev.stopPropagation(); //阻止冒泡的操作 return false; //阻止默认事件 + 阻止冒泡的操作 });*/ $( 'div' ).one( 'click' , function (){ //one-->只执行事件一次 alert(123); }); }); |
offset() position()
1
2
3
4
5
|
$( function (){ //div2.offsetLeft //alert( $('#div2').offset().left ); //获取到屏幕的左距离 offset().left offset.top() alert( $( '#div2' ).position().left ); //到有定位的父级的left值,把当前元素转化成类似定位的形式,注意是不算margin的 }); |
parent() offsetParent() 获取有定位的父级
parent() : 获取父级,不管父级是否有定位; 注意这里没有加s,不是parents,jq中还有parents()方法,见下
offsetParent() : 获取有定位的父级
1
2
3
4
5
6
|
$( function (){ //parent() : 获取父级 //offsetParent() : 获取有定位的父级 //$('#div2').parent().css('background','blue'); $( '#div2' ).offsetParent().css( 'background' , 'blue' ); }); |
val() 获取元素的value值;
size() 获取一组元素的长度;像length;
each() jq中的循环;原生for循环的加强版
1
2
3
4
5
6
7
8
|
$( function (){ //alert( $('input').val() ); 获取value值 //$('input').val(456); 赋值value值 alert( $( 'li' ).size() ); //4 获取一组元素的长度;像length $( 'li' ).each( function (i,elem){ //一参:下标 二参 : 每个元素 $(elem).html(i); }); }); |
拖拽jquery实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$( function (){ var disX = 0; var disY = 0; $( 'div' ).mousedown( function (ev){ disX = ev.pageX - $( this ).offset().left; //存储距离 disY = ev.pageY - $( this ).offset().top; $(document).mousemove( function (ev){ $( 'div' ).css( 'left' ,ev.pageX - disX); $( 'div' ).css( 'top' ,ev.pageY - disY); }); $(document).mouseup( function (){ $(document).off(); //鼠标弹起的时候取消事件 }); return false ; //阻止默认事件和冒泡 }); }); |
hover() 模拟css中的hover,鼠标移入移除;
hover 鼠标移入和鼠标移除结合的方法;
hover(function(){},function(){})
Show() hide() 接受一个参数- -> 时间(ms) 长,宽,透明度都要变化
fadeIn() fadeOut() 淡出效果和淡出效果 改变透明度
fadeTo() 指定到一个范围,有两个参数,第一个是时间,第二个是透明度值
1
|
$( '#div2' ).fadeTo(1000,0.5); |
slideDown() slideUp() 向下展开,向上卷起;
get()方法
1
2
3
4
5
6
7
8
9
10
11
|
$( function (){ //document.getElementById('div1').innerHTML //alert( $('#div1').get(0).innerHTML ); get需要标注下标;将jquery转成原生js /*for(var i=0;i<$('li').get().length;i++){ //这里通过get()转成js,这里的length相对于js的 $('li').get(i).style.background = 'red'; }*/ for ( var i=0;i<$( 'li' ).length;i++){ //这里的length是JQ中的属性,也是使用正确的; $( 'li' ).get(i).style.background = 'red' ; //$('li')[i].style.background = 'red'; 得到元素后,后面加一个中括号,写成下标的形式,也就自动转成原生js的形式了;这是一种偷巧的写法; } }); |
outerWidth与原生的区别:
1
2
3
4
|
$( function (){ //alert( $('#div1').get(0).offsetWidth ); //这里原生js,如果把div1设置为隐藏,获取的值为0; alert( $( '#div1' ).outerWidth() ); //不管是显示和隐藏的,都可以获取到值; }); |
text() 会获取所有的内容(特例),不会获取到标签,而html会获取到标签;
1
2
3
4
5
|
$( function (){ //alert( $('div').html() ); //alert( $('div').text() ); //会获取所有的内容(特例) $( 'div' ).text( '<h3>h3</h3>' ); //在浏览器中会输出纯文本<h3>h3</h3> }); |
remove()和detach()的区别:
//remove方法删除元素的时候会把元素的操作行为也删除掉;
//detach() : 跟remove方法一样,只不过会保留删除这个元素的操作行为
1
2
3
4
5
6
7
|
$( function (){ $( 'div' ).click( function (){ alert(123); }); var oDiv = $( 'div' ).detach(); //这里如果用remove(),恢复的时候,点击行为会无效 $( 'body' ).append( oDiv ); }); |
$() : $(document).ready() 与window.onload=function(){}的区别:
1
2
3
4
5
6
|
$( function (){ //等DOM加载完就可以执行了 , 性能要好 }); 是 $(document).ready( function (){ }); 的简写; |
window.onload = function(){}; //等图片和flash等加载完才执行;
//DOMContentLoaded
parents() closest()
//parents() : 获取当前元素的所有祖先节点,参数就是筛选功能
//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
1
2
3
4
5
|
$( function (){ //$('#div2').parents().css('background','red'); //获取到所有祖先节点 div1,body,html //$('#div2').parents('.box').css('background','red'); //获取到class为box的祖先元素 $( '#div2' ).closest( '.box' ).css( 'background' , 'red' ); }); |
siblings() 获取元素的所有兄弟节点 ;
nextAll() 获取下面所有的兄弟节点;
preAll() 获取上面所有的兄弟节点;
parentsUntil() nextUntil() prevUntil()
//siblings() : 找所有的兄弟节点,参数也是筛选功能
//nextAll() : 下面所有的兄弟节点,参数也是筛选功能
//prevAll() : 上面所有的兄弟节点
//Until() : 截止
1
2
3
|
$( function (){ $( 'span' ).nextUntil( 'h2' ).css( 'background' , 'red' ); }); |
clone() 克隆节点:
1
2
3
4
5
6
7
8
9
|
$( function (){ //$('div').appendTo( $('span') ); //剪切行为 //$('span').get(0).appendChild( $('div').get(0) ); //clone() : 可以接收一个参数 ,作用可以复制之前的操作行为 $( 'div' ).click( function (){ alert(123); }); $( 'div' ).clone( true ).appendTo( $( 'span' ) ); //参数true作用可以复制之前的操作行为 }); |
wrap() wrapAll() wrapInner() unwrap() 包装,包装方法
在外面包裹一下
$('span').wrapInner('<div>'); //在span外包装div
wrapAll() 整体包装:
//wrap() : 包装
//wrapAll() : 整体包装; 会影响结构
//wrapInner() : 内部包装;
//unwrap() : 删除包装 ( 删除父级 : 不能删除body )
1
2
3
4
|
$( function (){ //$('span').wrapInner('<div>'); div在span里面了 $( 'span' ).unwrap(); }); |
add()
1
2
3
4
5
6
7
|
$( function (){ /*var elem = $('div'); var elem2 = elem.add('span'); elem.css('color','red'); elem2.css('background','yellow');*/ $( 'li' ).slice(1,4).css( 'background' , 'red' ); }); |
slice()
$('li').slice(1,4).css('background','red');
第一个参数是起始位置,4是结束位置(选中的不包括结束位置);
serialize() serializeArray() 数据串连化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$( function (){ //console.log($('form').serialize()); //string : a=1&b=2&c=3 console.log( $( 'form' ).serializeArray() ); [ { name : 'a' , value : '1' }, { name : 'b' , value : '2' }, { name : 'c' , value : '3' } ] }); </script> </head> <body> <form> <input type= "text" name= "a" value= "1" > <input type= "text" name= "b" value= "2" > <input type= "text" name= "c" value= "3" > </form> |
jquery中的animate()
//animate() :
//第一个参数 : {} 运动的值和属性
//第二个参数 : 时间(运动快慢的) 默认 : 400 毫秒
//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(缓冲,慢快慢) linear(匀速) ) 默认是缓冲(慢快慢)
//第四个参数 : 回调函数;运行结束后,回调函数
1
2
3
4
5
6
7
8
|
$( function (){ $( '#div1' ).click( function (){ $( this ).animate({width : 300 , height : 300} , 3000 , 'linear' , function (){ alert(123); //回调函数,也可以用链式操作来写; }); $( '#div2' ).animate({width : 300 , height : 300} , 3000 , 'swing' ); }); }); |
链式操作来写:先宽后高;和上述的回调函数效果一致;
1
|
$( this ).animate({width : 300} , 2000).animate({height : 300} , 2000); |
Stop()方法:
1
2
3
4
5
6
7
|
$( '#div2' ).click( function (){ //$('#div1').stop(); //默认 : 只会阻止当前运动(当前步骤) //$('#div1').stop(true); //阻止所有后续的运动 //$('#div1').stop(true,true); //立即停止到当前步骤指定的目标点,当前步骤的目标点 // stop不能做到,点一下-->直接到最后的目标点-->用finish() $( '#div1' ).finish(); //立即停止到所有指定的目标点,到最后的目标点 }); |
delay()
延迟
jquery中事件委托:
delegate() undelegate()
1
2
3
4
5
6
7
8
9
|
$( function (){ /*$('li').on('click',function(){ this.style.background = 'red'; });*/ $( 'ul' ).delegate( 'li' , 'click' , function (){ //事件委托 this .style.background = 'red' ; $( 'ul' ).undelegate(); //阻止事件委托 }); }); |
trigger() 主动触发
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$( function (){ /*$('#div1').on('click',function(){ alert(123); }); $('#div1').trigger('click'); //主动触发*/ $( '#div1' ).on( 'show' , function (){ alert(123); }); $( '#div1' ).on( 'show' , function (){ alert(456); }); $( '#div1' ).trigger( 'show' ); }); |
事件细节:
1
2
3
4
5
6
7
|
$( function (){ $( '#div1' ).on( 'click' ,{name: 'hello' }, function (ev){ //alert(ev.data.name); 这里的ev.data等于{name:'hello'}这个整体,ev.data.name就是hello //alert( ev.target ); 当前操作的事件源,全兼容的 alert( ev.type ); 当前操作事件类型 }); }); |
jquery的工具方法:
我们前面的都是$().css() $().html() $().val() : 只能给JQ对象用;
而实际上,我们还存在另外一种写法: 不仅可以给jquery用,也可以给原生js用;
$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用,也可以给原生JS用 : 叫做工具方法
type()
trim()
1
2
3
4
5
6
7
8
|
$( function (){ //var a = null; //$.type() : 也是判断类型,功能更加强大,能判断出更多的类型 //alert( typeof a ); 原生js的判断变量类型 //alert( $.type(a) ); 用$.type()判断出更多类型,功能更强大 var str = ' hello ' ; alert( '(' +$.trim(str)+ ')' ); //$.trim()去除前后的空格 }); |
inArray() 类似于 indexOf
proxy() 改变this指向;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$( function (){ //var arr = ['a','b','c','d']; //alert( $.inArray('b',arr) ); //b在array这个数组中的位置;若没有会返回-1;有的话就返回位置 //proxy() : 改变this指向的 function show(n1,n2){ alert(n1); alert(n2); alert( this ); } //show(); //$.proxy(show , document)(); //show的this指向document //$.proxy(show , document,3,4)(); //对于传参,传参可以这样传 ////$.proxy(show , document,3)(4); //也可以这样混着传参 //jquery中为什么要这样传参呢? //$(document).click( $.proxy(show,window)(3,4) ); //如果这样传参,刷新就直接调用函数 $(document).click( $.proxy(show,window,3,4) ); //这样传参,就是在click后才会调用函数,而不会直接调用; }); |
$.noConflict() 防止冲突
//$ , jQuery $=jQuery 一回事 $不是jQuery独有的
1
2
3
4
5
6
|
//noConflict() : 防止冲突的 var aaa= $.noConflict(); var $ = 10; aaa( function (){ aaa( 'body' ).css( 'background' , 'red' ); }); |
parseJSON() 把字符串转换成json类型
1
2
|
var str = '{"name":"hello"}' ; //字符串必须是严格的JSON格式 alert($.parseJSON( str ).name); //把字符串转换成json |
makeArray()
1
2
3
4
|
window.onload = function (){ var aDiv = document.getElementsByTagName( 'div' ); //只是集合,不是真正的数组,我们叫做类数组(类似于数组) $.makeArray(aDiv).push(); //通过 $.makeArray(aDiv) 把 类数组 转换成 真正的数组 }; |
jquery中使用ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script> /*$.ajax({ url : 'xxx.php', data : 'name=hello&age=20', type : 'POST', //默认是get success : function(data){ //请求成功以后的回调函数 alert(1); }, error : function(){ //请求失败之后 alert(2); } });*/ $.get( 'xxx.php' , function (){ //ajax的get请求可用get(),第一个是地址,第二个是成功后回调 }); // $.get()和$().get()是有区别的;前者是ajax的get请求方法,后者是将jQuery对象转换成js原生对象 $.post( 'xxx.php' , function (){ }); $.getJSON( 'xxx.php?callback=?' , function (data){ //请求json类型的数据,支持jsonp的形式:指定?callback=? data }); 随机({}); </script> |
jQuery中的插件
扩展插件
//$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy()
//$.fn.extend : 扩展到JQ对象下的插件形式 $().xxx() $().yyy()
用插件实现去掉左空格
1
2
3
4
5
6
7
|
$.extend({ leftTrim : function (str){ return str.replace(/^\s+/, '' ); //这里用正则来去掉左空格 } }); var str = ' hello ' ; alert( '(' +$.leftTrim(str)+ ')' ); //利用leftTrim去掉左空格 |
1
2
3
4
5
6
7
8
9
|
$.extend({ //用extend,json的写法,可以扩展多个 leftTrim : function (str){ return str.replace(/^\s+/, '' ); //这里用正则来去掉左空格 }, rightTrim : function (){}, aaa : function (){ alert(1); } }); |
$.fn.extend({ //也是写成json形式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
drag : function (){ //这里扩展拖拽 //this : $('#div1') var disX = 0; var disY = 0; var This = this ; //这里将this存入变量This中; this .mousedown( function (ev){ disX = ev.pageX - $( this ).offset().left; disY = ev.pageY - $( this ).offset().top; $(document).mousemove( function (ev){ This.css( 'left' , ev.pageX - disX); This.css( 'top' , ev.pageY - disY); }); $(document).mouseup( function (){ $( this ).off(); }); return false ; }); }, aaa : function (){ alert(2); } }); |
1
2
3
4
5
6
7
8
9
|
//$.trim() //$.leftTrim() /*var str = ' hello '; alert( '('+$.leftTrim(str)+')' );*/ $( function (){ $( '#div1' ).drag(); //这里调用上面插件的扩展 }); $.aaa(); // 1 $().aaa(); //2 |
jQuery基本知识的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- Jquery:小知识;
Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...
- jQuery基本知识体系图
在w3school学习了jQuery,觉得看了一遍,代码敲了一遍,大概的知识点记住了,不过觉得还是把这些知识点,放到一张图上,形成自己的jQuery的知识体系.能做到,一看到jQuery,脑海就浮现j ...
- JQuery基础知识(1)
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- JQuery基础知识(2)
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- JQuery基本知识(3)
JQuery基本知识(3) 一.JQuery拥有可操作HTML元素和属性的强大方法. 1.JQuery DOM操作(DOM文档对象模型) 获取内容的方法: text():设置或返回所选元素的文本内容 ...
- jQuery常用知识总结
jQuery常用知识总结 简介 选择器 属性操作 jQuery() each event事件 jQuery扩展 一.简介 What is jQuery jQuery is fast small and ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- HTML5 与 CSS3 jQuery部分知识总结
一. HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...
随机推荐
- Python科学计算之Pandas
Reference: http://mp.weixin.qq.com/s?src=3×tamp=1474979163&ver=1&signature=wnZn1UtW ...
- 外显率&显性上位
外显率(penetrance): 外显率是指条件下,群体中某一基因型(通常在杂合子状态下)个体表现出相应表型的百分率.外显率等于100%时称为完全外显(complete penetranc)低于100 ...
- 程序启动缓慢-原来是hbm.xml doctype的原因
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "h ...
- CCNA网络工程师学习进程(9)GNS3的安装与配置
本节将简单介绍一下网络设备模拟软件GNS3的配置和使用方法. (1)GNS3概述: GNS3是一款具有图形化界面可以运行在多平台(包括Windows, Linux, and MacOS ...
- Bootstrap入门(二十六)JS插件3:滚动监听
很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...
- 设计模式之单一职责原则(SRP)
自己之前写过一些关于设计模式的博客,但是大部分都写得比较匆忙.现在正好趁年前有时间,笔者打算好好地整理一下自己这块知识结构.开篇的第一个原则就是设计原则里面最简单的一个原则--单一职责原则. 想必大家 ...
- Docker 1.13 管理命令
1.12 CLI 的问题 Docker1.12 命令行接口(CLI)有40多个顶级命令,这些命令存在以下问题: 没有归类组织,这让docker 新手很难学习: 有些命令没有提供足够的上下文环境,以至于 ...
- Biztalk AS2开发经验总结
一. 准备证书 4 1. 升级win2008 R2证书服务 4 2. 申请证书 6 二. 配置证书 13 1. 为AS2配置证书 13 2. ...
- BOM之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- 特殊字符html,css转义大全
使用方法: 这些字符属于unicode字符集,所以,你的文档需要声明为UTF-8: 下面符号列表的后面有两列编号,它们并不太一样,第一列是用于html的,你需要在前面加上&#符号: 第二列可以 ...