jquery-2  jQuery原理和核心方法（多看学习视频）

一、总结

一句话总结：jQuery就是普通的js对象，只不过方法比较多而已，属性就length一个。

1、jquery的链式操作的底层原理是什么？

一个方法执行完之后返回本身对象

28     obj.say=function(){

29         alert('my name is :'+this.username);

30         return this;

31     }
40 // 对象链式结构

41 $('imgid').say().eat();

2、所有链式操作的原理是什么（jquery，thinkphp）？

方法执行完返回对象

3、jquery函数体中和js函数体中地位是否一样？

完全一样，jquery只不过是对js进行了一些轻量级的封装而已

21 <script>

22 imgobj=document.getElementById('imgid');

23 // imgobj.onclick=function(){

24 //     this.src='b.png';

25 // }

26

27 $(imgobj).click(function(){

28     this.src='b.png';

29 });

30 </script>

4、dom对象如何转成jquery对象？

在dom对象上面加上$()，$(dom)

5、this对象和$(this)的区别？

两者都是指向当前对象，只不过this对象是dom对象，$(this)是jquery对象，区别是dom对象指行dom的方法，jquery对象执行jquery的方法

6、jquery选择器选择出来的东西的本质是什么，比如$('h1')？

dom对象数组，而这个dom对象数组是一个jquery对象，所以jquery选择器选出来的东西都可以执行jquery的方法，并且加上下标能转化为dom对象

23 val=$('h1')[1].outerHTML;

7、jquery对象（本质是dom对象列表）如何转化成dom对象？

$('h1')[1];
$('h1').get(1);

23 val=$('h1').get(1).outerHTML;

8、jquery的get()方法得到的是什么，比如$('h1').get()？

dom对象数组

22 <script>

23 arr=$('h1').get();

24 alert(arr[0].outerHTML);

25 alert(arr[1].outerHTML);

26 </script>

9、jquery中的唯一属性？

length

10、jquery中获取jquery对象的两种方法？

size()方法和length属性

11、jquery中attr()方法的实质是什么？

js中的setAttribute()和getAttribute

26 $('h1').each(function(i){

27     $('h1').get()[i].setAttribute('num',i+1);

28 });

29

30 $('h1').click(function(){

31     this.innerHTML=this.getAttribute('num');

32 });

12、each方法作用？

因为jquery对象多为dom的数组，所以就是遍历

26 $('h1').each(function(i){

27     $(this).attr({'num':i+1});

28 });

13、jquery如何获取当前元素的索引值？

index方法

76     idx=$(this).index('.menu li');

14、jquery除什么之外的方法？

not方法

79     $('.info p').not($('.info p').eq(idx)).hide();

15、js对象和jquery对象的区别是什么?

jquery就是js中的new Object生成的普通对象

16、js对象和jquery对象的方法能不能共用?

不能共用

17、js对象和jquery对象能不能互换?(能)

1.js对象->jquery对象
$(dom);

2.jquery对象->js对象
$('h1')[1];
$('h1').get(1);

18、jquery核心方法有哪些？

size();
length;
get();
get(index);
each();
index();
data();

二、jQuery原理和核心方法

1、相关知识点

jQuery框架:
1.js对象和jquery对象的区别
2.js对象和jquery对象的转换
3.核心方法
4.选择器
5.筛选
6.属性选择器
7.文档处理
8.CSS处理
9.事件
10.效果
11.Ajax无刷新
12.工具

js对象和jquery对象的区别是什么?
jquery就是js中的new Object生成的普通对象

js对象和jquery对象的方法能不能共用?
不能共用

js对象和jquery对象能不能互换?(能)
1.js对象->jquery对象
$(dom);

2.jquery对象->js对象
$('h1')[1];
$('h1').get(1);

核心方法:
size();
length;
get();
get(index);
each();
index();
data();

2、代码

jquery对象原型开发

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaa</h1>

 </body>

 <script>

 function $(attr){

     obj=new Object();

     obj.username='user123';

     obj.say=function(){

         alert('my name is :'+this.username);

         return this;

     }

     obj.eat=function(){

         alert('my am eating!');

     }

     return obj;

 }

 // 对象链式结构

 $('imgid').say().eat();

 </script>

 </html>

把dom对象转成jquery对象

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <img src="a.png" id="imgid">

 </body>

 <script>

 imgobj=document.getElementById('imgid');

 // imgobj.onclick=function(){

 //     this.src='b.png';

 // }

 $(imgobj).click(function(){

     this.src='b.png';

 });

 </script>

 </html>

