JQuery学习笔记及总结(详细)

-----好记性不如烂笔头。勤做笔记便于复习加深映像！

-----JQuery虽然有点过时，但仍有借鉴作用。学习时结合了网易云上的课程视频的笔记和菜鸟教程网站的jq文档知识，尽最大可能查漏补缺。so 将学习时的总结和领会记录了下来、便于以后翻阅。
1.引入方式三种（放置位置要在使用地方之前,之后的话需要做一丢丢处理在（4）处已说明）：

引入方式

2.$函数是全局的且$==jQuery。window.$==window.jQuery==jQuery为true。若其他 JavaScript 框架也使用 $ 符号作为简写怎么办？法一：用jQuery代替。法二：使用noConflict() 方法释放对 $ 标识符的控制。

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作呐!");
  });
});

3. 分清js原生对象和jq对象,写的时候容易混用，用原生对象就去调用jq方法了。原生对象无法调用后者方法，调用先转换，转换方式$(需转原生对象)就可以调用jq方法了。

this.html()//报错:Uncaught TypeError: this.html is not a function
 $(this).html()//把原生对象的this转为jq对象
var oTest = document.getElementById("test");
    //其他js对象转jq对象
    console.log($(oTest))
console.log($("#test").get(0))//get(0)jq对象集合里获取的第一个对象值

对象对比

4.书写位置，代码放在引入jq之前。按照正常写会报错，需这样处理一下

//    书写位置，若要写在查找元素之前
    window.onload = function () {}//原生中写法
    //jq中写法
//方法一：
$(document).ready(function(){
    // 执行代码
});
//方法二：
    $(function () {
        $("#test")
    })

5.jq选择器常用共8种，可根据css选择器，对比记忆呀。另外，选择器中可使用css中的伪类选择器

//1.id选择器
$("#box").html()  // 用 #号
//2.类选择器
$(".box").html   //用 . 号
//3.标签选择器
$("div").html   //直接给标签名
//4.多元素选择器
$("#box,.box,div").html();  // 几种选择器组合
//5.后代选择器
$("#box p").html()  // 用空格隔开
//6.子元素选择器
$("#box > p").html() ; // 用> 隔开
//7.伪类选择器
$("p:nth-child(2)").css("background-color"))
//8.属性选择器
$("input[value=men]") ; //找 value=men的input元素
$("input[value*=men]") ; //找 value里面包含men的input元素
$("input[value^=men]") ; //找 value里面以men开头的input元素
$("input[value$=men]") ; //找 value里面以men结尾的input元素

6.过滤方法

:first//用法: 
$(”tr:first”) ;// 匹配找到的第一个元素
:last //匹配找到的最后一个元素
:not(selector) //去除所有与给定选择器匹配的元素
:even//匹配所有索引值为偶数的元素，从 0 开始计数
:odd//匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) //匹配一个给定索引值的元素，从 0 开始计数
:gt(index) //匹配所有大于给定索引值的元素，从 0 开始计数
:lt(index) //匹配所有小于给定索引值的元素，从 0 开始计数
$("p").filter(".url")//返回带有类名 "url" 的所有 <p> 元素

7.jq中部分常用方法：

（1）addClass() //为每个匹配的元素添加指定的样式名
$('div').addClass('box'); //为页面中所有的div添加一个box样式
（2）removeClass()// 移除集合中每个匹配元素上一个、多个或全部样式
$('p,.box').removeClass('classname')//classname只需类名即可，不需要加"."
（3）toggleClass() //样式切换，如果有就删除，如果没有就添加
$("p").click(function () {
      $(this).toggleClass("highlight");
});
（4）$('p').html() //获取p标签里面的内容
$('p').html('床前明月光')；//设置html里面的内容
（5）$('p').text();
$('p').text('床前明月光')；
 //tml方法功能和原生方法innerHTML一样 ，text方法功能和原生方法innerText一样。val() 获取或者设置表单元素的值，这里要注意的是 获取的是表单元素的值 不要和html 以及 text方法搞混
（6）$("input").val(text);
//获取属性值 attr()和prop() 方法用于获取属性值。
（7）$("#aa").attr("href")
（8）$("#aa").prop("href")
//相同点：两者获取的属性有值，返回指定属性值
//不同点：没有相应的属性，prop()返回值是空字符串,attr()返回值是 undefined
//HTML元素本身就带有的固有属性用------>prop(),自定义的DOM属性则用---->attr()
//具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，使用attr的话属性效果无法实现。
attr和prop属性使用参考图
//用attr（）设置属性值
//1.$("#aa").attr( "href","http://www.baidu.com");
//2.同时设置多个属性,例如href 和 title 属性
$("#aa").attr({
        "href" : "http://www.baidu.com",
        "title" : "jQuery"
    });
