jquery

原创 2018年04月16日 11:33:13

jquery 优势:

  1.消除了很多跨浏览器的兼容性问题,

  2.比javascript代码量要少。

书写规范:

1.总是使用分号。

2.常量使用大写,每个单词之间用一个下划线分隔

3.函数,变量和方法名都采用驼峰拼写法,并且将整个变量名的第一个字母小写

4.类和枚举名采用驼峰拼写法,但整个变量名第一个字母大写

5.相等性:总是使用等同(===)进行比较:  

  (==)操作符是危险的,因为它在执行比较之前,强制执行类型转换

if(userName ===null || userName ===undefined){}

6.以块方式组织代码:对于控制结构[if/else/for/while/try]总是使用花括号,并且总是以多行的代码块方式来编写。不使用没有花括号的单行if语句。

类型检查:

 

对象

类型检查表达式

String

Typeof object ===”string”

Number

Typeof object ===”number”

Boolean

Typeof object ===”boolean”

Element

Object.nodeType

null

Object ===null

Null undefined

Object ===null


7.字符串:使用双引号而不是单引号

8.打印日志:console.log();console.debug();console.clear();

9.声明变量的方式:

  i= 0;//隐式声明
  var i =0;//显示声明
  var x;//undefined


10.作用域:

    1.作用域(scope)指的是变量或对象的可见范围。全局变量(global)在应用中的任何地方都可见,而局部变量(local)仅在声明该变量的函数内可见。

    2.隐式声明的变量总是具有全局作用域,即使该变量是在某个函数体中声明的。

11.变量名必须以一个字母,下划线或美元符号开头,后跟0个或多个字母数字字符,下划线或美元符号。不能使用关键字。

12.理解对象:对象是属性的集合,每一个属性具有一个名称和一个值。

    var userInfo = new UserInfo();

13.eval():可以接受一个字符串,并将其市委javascript代码执行。应该限制eval()函数的使用,它很容易在代码中引入各种各样严重的安全问题。

14.队列是一种先进先出的数据结构,队列总是将元素添加到队列的尾部,移除元素时则总是从队列的头部开始。

15.采用链式操作,除了可读性更好,还具有更好的性能

16.$(function(){
 
  $(".subBtn").bind('click',function(){  

    var name= $("#username").val();

            var name=$("input[name='username']").val();

    var name = $("#username").attr("label");

  });

           var numArray = [1,2,3,4];

    $.each(numArray,function(index,value){

                 value = value * 2;

                 console.log("index is:"+index+"new value is:"+value);
             })

})

17.

类型

描述

:animated

选择当前正在执行动画的所有元素

:eq()

选择索引等于指定值的元素

:even

选择索引值为偶数的所有元素

:first

选择第一个元素

:gt()

选择索引大于指定值的元素

:header

选择所有的标题元素,比如h1,h2

:last

选择最后一个元素

:lt

选择索引小于指定值的元素

:not

选择与选择器不匹配的元素

:odd

选择索引值为奇数的所有元素

//获取所有input 属性的长度:

var length = $(":input").length;

var text = $(":text").length;

var textLength= $("input[type='text']").length;

18.

表单元素过滤器

过滤器

描述

:button

选择所有button元素和类型为button的元素

:checkbox

选择所有类型为checkbox的元素

:checked

匹配所有已被选中的元素

:disabled

选择所有不可用元素

:enabled

选择所有可用元素

:file

选择所有类型为file的元素

:image

选择所有类型为image的元素

:input

选择所有input,textarea,select,button元素

:password

选择所有类型为password的元素

:radio

选择所有类型为radio 的元素

:reset

选择所有类型为reset的元素

:selected

选择所有已选中的元素

:submit

选择所有类型为submit 的元素

:text

选择所有类型为text的元素

var hidden = $(":text:hidden").length;

var visible = $(":text:visible").length;

var h = $("h5:contains('xiaowangba')").length;

var h = $("h5:contains('xiaowangba')").html();

var li = $("li");

var lieq= li.eq(1);

var lihtml= lieq.html();

 console.log($("div span:first-child"));

console.log($("div span:last-child"));

console.log($("div span:only-child"));

console.log($("div span:nth-child(2)"));

console.log($("div span:nth-child(2n+1)"));

console.log($("div span:nth-child(even)"));

var ul = $("ul");

 $("p").text("change text");

19.子元素过滤器

选择器

描述

:first-child

选择每个父元素的第一个子元素

:last-child

选择每个父元素的最后一个子元素

:nth-child()

选择每个父元素的第nth-child()个子元素

:only-child

选择具有唯一一个子元素的元素

20.链式操作: var li = $("li");

 //下标从0开始,大于下标3的变绿色,,小于3的变红色,等于3的变蓝色

li.filter(":gt(3)").css("color","green").end().filter(":eq(3)").css("color","blue").end().filter(":lt(3)").css("color","red").end();

21. li 变成数组,进行翻转,循环

 var li = $("li").toArray();
 li =li.reverse();
for(var i =0;i<li.length;i++){
   console.log(li[i].innerHTML);
}

22.要获取或设置元素的内容【两种方法】及区别:

第一种方法使用.text()方法。

第二种方式使用.html()方法。它的用法与.text()方法一样:当调用不带参数的.html()方法时,获取的元素的内容;当调用带参数的.html()方法时,设置元素的内容。

区别:

1  .text()方法即可用于xml文档,也可用于HTML文档,而.HTML()只能用于HTML文档。

