一、jquery：封装好的javascript类库特点(面试容易问)：1、抹平了各个浏览器之间的差异2、可以链式操作DOM
JS中：window.onload = function(){}
//当文档加载完毕以后jquery中： $(document).ready(function(){})
//简单写法$(function(){})
以后写代码时<script> $(function(){ //这里书写代码 })</script>
面试题：这两种写法的区别是什么？前者是 当整个页面加载完毕以后，包括 html css js img 后者是 当文档加载完毕 不包括imgjquery中有一个特点： 任何东西都是方法，几乎没有属性
二、jquery选择器注意：在jquery中不要通过数组下标的形式去取某一个元素，因为如果通过此方式取元素，当前元素就变成了一个原生JS对象html: <ul id = "list"> <li>111 <p>1-2</p> </li> <li class = "box">222</li> <li>333</li> <p>444</p> </ul>js: 之前：var olist = docuemnt.getElementById("list"); 现在：$(function(){ $("#list");//获取id元素 $("li");//获取标签元素 $(".box")//获取class $("#list>p");//获取list下的p标签 层级选择器 $("#list>li>p");//获取list下的li下的p标签 层级选择器 $("li+p") //选择444 $("li~p")//选择li后所有的p标签 :first 获取选择器得到的 第一个 元素 console.log($("#list>li:first")) console.log($("#list>li").first())
:last 获取选择器得到的 最后一个 元素 console.log($("#list>li:last")) console.log($("#list>li").last())(常用)
(重要) :eq(index) 获取选择器得到的 指定下标 的元素 console.log($("#list>li:eq(4)")) //找到下标为4的li console.log($("#list>li").eq(4))(常用)
:even 获取选择器得到的 下标为偶数的 元素 console.log($("#list>li:even")) (even 和odd 一般做隔行换色时用)
:odd 获取选择器得到的 下标为奇数的 元素 console.log($("#list>li:odd")) :gt(index) 获取选择器得到的 下标 > index 元素 console.log($("#list>li:gt(3)")) //找到大于下标为3的
:lt(index) 获取选择器得到的 下标 < index 元素 console.log($("#list>li:lt(3)"))//找到小于小标为3的
:not(selector) 找同级 console.log($("#list>li:not('.box')"));//找li中class不是box的li标签
:has(selector) 包含特定后代的元素，去掉那些不含有指定后代的元素。 console.log($("#list>li:has('p')")); ///找到li下的p元素标签(找子级)})
三、设置css样式<div id = box></div>
var oBox = $("#box");//设置样式：元素.css("属性"，"属性值")oBox.css("width","100");//px可以不写//设置多个css样式：元素.css({ 属性：属性值 属性：属性值})oBox.css({ "width":100, "height":100, "background":"red"});//获取css样式 元素.css("属性")console.log(oBox.css("width"))
四、属性选择器
<ul id= "list"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> <input type = "radio"> <input type = "checkbox"> js: <script src = "引入jquery"></script> <script> var oList = $("#list"); //获取 console.log(oList.attr("id")) //设置 oList.attr("data-id",20); oList.attr("class","box"); oList.attr({ "data-url:"www", "title":"哈哈哈" "data-img":"abc" }); //删除 oList.removeAttr("data-id")//只能一个一个删 </script> 1、对象.attr() 主要用在元素身上 用于获取或者设置元素的属性值 1、获取元素属性值 (getAttribute setAttribute) 对象.attr(属性名); $('p').attr('id'); $('p').attr('data-id'); 2、给元素设置属性值 a、设置单个属性值 对象.attr(属性名,属性值); b、设置多个样式值 对象.attr({ 属性名1: 属性值1, 属性名2: 属性值2 }); 对象.removeAttr(属性名); 删除元素的属性
var oList = $("#list"); //获取 console.log(oList.attr("id")) //设置
oList.attr("data-id",20); oList.attr("class",'box'); oList.attr({ "data-url":"www", "title":"哈哈哈", "data-img":"abc" });
oList.removeAttr("data-id");
2、对象.prop() 主要用在表单身上 用法和attr一样 作用：用于获取或者设置元素的 selected/checked
console.log($("input[type='radio']").prop("checked")) 未选中 返回true false console.log($("input[type='radio']").prop("checked",true)) 选中
console.log($("input[type='checkbox']").prop("checked")) 意思同上 console.log($("input[type='checkbox']").prop("checked",true))
3、对象.addClass(class名); 用于给元素添加class 对象.addClass('class1 class2'); 对象.removeClass(class名); 用于给元素去除class 对象.toggleClass(class名); 如果元素存在需要添加的class，则去除，否则添加
var oList = $("#list");
oList.addClass("box box1 box2 box3"); oList.removeClass("box1");
//事件： oList.click(function(){ oList.toggleClass("content"); //有content class名时 点击content就没有了 //用途：比如 点击切换颜色等等 })
4、对象.html() 获取或者设置元素的内容 //等价于innerHTML 对象.val() 获取或者设置文本框的值 // value console.log($("input[type = 'text']").val()) 对象.text() 获取或者设置元素的文本 //等价于innerText
五、节点选择器<ul id="list"><li>111</li><li class = "item2">222</li><li>333</li><li>444</li><li>555</li><li> <p> <a href = "##">百度</a> </p></li></ul>
find();//查找后代元素 包括子孙级别 需要传参 console.log($("#list").find("a"));
children():查找所有后代元素 console.log($("#list").children());
siblings:查找除自己以外的同级元素 console.log($(".item2").siblings());
prev 上一个元素 console.log($(".item2").prev());
prevAll上面所有的元素 console.log($(".item2").prevAll());
next 下一个元素 console.log($(".item2").next());
nextAll 后面所有的元素 console.log($(".item2").nextAll());
parent()查找父级 console.log($(".item2").parent());
父级们 console.log($(".item2").parents());
面试题 this 与$this 的区别前者是 原生JS的一个指向 后者是jquery对象的一个指向 后者是可以使用jquery方法的 前者不能使用jquery的特点：链式操作DOM
六、节点操作创建节点 var div = $("<div>111</div>")
插入节点(8种)查找文本节点 console.log($("#list").contents())
内部插入 append(content|fn) $("#list>.item2").append(div);
appendTo(content) div.appendTo($("#list>.item2")) // 如果item2下设置一个span标签 append 和appendTo会插入到span之后 prepend(content|fn) $("#list>.item2").prepend(div);
prependTo(content) // 如果item2下设置一个span标签 prepend 和prependTo会插入到span之前 div.prependTo($("#list>.item2"))
after(content|fn) $("#list>.item2").after(div); //插入到item2同级之后
before(content|fn) $("#list>.item2").before(div); //插入到item2同级之前
insertAfter(content) div.insertAfter($("#list>.item2"));// 插入到item2同级之后
insertBefore(content) div.insertBefore($("#list>.item2"));// 插入到item2同级之前
移除$("#list>.item2").remove();//将item2删除
替换 $("#list>.item2").replaceWith(input);//将item2替换为input框
克隆var item2 = $("#list>.item2").clone(true); $("#list>.item2").before(item2);
如果加true则代表的是克隆事件，如果没有加true则不会克隆事件
七、尺寸获取 <style> *{margin:0;padding: 0}
#parent{ position: relative; width: 400px; height: 400px; background: red; margin-left: 30px; padding: 10px; border:1px solid #ccc; }
.item1{ width: 200px; height: 200px; background: yellow; margin-left: 30px; position: relative; }
.child{ width: 100px; height: 100px; background: pink; position: absolute; left:10px; } </style></head><body style="height: 3000px;"> <div id="parent"> <div class="item1"> <div class="child"></div> </div> </div></body></html><script src="jquery-1.11.3.js"></script><script>
获取元素的宽度 高度width() height() content内容区innerWidth innerHeight() content + paddingouterWidth outerHeight() content + padding + borderconsole.log($("#parent").width())console.log($("#parent").innerWidth())console.log($("#parent").outerWidth())
元素的偏移量offset() 距离页面的便宜量position(); 计算距离父级的偏移量 不会计算margin的值 只会计算定位后的left top值
滚动条滚动的距离$(document).scroll(function(){ console.log($(document).scrollTop());})
如何获取页面的高度
获取可视区的高度、宽度console.log($(window).height()); console.log($(window).width());
获取整个页面的宽度和高度console.log($(document).height());console.log($(document).width());
八、基础动画
var aBtn = $("button");
aBtn.eq(0).click(function(){ $("#box").show(1000,function(){ alert(1); }) })
aBtn.eq(1).click(function(){ $("#box").hide(1000) })
aBtn.eq(2).click(function(){ $("#box").toggle(1000) })
/*参数1 速度参数2 动画类型参数3 回调
九、滑动动画body> <button>下滑</button> <button>上滑</button> <button>切换</button> <div id="box"></div></body>
<script src="jquery-1.11.3.js"></script><script>var aBtn = $("button");
aBtn.eq(0).click(function(){ $("#box").slideDown(2000)})
aBtn.eq(1).click(function(){ $("#box").slideUp(2000)})
aBtn.eq(2).click(function(){ $("#box").slideToggle(2000)})
</script>
十、透明度<body> <button>fadeIn</button> <button>fadeOut</button> <button>fadeTo</button> <button>fadeToggle</button> <div id="box"></div></body>
<script src="jquery-1.11.3.js"></script><script>var aBtn = $("button");
aBtn.eq(0).click(function(){ $("#box").stop().fadeIn(5000)})
aBtn.eq(1).click(function(){ $("#box").stop().fadeOut(5000)})
aBtn.eq(2).click(function(){ $("#box").stop().fadeTo(5000,0)})
aBtn.eq(3).click(function(){ $("#box").stop(true).delay(3000).fadeToggle(1000)})
/* fadeIn: 操作 透明度 display 参数1 速度 参数2 动画类型 参数3 回调
fadeOut: 操作 透明度 display
参数1 速度 参数2 动画类型 参数3 回调
fadeTo: 只操作透明度(用于 淡入淡出轮播图) 参数1：速度 参数2：透明度 参数3：动画类型 参数4：回调
*/
</script>
十一、自定义动画 <body> <button id="btn">点击</button> <div id="box"></div></body>
<script src="jquery-1.11.3.js"></script><script>$("#btn").click(function(){ $("#box").stop().animate({ "left":300, "top":300, },2000).stop().delay(2000).animate({ "width":400, "height":400 })})
/* 参数1：对象 需要变换的对象 参数2：动画时间 参数3：动画类型 参数4：回调
清空动画队列 stop：true
延迟： delay 参数1 延迟时间 写在stop()之后
*/</script>
一、jquery-ajax综合语法：$.ajax({ type:"请求的方式", url:"请求的地址", data:"{请求的参数}", dataType："请求的类型", json:"jsonp" 当前接口是jsonp接口 jsonp:"重写callback的key值", success:"成功的回调", error:"失败的回调", cache:"是否请求缓存中的数据" 服务器的状态码 304 从缓存中读取数据 contentType:"appplication/jspn (不模拟表单) application/www-url-form-urlencode(模拟表单)"})
二 bind() bind() 事件的绑定
参数1：type事件类型 参数2：data值 参数3: 回调
事件解绑 unbind 参数1：事件类型 参数2：需要解绑的事件名称<script> function fn(e){ console.log(e.data)}
function fn1(e){ console.log("1111")
}
$("#list>li").bind("click",{a:1,b:2},fn)$("#list>li").bind("click",{a:1,b:2},fn1)//$("#list>li").unbind("click")
var li = $("<li>444</li>");$("#list").append(li);</script>
三 live() live() 事件的绑定
参数1：type事件类型 参数2：data值 参数3: 回调
事件解绑 die 参数1：事件类型 参数2：需要解绑的事件名称 function fn(e){ console.log("2222")}
function fn1(e){ console.log("1111")
}
$("#list>li").live("click",fn)
$("#list>li").live("click",fn1)$("#list>li").die("click",fn)
var li = $("<li>444</li>");$("#list").append(li);
四、delegate() delegate() 事件的绑定
参数1：type事件类型 参数2：data值 参数3: 回调
事件解绑 undelegate 参数1：事件类型 参数2：需要解绑的事件名称
它的事件是给子级进行绑定的 function fn(e){ console.log(e.data)}
function fn1(e){ console.log("1111")
}
$("#list").delegate("li","click",{a:1,b:2},fn)$("#list").delegate("li","click",{a:1,b:2},fn1)//$("#list>li").unbind("click")
var li = $("<li>444</li>");$("#list").append(li);
五、on() on() 事件的绑定
参数1：events 通过空格可以给一个元素添加多个事件 参数2：data值 参数3: 回调
事件解绑 off 参数1：事件类型 参数2：需要解绑的事件名称 function fn(e){ console.log(e.data)}
function fn1(e){ console.log("1111")
}
$("#list").on("click","li",{a:1,b:2},fn)$("#list").off("click")
var li = $("<li>444</li>");$("#list").append(li);
六、事件对象 e.type e.button
e.data e.which e.stopPropagation();事件冒泡 e.preventDefault();组织默认事件 e.pageX e.pageY e.target 返回的对象是原生js对象
在jq里面没有 e.clientX e.clientY e.offsetX e.offsetY
*/
$("#box").on("click",[1,2,3,4],function(e){ //console.log(e) //console.log(e.type) //console.log(e.button) //console.log(e.data) //console.log(e.which) //e.stopPropagation(); //e.preventDefault();
console.log($(e.target))
七 jquery高级如何给jquery元素添加方法 $.fn.extend()
在jquery中$ == jQuery
如何给jquery对象添加方法 $.ajax() $.get() $.post()
$.extend()
语法： $.extend({ 方法名称:function(){ ....逻辑 } })
$.proxy() == bind 可以理解成等价与bind
参数1：是需要代理的函数 参数2: context --- >上下文 参数1里面这个函数的作用域 this的指向
返回值是一个新的函数体
jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } });
$.fn.extend({ zyh:function(val){ return this.each(function(){ this.innerText = val; }) } })
$.fn.extend({ setStyle:function(options){ return this.each(function(){ for(var key in options){ if(key == "background"){ this.style[key] = options[key] ; }else{ this.style[key] = options[key] + 'px'; } } }) } })
$("#box").setStyle({ "width":100, "height":100, "background":"red" })*/
/*
$.extend({ numRandom:function(n,m){ return parseInt(n + Math.random()*(m+1-n)); }})
console.log($.numRandom(3,5))
*/
// $(document).on("click",function(){// console.log($(this))// })
function fn(){ console.log(this);}
$(document).on("click",$.proxy(fn,window))
$("#box").hover( function(){ alert('移入') }, function(){ alert("移除"); })
转载于:https://www.cnblogs.com/zcccz/p/11180474.html
相关资源：数据结构—成绩单生成器