//2.回调函数,两参数：第一个为被选元素列表中当前元素的下标，以及原始（旧的）值
$("#aa").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
}）
（9）//removeAttr() 删除属性
$("input").removeAttr("data");
（10）//removeProp()同上
$("input").removeProp("checked");

（11）//设置样式的css()方法
$('div').css('color','red'); //设置所有div字体颜色为红色
$('div').css('color')  //获取颜色
//批量设置法一：
//index参数：选中的div的遍历集合，从0开始；item参数：
$('div').css('color',function(index,item){
//console.log(index)打印查看
//console.log(item)
//奇数设置处理if(index%2==0){
      if(index<=4){
           return  'blue'; 
      }
}) //下标小于4的都设置成蓝色
//批量设置法二：
$('div').css({"color":"yellow","font-size":"25px"})//对象传入设置
（12）//each()方法 后台传来的数据，数组对象。可遍历
$("li").each(function(index, item){
   //index 为li的下标  item表示每个li（元素或对象）
   console.log(index, item)   
]})

8.添加元素：

    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt2=$("<p>"+"拼接加入"+"</p>"); //拼接动态文本数据进入
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM

append/prepend和after/before的区别。两组的意思都为---->从后面插入/从前面插入。两者的区别：
(1).append/prepend 是在选择元素内部嵌入。
(2).after/before 是在元素外面追加。
(3).当选中最小一层的元素或者无嵌套的元素，两者效果一样

//例如，选中ul下的第二个li,前两个和后两个效果一致
$("ul li").get(1).prepend("<li>追加列表项</li>");
$("ul li").get(1).append(" <li>追加列表项</li>");
$("ul li").get(1).before("<li>追加列表项</li>");
$("ul li").get(1).after("<li>追加列表项</li>");

(4).appendTo/prependTo ,insertAfter/insertBefore方法与append/prepend，after/before方法就是小学所学“把”和“被”的关系

$(li).appendTo($("#ul")); //把li元素添加到ul中 ，这个元素被添加到ul中原有元素的后面
$(li).appendTo($("#ul")); //把li添加到ul中 ，这个元素被添加到ul中原有元素的前面
$("#li2").insertAfter($("#li1")); // 把li2 添加到li1 后面
$("#li2").insertBefore($("#li1")); // 把li2 添加到li1 前面

9.删除元素：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("#div1").empty();
$("#div1").remove();
//可接受一个参数，允许对被删元素进行过滤
 $("p").remove(".italic");//对类名为.italic的p元素删除

10.遍历方法（关系查找方法）,包括兄弟关系（同级同代）、祖先后代关系（隔代）--------应用中最重要的就是可以传入过滤条件进行筛选！！！。
兄弟关系（同级同代）：
（1）prev()和prevAll(),next()和nextAll()，prevtUntil()和nexttUntil()，siblings()方法五个返回的都是jq对象！！

$(".box").prev() //获取前面一个兄弟节点
$(".box").prevAll() //获取前面所有的兄弟节点
$(".box").prevAll("p")//可传入过滤条件，获取上面所有元素的p元素
$(".box2").prevtUntil(".box1");//返回.box1和.box2之间的所有元素,向上找
$(".box").prev() //获取前面所有的兄弟节点
$(".box").next() //获取后面一个兄弟节点
$(".box").nextAll() //获取后面所有的兄弟节点
$(".box1").nextUntil(".box2");//返回.box1和.box2之间的所有元素，向下找
$(".box").siblings() //获取所有的兄弟节点

祖先后代关系（隔代）：
（1）长辈：parent()，parents()，parentsUntil()及closest()方法

$("span").parent()//返回每个 <span> 元素的的直接父元素,它爸爸
$("span").parents();//返回所有 <span> 元素的所有祖先,它一路向上直到文档的根元素 "<html>"
$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素,位置不可换，辈分‘小’---->‘大’
$("input").closest('li');//找到input上面最近的li父级

（2）后辈：find()，children()方法；index(),get()，eq()方法（顺便补充）