2  .text()将获取所有后代元素的文本内容,而.HTML()方法仅获取匹配的第一个元素的文本内容

 var content = $("p").text();

 var content = $("p").text("change text");

 var content = $("p").html();

 var content = $("p").html("change html");

23.

Jquery事件

.blur()

.mouseenter()

.focus()

.mousemove()

.select()

.mouseout()

.submit()

.mouseover()

.click()

.mouseup()

.dblclick()

.toggle()

.focusin()

.error()

.focusout()

.resize()

.hover()

.scroll()

.mousedown()

 $(function(){
 
  $(".subBtn").bind('mouseover',function(){  

  });
  
  $(".subBtn").unbind("mouseover");

})

24.jquery 可以在运行时动态插入dom元素,所以,想在还不存在的元素上绑定一个时间,.bind()方法将不再有效。

    而.live()方法,不论元素是否已存在都可以绑定一个事件。销毁的方法为:.die()方法。

    .live()方法无法链接调用,如果想链接调用,则可以用delegate()方法代替.live()方法。销毁的方法:undelegate()方法。

    $(function(){
 
$("#anchor").live("click",function(){
          alert("xiaopangzi i miss you");
});
 
$("#sub").bind("click",function(){ 

      //在该元素内部添加 

              $("#divA").append("<a href='#' id='anchor'>button</a>");

              //在该元素之前添加

               $("#divA").before("<a href='#' id='anchor'>button</a>");

               //在该元素之后添加

               $("#divA").after("<a href='#' id='anchor'>button</a>");

});

         //仅执行一次追加

         $("#sub").one("click",function(){ 

        });

       //链式事件编程

        $("#text").mouseover(function(){ 
    $(this).css("color","red");
}).mouseout(function(){
    $(this).css("color","green");  

});

         //等于bind时间

         $("#sub").on("click",function(){
     console("eq bind method");
  });

})

<div id="divA" style="width:300px;height:100px;border:1px solid red;">a</div>

<input type="button" value="submit" id="sub"/>

25.$.offset()方法,它返回一个包含数值类型的left值和top值的对象,指出元素相对于文档的位置。

      var pos = $(this).offset();

      fast:200毫秒   slow:600毫秒

     $("div#message").slideUp('fast');

     $("div#message").slideDown('fast');


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35781178/article/details/79958198

Jquery中的on()使用理解,无法使用on方法

jquery中利用了on方法给未来元素绑定方法。 利用on方法可以方便的对将生成的元素标签进行方法绑定。 本例中使用的是jquery.min.js 是2.1版本,低版本的jquery使用的是liv...
  • a748448660
  • a748448660
  • 2016年10月09日 12:38
  • 980

jQuery的发展史,你知道吗?

每天多学一点知识,就少写一行代码 2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间)。虽然过了这么久,但它依然以其简洁、灵活的编程风格让人一见倾心。在本...
  • zuoninger
  • zuoninger
  • 2014年01月21日 08:39
  • 5401

【jQuery】关于jQuery中$(function() {});

因为一直以来都是在进行后端开发,对前端开发接触得极少,其实是从心里面觉得那个既浪费时间又没啥成就感,所以也不太愿意花时间在那上面了。 最近因为工作的原因,不得不要接触到一些前端页面的东西,发现前端开发...
  • blue225
  • blue225
  • 2016年05月07日 10:54
  • 5273

在线jquery编辑调试的网站

无意中找到一个在线的jquery编辑调试的网站,可能选择jquery版本。好处可能还不止于此,有空看看吧 https://jsfiddle.net/ sample: http://jsfiddl...
  • hotdust
  • hotdust
  • 2016年06月15日 09:41
  • 1215

html怎么引入jQuery,即怎么使用jQuery框架?

  • Ideality_hunter
  • Ideality_hunter
  • 2016年12月09日 12:39
  • 4452

还有人不知道嘛?jquery和jQuery Mobile的区别

因为最近连载《跨平台构建》 jquerymobile是以jquery为基础的. 其相关的接口和使用的页面样式都是为了达到让web app更趋向于native app的目的. 你可以理解为jq...
  • bookzhaopin
  • bookzhaopin
  • 2014年07月18日 15:38
  • 2568

5款移动开发轻量jQuery的替代品

我们都爱jQuery的。这个网站甚至专门为建设美丽的例子,使用该库。但也有情况下,jQuery是不是一个明智的选择。如果您使用的是它只有简单的DOM操作或一个AJAX请求或两个,为什么放慢你的页面加载...
  • Gavid0124
  • Gavid0124
  • 2016年12月29日 11:44
  • 2037

JQuery基础(一):JQuery 常用的字符串处理函数

1.去掉空格 var txt=$.trim($("txt1").val()); 2.转为数字 txtNum=Number($.trim(txt)) + 1...
  • yinjingyu_bisheng
  • yinjingyu_bisheng
  • 2013年05月02日 12:48
  • 3994

jquery 移除css样式

解决办法 · 1、移除全部使用removeattr(“style”); 2、移除单个使用css(“属性”,“”);...
  • u013766398
  • u013766398
  • 2017年03月21日 09:35
  • 10817

jQuery - 参考资料 - close Method (window):

jQuery - 参考资料 - close Method (window): [close Method (window): - 文档]http://msdn2.microsoft.com/en...
  • hu_zhenghui
  • hu_zhenghui
  • 2007年12月02日 18:17
  • 4554
收藏助手
不良信息举报
您举报文章:jquery
举报原因:
原因补充:

(最多只允许输入30个字)