js对象和jquery对象互换

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <img src="a.png" id="imgid">

 </body>

 <script>

 imgobj=document.getElementById('imgid');

 $(imgobj).click(function(){

     this.src='b.png';

     // $(this).attr({'src':'b.png'});

 });

 </script>

 </html>

jquery对象转成js对象

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaaaaaa</h1>

     <h1>bbbbbbbbbbbbbbbbbbb</h1>

 </body>

 <script>

 val=$('h1')[].outerHTML;

 alert(val);

 </script>

 </html>

jquery对象转成js对象2

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaaaaaa</h1>

     <h1>bbbbbbbbbbbbbbbbbbb</h1>

 </body>

 <script>

 val=$('h1').get(1).outerHTML;

 alert(val);

 </script>

 </html>

把jquery对象转成js对象数组

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaaaaaa</h1>

     <h1>bbbbbbbbbbbbbbbbbbb</h1>

 </body>

 <script>

 arr=$('h1').get();

 alert(arr[0].outerHTML);

 alert(arr[1].outerHTML);

 </script>

 </html>

size和length获取jquery对象中dom对象的个数

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaaaaaa</h1>

     <h1>bbbbbbbbbbbbbbbbbbb</h1>

 </body>

 <script>

 alert($('h1').size());

 alert($('h1').length);

 </script>

 </html>

单击换行号

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

 </body>

 <script>

 $('h1').each(function(i){

     $('h1').get()[i].setAttribute('num',i+1);

 });

 $('h1').click(function(){

     this.innerHTML=this.getAttribute('num');

 });

 </script>

 </html>

each遍历jquery对象

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

 </body>

 <script>

 $('h1').each(function(i){

     $(this).attr({'num':i+1});

 });

 $('h1').click(function(){

     $(this).html($(this).attr('num'));

 });

 </script>

 </html>

