• jQuery的核心思想


    jQuery?----www.jQuery.com
    jQuery的理念:write less, do more
    jQuery的成就:世界排名前100的公司,46%都在使用jQuery,远远超过其他库,微软公司甚至把jQuery库 作为了他们的官方库。
    what is jQuery?(这是我复制官网上的介绍,觉得说的很专业)
    jQuery is a fast, small, and feature-rich(功能丰富) JavaScript library. It makes things like HTML document traversal and manipulation(循环和遍历), event handling(事件 处理), animation(运动), and Ajax(异步的js与xml) much simpler with an easy-to-use API that works across a multitude of browsers(跨浏览器). With a combination(组合) of versatility and extensibility(通用性和可扩展性的), jQuery has changed the way that millions of people write JavaScript.
    jQuery的特点?
              轻量级脚本语言(Lightweight footprint)
              css兼容性(css compliant)
              跨浏览器(cross browser)
    jQuery的核心思想
     
      1 <!doctype html>
      2 <html>
      3     <head>
      4         <meta charset="utf-8">
      5         <meta name="description" content="">
      6         <meta name="viewport" content="width=device-width, initial-scale=1">
      7         <title>jQuery--jQuery的设计思想1</title>
      8         <link rel="author" href="humans.txt">
      9         <script src="jquery-1.4.1.min.js"></script>
     10         <script type="text/javascript">
     11  
     12             /*
     13             1.选择网页元素
     14                 1.1 css选择器
     15                     -$(document)//选择整个文档
     16                     -$("#myId")//选择ID为myId的网页元素
     17                     -$('div.myClass')//选择class为myClass的div元素
     18                 1.2 jQuery特有的表达式
     19                     -$('a:first')//选择网页中第一个a元素
     20                     -$('tr:odd')//选择表格的奇数行
     21                     -$('div:visible')//选择可见的div元
     22             2.方法函数化
     23                 1.1 原生的
     24                     -window.onload
     25                     -innerHTML
     26                     -onclick
     27                 1.2 jquery的
     28                     -$()
     29                     -html()
     30                     -click()
     31             3.原生与jquery的关系
     32                 3.1 原生、jq可以共存
     33                     -$("#div1").html()
     34                     -oDiv.innerHTML
     35                 3.2 原生、jq不能混用
     36                     -$("#div1").innerHTML
     37                     -ODIV.html()
     38             4.改变结果集
     39                 4.1 强大的过滤器
     40                     -$('div').has('p');//选择包含p标签的div标签
     41                     -$('div').not('.myClass');//选择class不等于myClass的div元素
     42                     -$('div').filter('.myClass');//选择class等于myClass的div元素
     43                 4.2 相邻元素查找
     44                     -$('div').next('p');//选择div元素后面的第一个p元素
     45                     -$('div').parent();//选择div元素的父元素
     46                     -$('div').children();//选择div的所有子元素
     47             5.链式操作
     48                 $('div').find('h3').eq(2).html('hello');
     49                 --找到div元素,选择其中的h3元素,选择第3个h3元素,将它的内容改为Hello
     50  
     51                 jQuery还提供了.end()方法,使得结果集可以后退一步
     52                 ------>这个就使得我们可以用一个链式操作,写完一整个效果都没有问题。
     53             6.取值与赋值合体
     54                 $('h1').html();//html()没有参数,表示取出h1的值
     55                 $('h1').html('hello');//html()没有参数Hello,表示对h1进行赋值
     56  
     57                 .val()
     58                 .attr()
     59                 .width()
     60  
     61                 取值是一组中的 第一个元素,赋值是所有的元素
     62             7.元素移形换位
     63                 7.1 直接移动该元素
     64                     -$('div').insertAfter($('p'));//把div元素移动到 p元素后面
     65                     -$('div').appendTo($('p'));//把div元素剪切到p元素的后面
     66                 7.2 移动其他元素
     67                     -$('p').after($('div'));//把p元素加到div元素前边
     68                     -$('div').append($('p'));//把p元素插入到div的里边
     69                 区别:操作的元素不同
     70             8.强大的创建
     71                 $('#ul').append('<li>aaaa</li>');
     72                 ===
     73                 var oLi  = $('<li>');
     74                 oLi.html('aaaa');
     75                 $("#ul").append(oLi);
     76  
     77                 clone()
     78             9.工具方法(重点)
     79                 9.1 构造函数上的方法
     80                     -$.each([],function(){})
     81                     -$.trim($('div').attr('class'))--去掉class属性的前后空格
     82  
     83                     解释:$.方法:添加到构造函数,静态方法
     84                 9.2 原型上的方法
     85                     -$('div').each(function(index,elements){})
     86                     index--索引
     87                     elements--当前所有元素中正在操作的
     88  
     89                 demo:
     90                 function $(){
     91                     $.each = function(){
     92                         //构造函数下面的方法:$.each()
     93                     }
     94                     $.prototype.each = function(){
     95                         //原型下面的方法:$('div').each()
     96                     }
     97                 }
     98             10.事件操作
     99                 10.1 独立事件
    100                     - click()
    101                     - mouseover()
    102                 10.2 通用事件
    103                     - bind();//同一个对象上,可绑定多个事件
    104                     - one();//绑定的事件只可以执行一次
    105                     -unbind();//取消
    106                     - e:event对象
    107                     - pageX等;//鼠标相对于屏幕的坐标,原生中是clientX
    108                     - 阻止默认与冒泡;//return false--既可以阻止冒泡又可以阻止默认事件
    109  
    110                     demo:toggle--循环执行,后面可以接多个函数
    111                     $('input').toggle(function(){},function(){},function(){})
    112                     hover--$('div').hover(function(){},function(){})
    113             11.运动效果
    114                 11.1 常见效果
    115                     -.fadeIn();//淡入
    116                     -.fadeOut();//淡出
    117                     -.slideDown();//向下展开
    118                     -.slideUp();//向上卷起
    119                 11.2 复杂效果
    120                     -.animate();//运动
    121                     -.stop();//阻止前面的运动效果,执行当前的运动事件
    122             12.插件机制(plugins)--demo
    123                 在JQ的源码上进行拓展,一个个做好的应用
    124             13.UI组件(jQuery UI)
    125                 JQ官方提供的功能效果和UI样式
    126             14.手机、社区、论坛
    127  
    128             */
    129         </script>
    130     </head>
    131     <body>
    132     </body>
    133 </html>
  • 相关阅读:
    JN_0052:去掉用户账号 UAC 提示设置
    H50084:纯html全屏视频背景
    JS_0065:清除iframe内存 内存优化 js 拼凑出变量名并调用变量方法
    Ele_0002:获取当前启动exe所在目录地址 穿透效果
    Ele_0004:electron 置顶效果设置 全屏二级页面置顶效果
    H50083:html页面直接嵌入另一个html页面
    Ele_0005:electron 穿透效果,全局穿透 区域穿透
    JN_0053:win系统的自启动目录
    H50085:html 扇形菜单
    Nandflash关于文件丢失导致启动卡死的解决方案
  • 原文地址:https://www.cnblogs.com/helena000/p/5844141.html
Copyright © 2020-2023  润新知