前端基础之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-->jQueryvar oBox = document.getElementById("box");oBox.innerHTML = "888";　　$(oBox).html("888")//jq-->jsvar $p = $("#box p");$p.html("11111");$p[0].innerHTML("111");$p.get(2).innerHTML = "111";//jq--->特定的jqvar $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"))  Falseconsole.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()      valuevar $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"));//falseconsole.log($("#chk2").prop("checked"));//trueconsole.log($("#chk1").attr("checked"));//undefinedconsole.log($("#chk2").attr("checked"));//checked
</script>

View Code

文档节点，即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())

转载于:https://www.cnblogs.com/tashanzhishi/p/9201778.html