前端笔记
前端常用插件
css插件:bootsrrap
使用bootstrap步骤：
- 访问
https://www.bootcss.com/ - 点击 bootstrap3 中文文档
- 选择 起步
- 下载 bootstrap 核心 css 文件
- 在我们的html文件中引入该文件
- 查看 全局css样式 文档
js插件:jquery
jquery
属性:
属性:
attr(name|pro|key,val|fn)
查找，修改，添加元素的属性值
removeAttr(name)
删除元素的某个属性
css类：
addClass(class|fn)
添加类名
removeClass([class|fn])
删除类名
toggleClass(class|fn[,sw])
类名切换
类名如果存在就删除
类名如果不存在添加这个类名。
HTML代码\文本\值
html([val|fn])
修改查询HTML
类似js对象的 .innerTHML
取得第一个匹配元素的html内容
text([val|fn])
类似js对象的 .innerText
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
val([val|fn|arr])
类似js中的 .value
适用对象为input
获得匹配元素的当前值
CSS
css(name|pro|[,val|fn])
批量修改元素的样式。
eg: $("xxx").css({"user-select", "none"})
位置
offset([coordinates])
获取匹配元素在当前视口的相对偏移。
position()
获取匹配元素相对父元素的偏移。
文档处理
内部插入：
append(content|fn)
向每个匹配的元素内部追加内容。
A.append(B) 即为 B加到A中内容的后面
appendTo(content)
反向添加
A.appendTo(B) 即为 A加到B中内容的后面
prepend(content|fn)
类似append添加到指定元素内容后 这个是添加到指定元素的内容前
prependTo(content)
反向添加
外部插入：
after(content|fn)
在每个匹配的元素之后插入内容。
before(content|fn)
在每个匹配的元素之前插入内容。
insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
包裹
wrap(html|ele|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来。
eg:
把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");
unwrap()
移出元素的父元素。
取代父元素的位置
wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来
eg:
用一个生成的div将所有段落包裹起来
$("p").wrapAll("<div></div>");
wrapInner(html|ele|fn)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
替换
replaceWith(content|fn)
将所有匹配的元素替换成指定的HTML或DOM元素。
eg:
用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。
HTML 代码:
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
jQuery 代码:
$('.third').replaceWith($('.first'));
结果：
<div class="container">
<div class="inner second">And</div>
<div class="inner first">Hello</div>
</div>
replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。
eg:
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
删除
empty()
删除匹配的元素集合中所有的子节点。
remove([expr])
从DOM中删除所有匹配的元素。
效果
无动画的版本：
show()
隐藏的显示(只有隐藏的元素可用)
eg：show(1000)
1000代表隐藏所用时间
hid()
显示的隐藏(只有显示的元素可用)
toggle()
切换(隐藏的显示,显示的隐藏)
滑动版本：(依次对应上面)
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出版本：(依次对应上面)
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
事件
事件处理：
on(eve,[sel],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
eg：
给p绑定一个点击事件,事件触发回调函数
$("p").on("click", function(){
alert( $(this).text() );
});
事件:
blur([[data],fn])
元素失去焦点时触发 //用于input
change([[data],fn])
元素内容改变时触发
click([[data],fn])
点击时触发
dblclick([[data],fn])
双击时触发
focus([[data],fn])
元素获得焦点时触发 //于blur()相反
focusin([data],fn)
元素获得焦点时触发 //focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况
focusout([data],fn)
元素失去焦点时触发 //focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
keydown([[data],fn])
当键盘或按钮被按下时发生
keypress([[data],fn])
当键盘或按钮被按下时发生 //keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。
它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件
keyup([[data],fn])
按钮被松开时发生 //它发生在当前获得焦点的元素上
mousedown([[data],fn])
当鼠标指针移动到元素上方，并按下鼠标按键时会发生
//mousedown与click事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生
筛选：
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
查找
children([expr])
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
find(e|o|e)
搜索所有与指定表达式匹配的元素 //这个函数是找出正在处理的元素的后代元素的好方法
next([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextAll([expr])
查找当前元素之后所有的同辈元素
nextUntil([e|e][,f])
找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
parent([expr])
取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素） //可以通过一个可选的表达式进行筛选
prev([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll([expr])
查找当前元素之前所有的同辈元素
jQuery:
jQuery 核心函数:
jQuery([sel,[context]]) //等同$([sel,[context]])
jQuery对象访问
each()
遍历 类似for(in)
index()
查找元素下标 (搜索匹配的元素，并返回相应元素的索引值，从0开始计数)
get()
取得其中一个匹配的元素
eg: $("div")[0] = $("div").get(0) 得到的都是js对象
length
jQuery 对象中元素的个数
selector
返回传给jQuery()的原始选择器。//$(".body").selector() -->body
eg：
jQuery 代码:
$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
结果:
ul
ul li
div#foo ul:not([class])
context
回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。
如果没有指定，那么context指向当前的文档(document)。
eg:
jQuery 代码:
$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
结果:
[object HTMLDocument] //如果是IE浏览器，则返回[object]
BODY
数据缓存:
data()
在元素上存放或读取数据
(自己添加的在元素上看不见
但是可以用 data-name直接添加到元素上
然后用data("name")查看
eg：
HTML 代码:
<div data-test="this is test" ></div>
jQuery 代码:
$("div").data("test"); //this is test!;
)
eg：
HTML 代码:
<div></div>
jQuery 代码:
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
removeDate()
在元素上移除存放的数据
扩展函数
$.extend()
扩展jQuery对象本身
eg：
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
jQuery.max(4,5); // => 5
延迟对象
def.done()
当延迟成功时调用一个函数或者数组函数.
eg：
jQuery 代码:
$.get("test.php").done(function() {
alert("$.get succeeded");
});
工具
$.brower.version
显示当前 IE 浏览器版本号
$.each()
通用遍历方法，可用于遍历对象和数组
eg：
遍历数组，同时使用元素索引和内容。
jQuery 代码:
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
$.extend()
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
eg：
jQuery 代码:
var a={name："张"}
var b={age:12}
$.extend(a, b);
结果:
a == {name："张",age:12}
$.grep()
使用过滤函数过滤数组元素
eg:
过滤数组中小于 0 的元素。
jQuery 代码:
$.grep( [0,1,2], function(n,i){
return n > 0;
});
结果:
[1, 2]
$.when()
提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件
类似于done done是完成后执行 when是达到某个条件后执行
$.makeArray()
将类数组对象转换为数组对象。
$.map()
将一个数组中的元素转换到另一个数组中
eg：
将原数组中每个元素加 4 转换为一个新数组。
jQuery 代码:
$.map( [0,1,2], function(n){
return n + 4;
});
结果:
[4, 5, 6]
$.inArray()
确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
//查找元素在数组中的下标
$.toArray()
把jQuery集合中所有DOM元素恢复成一个数组。
//把jQuery对象化为数组
eg：
得到所有li的元素数组
jQuery 代码:
alert($('li').toArray());
结果:
[<li id="foo">, <li id="bar">]
$.merge()
合并两个数组
eg:
合并两个数组到第一个数组上。
jQuery 代码:
$.merge( [0,1,2], [2,3,4] )
结果:
[0,1,2,2,3,4]
$.uniqueSort()
通过搜索的数组对象，排序数组，并移除任何重复的节点
eg:
删除重复 div 标签。
jQuery 代码:
$.uniqueSort(document.getElementsByTagName("div"));
结果:
[<div>, <div>, ...]
$.proxy()
强制设置函数的作用域，让this指向obj而不是#test对象。
HTML 代码:
<div id="test">Click Here!</div>
jQuery 代码:
var obj = {
name: "John",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ) );
// 以下代码跟上面那句是等价的:
// $("#test").click( jQuery.proxy( obj.test, obj ) );
// 可以与单独执行下面这句做个比较。
// $("#test").click( obj.test );
$.contains()
一个DOM节点是否包含另一个DOM节点。
eg:
检测一个元素是否包含另一个元素
jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false
$.type()
检测obj的数据类型。
$.isEmptyObject()
测试对象是否是空对象（不包含任何属性）。
$.isPlainObject()
测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。
$.isNumeric()
确定它的参数是否是一个数字。
$.isNumeric("-10"); // true
$.isNumeric(16); // true
$.isNumeric(0xFF); // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5"); // true (指数符号的字符串)
$.isNumeric(3.1415); // true
$.isNumeric(+10); // true
$.isNumeric(0144); // true (八进制整数字面)
$.isNumeric(""); // false
$.isNumeric({}); // false (空对象)
$.isNumeric(NaN); // false
$.isNumeric(null); // false
$.isNumeric(true); // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false
$.trim()
去掉字符串起始和结尾的空格。
$.param()
将表单元素数组或者对象序列化
//即为将数组或者对象转化成地址格式
eg：
按照key/value对序列化普通对象。
jQuery 代码:
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);
结果:
width=1680&height=1050
回调函数
$.callbacks()
一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表
eg:
jQuery 代码:
function fn1( value ){
console.log( value );
}
function fn2( value ){
fn1("fn2 says:" + value);
return false;
}
var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo!" ); // outputs: foo!
callbacks.add( fn2 );
callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!
cal.add()
回调列表中添加一个回调或回调的集合。
eg：
jQuery 代码:
// 要添加到回调列表中的日志记录函数示例
var foo = function( value ){
console.log( 'foo:' + value );
}
// 另一个要添加到列表中的函数
var bar = function( value ){
console.log( 'bar:' + value );
}
var callbacks = $.Callbacks();
// 将函数'foo'添加到列表中
callbacks.add( foo );
// 按单子上的项目做
callbacks.fire( 'hello' );
// outputs: 'foo: hello'
// 将函数“bar”添加到列表中
callbacks.add( bar );
// 把清单上的项目再做一遍
callbacks.fire( 'world' );
// outputs:
// 'foo: world'
// 'bar: world'
cal.fire()
用给定的参数调用所有的回调。
eg：
jQuery 代码:
// 要添加到回调列表中的日志记录函数示例
var foo = function( value ){
console.log( 'foo:' + value );
}
var callbacks = $.Callbacks();
// 将函数'foo'添加到列表中
callbacks.add( foo );
// 按单子上的项目做
callbacks.fire( 'hello' ); // outputs: 'foo: hello'
callbacks.fire( 'world '); // outputs: 'foo: world'
// 测试以确定回调是否已被调用
console.log( callbacks.fired() );
动画框架：Animate
Animate
滚动屏插件swiper3
swiper3
网页触摸内容滑动js插件
http://newsimg.5054399.com/uploads/201228/_164251a3.jpg
扫一扫
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