$(function () {
        $("li").click(function () {
 // alert($(this).html())
          alert($(this).index()) //快熟获取的当前元素的下标
        })
//获取集合中的某个元素,2为获取元素的下标，返回原生的元素，不可用jq方法，需转换
 console.log($("li").get(2))
//eq()同上get（）方法一样效果,但返回的是jq对象！
  console.log($("li").get(2))
//find()方法返回的是一个jq对象！！！！！
$(".box").find("p"); //找到box类下面所有的p标签
$(".box").find(".aa");//找到box类下面所有的含类名为aa的标签
 console.log(111,$(".box").find($(".innerBox")))//找到对象
$("div").children();//返回被选元素的所有直接子元素 $("div").children("p.aa");//返回类名为 "aa" 的所有 <p> 元素
    })

11.jq中的事件
元素效果事件常用有：
①click() 方法是当按钮点击事件被触发
②dblclick ()方法双击元素时，会发生 dblclick 事件
③mouseenter()方法当鼠标指针穿过元素时，会发生 mouseenter 事件
④mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件
⑤mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
⑥mouseup()当在元素上松开鼠标按钮时，会发生 mouseup 事件
⑦hover()方法当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
⑧focus()当元素获得焦点时，发生 focus 事件
⑨blur()当元素失去焦点时，发生 blur 事件
键盘事件常用有：
①.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
②keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符（返回的是空白字符）
③keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

$(window).keydown( function(event){
   // 通过event.which可以拿到按键代码.  如果是keypress事件中,则拿到ASCII码.
} );
上面的所有事件一般传入函数，实现效果！

事件的绑定方法：
①on方法绑定

