前端基础之JQuery
Posted wallacewang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础之JQuery相关的知识，希望对你有一定的参考价值。
一、什么是JQuery
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是一种新型的JavaScript库。jq是用js写的，能用jq实现，用js都能实现,JQuery的api只对自己开放，jq不能用js的API，js也不能用jq的API
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理htmldocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二、JQuery对象
`jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用JS实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装JS对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理JS对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM (JS)对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
JQ对象与JS(DOM)对象转换：
//js-->jQuery var oBox = document.getElementById("box"); oBox.innerHTML = "888";
$(oBox).html("888") //jq-->js var $p = $("#box p"); $p.html("11111"); $p[0].innerHTML("111"); $p.get(2).innerHTML = "111"; //jq--->特定的jq var $p = $("#box p"); $p.html("333"); $p.eq(1).html("888");
三、JQ选择器和筛选器
基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div") 分别是：全部、id、class、标签、多选 层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") 分别是：后代、子代、相邻、兄弟 属性选择器 $(‘[id="div1"]‘) $(‘["alex="sb"][id]‘) 分别是：对定义的属性进行选择 表单选择器 $("[type=‘text‘]")----->$(":text") 注意只适用于input标签 : $("input:checked")
表单选择器：
:enabled
:disabled
:checked
:selected
基本筛选器：
基本筛选器 a = $("li:first") //取第一个 console.log(a) b = $("li:eq(2)") //取索引为2的那一个 console.log(b) c = $("li:even") //先取第一个隔一个再取 console.log(c) d = $("li:gt(3)") //隔几个再取 console.log(d)
筛选器方式二：
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
关系筛选器
// hasClass 检查当前元素是否含有某个特定的类，如果有返回True.否则返回False // children 找儿子，可以不传参数 // find 默认不找，传参的话找对应参数的后代 // parent 找父级，b不需要参数 // parents(".show") 找到名字叫做show的祖先 // sibings 不传参，找对应参数的兄弟 // alert($("p").hasClass("box2")) False console.log($("#box").children("p")); console.log($("#box").children()); console.log($("#box").find("p"))
例：
查找子标签： $("div").children(".test") $("div").find(".test")
向下查找兄弟标签： $(".test").next() $(".test").nextAll()
$(".test").nextUntil()
向上查找兄弟标签： $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
属性操作
// attr 设置/获取 标签属性 // removAttr() 移除标签属性 // // addClass // removeClass() // 传入参数，class，则移除对应的class // 若不传人参数，则移除全部 // toggleClass() // 有class就删除，没有就增加 // // jQuery js // // html() innerHTML // text() innerText // val() value var $box = $("#box"); alert($box.attr("class")) $box.attr("class","小婆") $box.attr("py","xp"); $box.removeAttr()
关于attr深入：
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 <script> //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。 // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // false // ---------手动选中的时候attr()获得到没有意义的undefined----------- // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked </script>
文档节点，即html标签等操作
//创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
JQ事件：
事件绑定：
var $box = $("box"); $box.click(function () { alert(1) })
事件委派，是绑定事件的另一方式，可以绑定多个事件
语法：$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
eve：事件类型
fn:函数
//on绑定单个事件 $("li").on("click",function () { alert($(this).index()) //在jq里面index()是你对应的下标 }) //on绑定多个事件 $("#box").on({ "click":function () { alert(1); }, "click2":function () { alert(1); }, "click3":function () { alert(3) }
each遍历(循环)：
//方法一 //格式：$.each(obj,fn) $("#box p").each(function (i) { this.innerHTML = "我是第" + i +"个"; $(this).html("我是第"+ i + "个"); }) //方法二 //格式：$("").each(fn) li=[10,20,30,40]; dic={name:"yuan",sex:"male"}; $.each(li,function(i,x){ console.log(i,x) });
JQ的css操作：
// css设置样式 // .css() // 以下是返回对应的的信息 // .width() // .height() // // innerWidth() / innerHeight 会算上padding // outerWidth() / outerHeight 会算上 padding+border // // offset() // 该对象有top/left属性 // 代表的是到浏览器的值 // // position（） // 该对象有top/left属性 // 代表的是到父级的值 // var $box = $("#box"); // $box.css("height","200px"); // // oBox.style.height = "200px"; 当然要获取oBox // // $box.css({ // // "width":"400px", // // "height":"300px", // // "background":"red" // // })给多个样式 // alert($box.width()) // alert($box.height())