index搜索匹配的元素,并返回相应元素的索引值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

             padding:0px;

         }

         .menu{

             height:50px;

             background: #272822;

             line-height: 50px;

         }        

         .menu ul{

             list-style:none;

         }

         .menu ul li{

             float: left;

             color:#fff;

             margin-left:15px;

             line-height: 50px;

             width:100px;

             text-align:center;

         }

         .menu ul li:hover{

             cursor: pointer;

             background: #ccc;

         }

         .info{

             height:200px;

             background: #ccc;

             overflow: hidden;

             padding:15px;

         }

         .info p{

             display: none;

         }

         .info p:first-child{

             display: block;

         }

         .menu a:hover{

             background: #ccc;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div class='menu'>

         <ul>

             <li>linux</li>

             <li>php</li>

             <li>javascript</li>

         </ul>

     </div>

     <div class='info'>

         <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>    

         <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

         <p>javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!</p>

     </div>

 </body>

 <script>

 $('.menu li').mouseenter(function(){

     idx=$(this).index('.menu li');

     $('.info p').eq(idx).show();

     $('.info p').not($('.info p').eq(idx)).hide();

 });

 </script>

 </html>

酒仙网上标签页效果

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

             padding:0px;

         }

         .menu{

             height:50px;

             background: #272822;

             line-height: 50px;

         }        

         .menu ul{

             list-style:none;

         }

         .menu ul li{

             float: left;

             color:#fff;

             margin-left:15px;

             line-height: 50px;

             width:100px;

             text-align:center;

         }

         .menu ul li:hover{

             cursor: pointer;

             background: #ccc;

         }

         .info{

             height:200px;

             background: #ccc;

             overflow: hidden;

             padding:15px;

         }

         .info p{

             display: none;

         }

         .info p:first-child{

             display: block;

         }

         .menu a:hover{

             background: #ccc;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div class='menu'>

         <ul>

             <li>linux</li>

             <li>php</li>

             <li>javascript</li>

         </ul>

     </div>

     <div class='info'>

         <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>    

         <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

         <p>javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!</p>

     </div>

 </body>

 <script>

 $('.menu li').eq(0).css({'background':'#ccc'});

 $('.menu li').mouseenter(function(){

     $(this).css({'background':'#ccc'});

     $('.menu li').not($(this)).css({'background':'#272822'});

     idx=$(this).index('.menu li');

     $('.info p').eq(idx).show();

     $('.info p').not($('.info p').eq(idx)).hide();

 });

 </script>

 </html>

data往jquery对象身上赋值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         select{

             width:100px;

             height:150px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

 </body>

 <script>

 $('h1').each(function(i){

     $(this).data({'num':i+1});

 });

 $('h1').click(function(){

     $(this).html($(this).data('num'));

 });

 </script>

 </html>
 

jquery-2 jQuery原理和核心方法（多看学习视频）的更多相关文章

  1. JM-2 jQuery Mobile的使用（多看学习视频）

    JM-2 jQuery Mobile的使用(多看学习视频) 一.总结 一句话总结:前端框架的使用全都一个样,本质都是css和js,引入文件也是这些.使用都是看手册,超简单. 1.jQuery Mobi ...

  2. <a href='javacript:' title='{$str}'>是什么意思（多看学习视频）

    <a href='javacript:' title='{$str}'>是什么意思(多看学习视频) 一.总结 一句话总结: 1.javascript:是什么? 伪协议,后面接javascr ...

  3. php课程 4-15 数组遍历、超全局数组、表单提交数据（多看学习视频）

    php课程 4-15  数组遍历.超全局数组.表单提交数据(多看学习视频) 一.总结 一句话总结:超全局数组特别有用,比如$_SERVER可以获取所有的客户端访问服务器的情况. 1.数组遍历三种方式( ...

  4. jQuery的实现原理和核心

    1.jQuery的实现原理 1)jQuery采用的是构造函数模式进行开发的,jQuery是一个类 2)上面说的常用的方法(CSS.属性.筛选.事件.动画.文档处理)都是定义在jQuery.protot ...

  5. jQuery编程中的一些核心方法简介

    调用 jQuery 对象的方法很简单: $('h1').remove(); 大多数 jQuery 方法都是像上面这样被调用的,这些方法都位于 $.fn 命名空间内,这些方法称为 jQuery 对象方法 ...

  6. jQuery源码分析_工具方法（学习笔记）

    expando:生成唯一JQ字符串(内部使用) noConflict():防止冲突 isReady:DOM是否加载完成(内部) readyWait:等待多少文件的计数器(内部) holdReady() ...

  7. 2018-08-26 jQuery与javaScript的区别及核心方法

    1.jq对象就是js new Object 生成的普通对象. 2.jq对象与js对象,他们的方法不能共用! 3.jq对象与js对象的相互转化: js对象转jq对象 -> $(js_obj);// ...

  8. jQuery 常用核心方法

    jQuery 常用核心方法 .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数 $('p').each(function(idx,node){ $(node).text(idx + ...

  9. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

随机推荐

  1. CTF加密题型解析：RSA算法的CTF解法之一

    RSA介绍 根据加密原理,可以将大部分的加密算法分为两大类:对称加密算法和非对称加密算法.对称加密算法的加密和解密采用的是同一套算法规则.而非对称加密算法加密时用的是公钥(公开给所有人),解密时用的是 ...

  2. l洛谷 P3926 SAC E#1 - 一道不可做题 Jelly

    P3926 SAC E#1 - 一道不可做题 Jelly 题目背景 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢吃蒟蒻果冻.而SOL菌也很喜欢蒟蒻果冻. 有一 ...

  3. java和javascript日期校验和闰年问题分析和解决方式

    1.闰年的介绍 地球绕太阳执行周期为365天5小时48分46秒(合365.24219天)即一回归年.公历的平年仅仅有365日,比回归年短约0.2422 日,所余下的时间约为四年累计一天.故四年于2月加 ...

  4. 2lession-文件访问

    今天继续学习python,因为是根据网上的教程,里面用到了一些例子,包含有后面的知识点.但是,因为自己稍微有点c.java等语言基础,所以并没有严格按照教程来学习,反而是遇到知识点就记录下来. 代码如 ...

  5. string-format样式使用

    首先我们看如下代码 protected String calcu1() { StringBuffer resultB = new StringBuffer(); String str = null; ...

  6. Flask项目之手机端租房网站的实战开发（八）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  7. ajax 通过return 返回data值

    方法例如以下: 1. ajax 必须为同步 设置async:false 2. 定一个局部变量 把data赋值给局部变量 然后 return 局部变量就可以 示比例如以下 function getEmp ...

  8. [Web Security] JSON Hijacking

    After reading the blog, the main take away from there is: "Never send back JOSN array to the cl ...

  9. php课程 11-37 类和对象的关系是什么

    php课程 11-37 类和对象的关系是什么 一.总结 一句话总结:类生成对象,对象是类的实例化,一定是先有类,后有对象,一定是先有标准,再有个体. 1.oop的三大优势是什么? 重用性,灵活性.扩展 ...

  10. Spring Boot + Jersey

    Jersey是一个很好的Java REST API库.当你用Jersey实现REST的时候.是很自然的.同一时候Spring Boot是Java世界中还有一个很好的工具.它降低了程序的应用配置(< ...