$('#box').on('click',function(){//上面的方法都可使用on方法，替换"click"即可
    alert("on监听事件");
})
$('#box').on('click mouseleave',function(){//用空格隔开可监听多个事件
alert("on监听多个事件");
}

②直接绑定

$("#box").click(function(){
     alert("直接使用"）
})

删除事件：

$("#box").off("blur");  //删除事件

事件冒泡：
事件冒泡就是事件会从元素内部往外传播的一种现象，事件冒泡的好处就是可以节约代码，比如说，有个需求是，点击某个按钮btn1 的时候显示一个div，点击其他元素的时候隐藏div，这个时候，如果没有冒泡机制，要实现这个需求就要给除了btn1 以外的所有元素都绑定上点击事件，如果当前页面有成千上万个元素，那么事件就会被重复绑定成千上万次，如果有了事件冒泡机制就可以把事件绑定给document，通过冒泡机制，点击其他的元素都会触发document身上的点击事件，从而节约代码，此时，只需要把btn1身上的点击事件阻止冒泡就行了

$("#btn1").on("click",function(ev){
      ev.stopPropagation();
})

事件委托:

//两中方法，on（）和delegate（）都可
//1.7版本后on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
$("ul").on("click","li",function(){
     $(this).css("background","#ccc");
})
$("ul").delegate("li","click",function(){
     $(this).css("background","#ccc");
})

阻止默认行为：
浏览器会自带一些默认行为，比如说右键菜单，表单提交等，如果要实现自定义右键菜单或者表单验证这些功能的时候就需要把这些默认行为阻止掉

$("#btn1").on("click",function(ev){
      ev.preventDefault();
})
$(function () {
        $(document).contextmenu(function (ev) {
            // ev.preventDefault()
            return false;//既可以阻止默认行为，也可以阻止冒泡
        })
  • 阻止默认行为总结： 在jquery中可以直接return false ；return false 具有阻止浏览器默认行为和阻止冒泡的功能
    11.AJAX相关方法
    1.$.ajax() 执行一个异步的ajax请求 
$.ajax({
    url:'http://www.wp.com/getData.php',       //跨域到http://www.wp.com，另，http://test.com也算跨域
    type:'GET',                                //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
    dataType:'jsonp',                          //指定为jsonp类型
    data:{"name":"Zjmainstay"},                //数据参数
    jsonp:'callback',                          //服务器端获取回调函数名的key，对应后台有$_GET['callback']='getName';callback是默认值
    jsonpCallback:'getName',                   //回调函数名
    success:function(result){                  //成功执行处理，对应后台返回的getName(data)方法。
        $("#myData").html('1、My name is '+result.name+'.I\'m '+result.age+' years old.<br />');
    },
    error:function(msg){
        alert(msg.toSource());                 //执行错误
    }
});

2.get()和post()方法

//get()语法：$.get(URL,data,function(data,status,xhr),dataType);
$.get("test.php", function(data){
   alert("Data: " + data);
});

//post()语法$(selector).post(URL,data,function(data,status,xhr),dataType)
$("input").keyup(function(){
    txt=$("input").val();
    $.post("demo_ajax_gethint.html",{suggest:txt},function(result){
        $("span").html(result);   
    });
});

12.jq的效果方法
①hide()、show()、toggle()方法：
语法：
$(selector).hide(速度，动画效果，回调函数);
$(selector).show(速度，动画效果，回调函数);
$(selector).toggle(速度，动画效果，回调函数);
速度以毫秒为单位或fast/slow也行；动画效果jq提供"linear"(匀速)，"swing"(先慢后快，推荐)；回调函数自定义

$("#hide").click(function(){
  $(".p1").hide();
 $(".p1").hide(1000,"swing");//一秒，先慢后快消失
$(".p1").hide(1000,"swing"，function(){
alert("消失后的事件函数")
});
});
$("#show").click(function(){
  $("p").show();//使用方式同上
});
$("button").click(function(){
  $("p").toggle();//使用方式同上
});

②fadeIn()、fadeOut()、fadeToggle()、fadeTo()方法：
语法：
$(selector).fadeIn(speed,callback);//用于淡入已隐藏的元素,参数speed可用三种同hide()方法
$(selector).fadeOut(speed,callback);//用于淡出可见元素
$(selector).fadeToggle(speed,callback);//在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeTo(speed,opacity,callback);//fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeOut("slow");
  $("#div3").fadeToggle(3000);
  $("#div3").fadeTo(1000,0.25);//0为全透明了
});

③slideDown()、slideUp()、slideToggle()方法：
语法：
(selector).slideDown(speed,callback);//向下滑动元素(selector).slideUp(speed,callback);//向上滑动元素
$(selector).slideToggle(speed,callback);//在 slideDown() 与 slideUp() 方
法之间进行切换

$("#flip").click(function(){
$("#panel01").slideDown();
  $("#panel02").slideUp(1000);
$("#panel02").slideslideToggle(1000,function(){
alert("来回切换")
});
});

④动画animate()方法：
语法：
$(selector).animate({params},speed,callback);//{params}为要改变的css样式，来形成动画

$("button").click(function(){
//方式一：可以多个属性
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
//方式二：部分效果可以使用相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=;
$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
//方式三：使用预定义的值，属性的动画值设置为 "show"、"hide" 或 "toggle"
$("div").animate({
    height:'toggle'
  });
//方式四：动画队列，给一个对象绑定多个动画，逐步执行。但是使用stop()终止中途某一动画后，之后的动画不在执行。
var div=$("div");//选择需要动画的对象
    div.animate({height:'300px',opacity:'0.4'},"slow");//执行顺序：1
    div.animate({width:'300px',opacity:'0.8'},"slow");//2
    div.animate({height:'100px',opacity:'0.4'},"slow");//3
    div.animate({width:'100px',opacity:'0.8'},"slow");//4
});

//animate() 方法几乎可以操作所有 CSS 属性，但要改为驼峰命名的样式
//比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right

⑤停止动画stop()方法：
语法：
$(selector).stop(stopAll,goToEnd);//两个参数都是可选的，stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，下一个动画开始，为true，则停止所有动画效果而不是只停止当前动画； goToEnd 参数规定是否立即完成当前动画。默认是 false；

//默认地，stop() 会清除在被选元素上指定的当前动画
$("#stop").click(function(){
  $("#panel").stop();
});

革命尚未成功！仍需进一步努力！！加油！！！

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,717评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,501评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,311评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,417评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,500评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,538评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,557评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,310评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,759评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,065评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,233评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,909评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,548评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,172评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,420评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,103评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,098评论 2赞 352

推荐阅读更多精彩内容

  • Jquery知识点总结
    一：认识jquery jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Aj...
    xuguibin阅读 1,708评论 1赞 7
  • JQ
    通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。 jQuer...
    枇杷树8824阅读 655评论 0赞 3
  • JQuery相关总结
    一、 认识jQuery 1、 概述 之前，我们为了方便使用，封装了ajax.js,能够查找指定ID的DOM对象，使...
    宠辱不惊丶岁月静好阅读 636评论 0赞 3
  • 妹妹
    我有一个妹妹，叫朵朵，小眼睛、小嘴巴，光声音大些，我左看右看上看下看，就是觉得我俩不像。 我的妹妹是一个活生生...
    双子密码阅读 294评论 0赞 4
  • 2018年最后一天
    刚刚结束济南之行，今天是18年的最后一天，劳累了一天，刚到家不久 不是很想在今天做18年的总结，具体总结等明天再来...
    白马Baima阅读 183评论 0赞 1