当前位置: 澳门新濠3559 > 服务器运维 > 正文

变量名不允许包含空格与标点符号,与JQuery 常用

时间:2019-11-29 04:05来源:服务器运维
jquery就对javascript的一个扩展,封装,就是让javascript更好用,更简单。人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能。JavaScript与JQuery 常用方法比较 什么是 JQu

jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单。人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能。JavaScript 与JQuery 常用方法比较

什么是JQuery呢,很多都是只闻其名。

1.语句

1、加载DOM区别 JavaScript: window.onload function first; } function second; } window.onload = first; window.onload = second; //只会执行第二个window.onload;不过可以通过以下方法来进行改进: window.onload = function; } Jquery: $ ${ function first; } function second; } $.ready; } $.ready; } //两条均会执行 } 2、获取ID JavaScript: document.getElementById JQuery: $ 3、获取Class JavaScript: JavaScript没有默认的获取class的方法 JQuery: $ 4、获取TagName JavaScript: document.getElementsByTagName JQuery: $ 5、创建对象并加入文档中 JavaScript:var para = document.createElement; //创建一个p元素 document.body.appendElement; //将p元素追加为body的lastchild子节点,如果想将新创建的p元素插入到已存在的某个元素之前,可以使用insertBefore()方法 JQuery:JQuery提供了4种将新元素插入到已有元素、appendTo、prependTo; eg,html代码: $.append; //输出:

jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

可以以分号(;)结束语句,也可以不要

World!Hello!

要用JQuery,首先要有一定的JS基础,否则根本看不懂这是个嘛玩意。有了JS基础后,就会发现,哇,JS好复杂,JQuery好简单粗暴

如:first statememt; second statememt;

$.appendTo.prepend; //输出:

下面就让我们来看一下如何来用JQuery

first statememt

Hello!World!

【Jquery语法】
         1.通过jQuery("选择器").action();通过选择器调用事件函数。
             但JQuery中jQuery可以用$符代替,$("选择器").action();
             ①选择器可以直接使用CSS选择器,选中元素
             ②action表示对元素执行的操作

second statememt

$.prependTo; //输出:同上 6、插入新元素 JavaScript: insertBefore() 语法格式: parentElement.insertBefore(newElement,targetElement) eg, 将一个img元素插入一个段落之前。 html代码: 澳门新濠3559 1 JavaScript代码: var imgs = document.getElementById; var para = document.getElementsByTag; para.parenetNode.insertBefore; JQuery: JQuery提供了4种将新元素插入到已有元素、insertAfter、insertBefore; eg,html代码: JQuery代码 $.after; //输出:Hello! $. insertAfter .before; //输出:Hello! $.insertBefore; //输出:同上 7、复制节点 JavaScript: reference = node.cloneNode 这个方法只有一个布尔型的参数,它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。 JQuery: clone() //复制节点后,被复制的新元素并不具有任何行为 clone //复制节点内容及其绑定的事件 备注:该方法通常与appendTo等方法结合使用。 8、删除节点 JavaScript: reference = element.removeChild方法将一个给定元素里删除一个子节点 JQuery: remove方法作用就是从DOM中删除所有匹配的元素,remove()方法还可以与其他的过滤选择器结合使用,非常方便。 eg,将ul li下的title不是"Hello"的li移除: $.remove; empty方法作用是清空节点。 9、包裹节点 JavaScript: JavaScript暂无 JQuery: wrap() //将匹配元素用其他元素的结构化标记单独包裹起来 wrapAll() //将所有匹配的元素用一个元素包裹起来 wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来 10、属性操作:设置属性节点、查找属性节点 JavaScript: document.getElementsByTagName JQuery: JQuery中设置和查找属性节点都是:attr.attr; //获取p元素的title属性; $.attr; //设置p元素的title属性 $.attr('title':'My title','class':'myClass'); //当需要添加多个属性时,可以用"名:值"对的形式,中间用逗号隔开。 11、替换节点 JavaScript: reference = element.replaceChild 该方法是将一个给定父元素里的一个子节点替换为另外一个节点。 JQuery: replaceWith eg: 想替换为:

ps:各种选择器的用法可以自己去查帮助文档
         2.文档就绪函数:防止了文档在完全加载(就绪)之前运行JQuery代码
             $(document).ready(function(){
                    JQuery代码
                });
            $(function(){})//这是文档就绪函数简写方式PS

2.注释

Hi

JQuery代码: $ .replaceWith; 或者可以写成: $.replaceAll; 12、CSS-DOM操作 JavaScript: 格式:element.style.property CSS-DOM能够读取和设置style对象的属性,其不足之处是无法通过它来提取外部CSS设置的样式信息,而JQuery的.css()方法是可以的。 注意点:CSS中的如"font-size"这样有"-"的,要使用首字母小写的驼峰式表示,如fontSize。 JQuery: 格式:$方法获取元素的样式属性 此外,JQuery还提供了height分别用来获取元素的高度和宽度、css返回高宽,且带单位。

下面为大家补充一下别的网友的补充

jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助。

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:

库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。

我自己弄了个子域名,实际上也是跳转到Google的CDN

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:

澳门新濠3559,1 定位元素 JS document.getElementById

jQuery $ 通过id定位 $ 通过class定位 $ 通过标签定位

需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。

2 改变元素的内容 JS abc.innerHTML = "test"; jQuery abc.html;

3 显示隐藏元素 JS abc.style.display = "none"; abc.style.display = "block";

jQuery abc.hide;

abc.toggle(); //在显示和隐藏之间切换

4 获得焦点

JS和jQuery是一样的,都是abc.focus();

5 为表单赋值 JS abc.value = "test"; jQuery abc.val;

6 获得表单的值 JS alert; jQuery alert;

7 设置元素不可用 JS abc.disabled = true; jQuery abc.attr;

8 修改元素样式JSabc.style.fontSize=size;jQueryabc.css;

JSabc.className="test";JQueryabc.removeClass(); abc.addClass;

9 AjaxJS自己创建对象,自己处理浏览器兼容等乱七八糟的问题,略去不表jQuery$.get("abc.php?a=1&b=2", recall);postvalue = "a=b&c=d&abc=123";$.post("abc.php", postvalue, recall);

function recall {alert;//如果返回的是json,则如下处理//result = eval; //alert;}

10 判断复选框是否选中jQueryif == "checked")注意:网上说的.attr == true实际上不能用,上面这个测试过能用

看到文档就绪函数,不免就会想到JS中的window.onload。这里我们来说一下它们俩的区别

单行  //

①.window.onload需在网页所有内容加载完成后执行,包括图片音频等。 而文档就绪函数只需要在网页DOM结构加载以后便可执行。

多行 /**/

②.window.onload只能写一个,写多个只会执行最后一个。 文档就绪函数,可以写多个,也不会被覆盖。

3.变量

当然,原生DOM对可以与JQuery对象可以相互转化

变量是严格区分大小写,变量名不允许包含空格与标点符号,允许字母,数字美元符号($)与下划线

①原生DOM对象转JQuery对象: $(DOM对象);
            var p=document.getElementById("p");
            $(P);//转为JQuery对象
②JQuery对象转DOM对象
         $("p").get[0]   或者  $("p")[0]
         例子:$("p").get(0).style.color="red";

var mood;

当然我们一般也不会这么干,容易弄混了。

var age;

JQuery中的事件绑定

也可

时间绑定的快捷方式

var mood,age;

$("button:first").click(function(){

直接赋值

})

var mood="happly"

 使用on进行事件绑定

4.数据类型

①使用on进行单事件绑定

4.1 字符串   字符串必须包含在引号里,单引号或双引号都可以

$("button").on("click",function(){

转义符:

  //this取到当前调用函数的对象

4.2 数值

  console.log($(this).html());

4.3 布尔值   true/false

})

4.4 数组   声明关键字 Array,数组是从0开始计数

②使用on同时为多个事件绑定同一函数

var  strArr = Array(4);

$("button").on("mouseover click",function(){

var  strArr = Array();

  console.log($(this).html());

填充数组  array[index]=element

})

strArr[0]="One"

③调用函数时传入自定义参数

var  strArr=Array("one","two","three");

$("button").on("click",{name:"lyx"},function(event){

var  strArr=["one","two","three"];

  //使用event.data.属性名 找到传入的参数

var  strArr=["one",1980,true]; --不同数据类型

  console.log(event.data.name);

关联数组 为下标设置名称,而不用数字

})

var strArr = Array();

④使用on进行多函数多事件绑定

strArr["name"]="Josn";

$("button").on({

strArr["age"]=1980;

  click:function(){

4.5 对象  声明关键字 Object 获取元素不使用方括号([])或下标,而是使用点号(.)

  console.log("click")

var strObj = Object();

  },

strObj.name="objname"

  mouseover:function(){

strObj.age="objage"

  console.log("mouseover")

var strObj={};

}

strObj.name="objname"

})

strObj.age="objage"

⑤使用on进行事件委派

var strObj={name:"objname",age:1980};

>>将原本应该绑定到某元素上的事件还为绑定在父元素乃至根节点上,然后委派给当前元素生效

5 操作  = ,+, -, /, *

eg:$("p").click(function({}));

var year=year+1

$(document).on("click","p",function(){});

year++

>>默认的绑定方式只能帮顶到页面初始时已有的p元素,当前页面新增p元素时。无法绑定到新元素上;

加号(+) 即可用于计数之和,也可用于拼接字符串

使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件

var msg=1+2

$("button").on("click",function(){

var msg="1"+"2"

  var p=$("<p>44444</p>");

alert(msg);

  $("p").after(p);

+= 加法并赋值

})

var year=2000

$(document).on("click","p",function(){

var msg="this year is";

  alert("1");

msg+=year;

})

alert(msg) --->"this year is2000"

这段程序中新增的P都会有alert("1") 事件

6 条件语句

 

if (condition){

 

statement;

off取消事件绑定

} else {

1.$("p").off(); 取消所有事件

}

2.$().off("click"); 取消点击事件

6.1 比较操作符 > ,<, >=, <=, == ,!= , 全操作符(===,!==)

3.$("p").off("click mouseover")取消多个事件

6.2 逻辑操作符 && ,||,!

4.$(document).off("click","p")取消事件委派

7.循环语句

 

while (condition){

用.one绑定事件,只能执行一次

statement;

 $("button").one("click",function(){

}

  alert("1");

--循环10次,count最终值为11

})

var count=1;

 

while (count <11){

.trigger("event")自动触发某元素的事件

alert(count);

 

count++;

$("p").click(function(event,arg1,arg2){

}

  alert("触发了p的click事件"+arg1+arg2);

do{

})

statement;

$("button").click(function(){

} while (condition);

  $("p").trigger("click",["haha00","hehe"]);

var count=1;

})

do{

**JQuery中常见的动画效果

alert(count);

**

count++;

.show
①.不传参:让隐藏的元素直接显示,不进行动画
②传入时间:多少毫秒之间之内完成动画
③传入(时间,函数):完成动画之后,执行回掉函数
.show()动画执行效果:同时修改元素的宽度,高度,opacity属性
.hide()让显示元素隐藏,与show()相反
.slideDown()让隐藏元素显示,效果为从上往下增加高度
.slideUp()让显示元素隐藏,效果,从下往上减小高度
.slideToggle()让现实的隐藏,让隐藏的显示
.fadeOut():让显示元素隐藏,淡出
.fadein();让隐藏元素显示,淡入
.fadeToggle();让现实的隐藏,让隐藏的显示,淡入淡出
.fadeTo(时间,透明度,函数);同.fadeToggle(),但多了透明度参数,可以指定显示的最终透明度
.animate({最终样式属性键值对},动画时间,动画效果"linear" "swing",回掉函数)   自定义动画

} while (count<11)

    p{
                width: 0px;
                height: 100px;
                background-color: green;
                overflow:"hidden";
                /*display: none;*/
            }
            $("p").animate({
                width:"100px",
                opacity:"0.5"
                
            },3000,"linear",function(){
                alert("hello")
            })

for (initial condition; test condition; after condition){

 

statement;

 这段JQ代码的效果是使p的宽度在3秒内从0渐变为100px,透明度由1渐变为0.5,

}

动画效果完成后执行函数,alert("hello")

for (var count =1; count<11; count++){

JQuery这种框架,最需要的是还是学会自己去查帮助文档,了解各种详细的用法这里推荐W3Cschool,有在线版,离线版,手机版,是不是很方便~

alert(count);

 

}

 

8 函数

 

funtiont name(arguments) {

statement;[--return];

}

9 对象  由一些属性和方法组合在一起而构成的一个数据实体(用户自定义/内建对象/宿主对象)

包含在对象里的数据可以通过两种形式访问,属性和方法 使用“点”语法来访问

Object.property

Object.method()

创建对象实例

var jeremy = new person;

如:

属性访问

person.mood

person.age

方法访问

person.walk();

person.sleep();

10 DOM 节点树

元素节点: 形成文档的结构  如 ,

,

文本节点: 形成文档的内容  如

this is text

 这个标记中的“this is text”

属性节点: 开成文档的属性描述 如 this is text  这个标记中的id="preo" class="cls"

获取元素三种方式

getElementById 返回元素节点对应的对象

document.getElementById(id);

如 document.getElementById(“purchases”);

getElementsByTagName 返回一个对象数组,每个对象对应文档里给定标签的一个元素

element.getElementsByTagName(tag);

如 document.getElementsByTagName("li");

getElementsByClassName 返回一个对象数组,每个对象对应文档里给定标签的一个元素

document. getElementsByClassName(class);

如 document. getElementsByClassName("sale");

typeof 返回对象的类型

获取与设置属性

getAttribute  获取属性 此方法不属性document对象,只能通过元素节点对象调用

object.getAttribute(attribute)

如 item=document.getElementsByTagName("li");

for (var i=0;i

alert(item[i].getAttribute("title"));

}

setAttribute 修改属性值

object.setAttribute(attribute,value)

如 item = document.getElementById("purchases");

item.setAttribute("title"," a list of good");

ChildNodes属性:元素下的子元素

nodeType属性:元素类型取值(1为元素节点,2为属性节点,3 文本节点)

firstchild和lastchild属性

nodeValue属性:获取/改变一个文本节点的值 (节点直接调用将得到null,需处理才行)

如 node.childNodes[0].nodeValue   ==  node.firstchild.nodeValue

node.childNodes[node.childNodes.length-1].nodeValue  ==  node.lastchild.nodeValue

事件处理函数

事件处理函数的作用是,在特定事件发生时调用特定的JavaScript代码

语法: event = "JavaScript statement(s)"

如:onclick = "showPic(this)"

JavaScript代码包含在一对引号之间。可以把做任意数量的JavaScript语句放在这对引号之间,只要把各条语句用分号隔开即可

如:onclick = "showPic(this);return false;"

事件处理函数工作机制:在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值,这个值被传递给那个事件处理函数。

如:在当前页面显示图片

One1

function ShowImage(items) {

varscrValue = items.getAttribute("href");

varshowImgArea = document.getElementById("showImgArea");

showImgArea.setAttribute("src", scrValue);

}

如果没有return false,效果将是新建一个窗口展示图片,而不会在下方显示图片

创建新的浏览窗口

window.open(url,name,features)

url:新窗口里打开的网页URL地址,省略则为空白窗口

name:新窗口名称

features:以逗号分隔的字符串,其内容为新窗口的各种属性(宽度,高度,工具条,菜单条,初始化位置等)

如:window.open(winURL,"popup","width=320,height=480");

"javascript:" 伪协议

如  Example

Example">

herf="#"代表创建一个空链接

分离JavaScrip

element.event = action....

如:getElementbyId(id).event = action

function popUp(winURL) {

window.open(winURL,"popup","width=320,height=480");

}

function pLinks() {

varlinks = document.getElementsByTagName("a");

for(vari = 0; i < links.length; i++) {

if(links[i].getAttribute("class")=="popup"){

links[i].onclick =function() {

popUp(this.getAttribute("href"));

returnfalse;

}

}

}

}

window.onload = pLinks;

window.onload=funtionName  HTML文档全部加载完毕时将触发这一事件

对象检测: 在使用时,一定要删掉方法名后面的圆括号,如不,将会导致检测结果是方法的结果,无论方法是否存在。

if(method){

statements

}

如:if (!getElementById) return false;

合并,放置,压缩脚本

脚本引用传统方式是放置区域,这样有可能会导致无法并行加载其它文件。

建议放在之前,可以让页面变得更快

合并多脚本在一起,可以有效减少加载页面时发送的请求数量,从而达到性能优化

压缩工具:JSMin

共享onload事件

如  两个函数需要同时执行

window.onload = firstFuntion

window.onload = secondFuntion

这样的结果将只有最后那个才会被实际执行

解决此问题,转换如下即可 匿名函数

window.onload = function(){

firstFuntion();

secondFuntion();

}

onkeypress事件,建议少使用此事件,容易出问题

如:links[i].onkeypress = function(){

.......

}

也可以:

links[i].onkeypress = links[i].onclick;

改变其文档的结构,把标签文本写入文档 两种传统方法:

1.document.write  不建议使用,有些浏览器不支持

如: document.write("

This is inserted.

")

2.docuument.innerHTML  此属性既可用来读,也可以用来写入

如:var testdiv=document.getElementById("testdiv");

alert(testdiv.innerHTML);--读

testdiv.innerHTML= "

I inserted contest.

";--写

现流行方法:

createElement方法:创建一个新的元素

document. createElement(nodeName)

如:var para = document. createElement("p");

appendChild方法:把新创建的节点插入某文件的节点树,作为一个子节点

parent.appendChild(child)

如:testdiv.appendChild(para);

createTextNode方法: 创建一个文本节点

document.createTextNode(text)

如:txt = document.createTextNode("Hello world");

para.appendChild(txt);

insertBefore()方法:把一个新元素插入到一个现有元素的前面

parentElement.insertBefore(newElement,targetElement);

parentElement目标元素的父元素

targetElement 目标元素

newElement 新元素

如:var = gallery = document.getElementById("imagegallery");

gallery.parentNode.insertBefore(placeholder,gallery);

insertAfter方法:DoM没有提供这个方法,不过可以自己编写一个函数代替

function insertAfter(newElement,targetElement){

varparent = targetElement.parentNode;

if(parent.lastChild == targetElement) {

parent.appendChild(newElement);

}else{

parent.insertBefore(newElement,targetElement.nextSibling);

}

}

nextSibling 属性:目标元素和目标元素的下一个兄弟元素之间

一般创建顺序如下:

1.创建一个元素节点(createElement)

2.把此元素节点追加到文档中的一个元素节点上(appendChild)

3.创建一个文本节点(createTextNode)

4.把此文本节点追加至刚创建的元素节点上(appendChild)

function creatediv() {

//创建一个p元素 并插入

vardiv = document.getElementById("testdiv");

vardiv_p = document.createElement("p");

div.appendChild(div_p);

vardiv_txt = document.createTextNode("this is my");

div_p.appendChild(div_txt);

//在其原先p元素前面插入一个元素

varbefore_p = document.createElement("p");

varbefore_txt = document.createTextNode("this is beforeNode");

before_p.appendChild(before_txt);

div.insertBefore(before_p, div_p);

//在其原先p元素后面插入一个元素

varafter_p = document.createElement("p");

varafter_txt = document.createTextNode("this is afterNode");

after_p.appendChild(after_txt);

insertAfter(after_p, div_p);

}

window.onload = creatediv;

Ajax :对页面的请求以异步方式发送到服务器,只更新页面中的一小部分

核心对象为XMLHttpRequest

网页构成:

结构层 --html

表示层 --css

行为层 --javascript

style属性

是一个对象

获取样式:element.style.color

当引用一个中间带减号的CSS属性时,Dom要求用驼峰命名法

如:CSS属性font-family变为DOM属性fontFamily

element.style.font-family --> element.style.fontFamily   前者是错误的,需变为后者才行

background-color -->backgroundColor

DOM在表示样式属性时采用的单位并不总是与它们在CSS样式表里的设置相同

如:CSS属性Color的设置值是"grey"  或#999999,但有些某些浏览器就会显示为RGB(红,绿,蓝)  rgb(153,153,153)

CSS font-size属性的值单位是em或px  DOM的单位也是一样em或px

设置样式

style对象的属性值永远是一个字符串,style对象的属性的值必须放在引号里,单引号与双引号均可,如无引号,Js将会解释为一个变量

element.style.property=value

如:para.style.color='black'

根据元素在节点树里的位置来设置样式

第一种:为标签元素统一地声明样式

如:p {

font-size:1em;

}

第二种:为有特定class属性的所有元素统一声明样式

如: .fineprint {

font-size:8em;

}

第三种:为有独一无二的ID属性的元素单独声明样式

如:#intro {

font-size:8em;

}

CSS提供的:hover,:focus等伪Class属性允许我们根据HTML元素的状态来改变样式

className属性:可以通过动态设置元素的这个属性,从而统一改变样式

element.classname=value

如: elem.classname="intro"  (覆盖class属性)  (或elem.setAttribut("class","intro"))

elem.className +="intro"   (追加class属性)

.intro {

font-weight:bold;

font-size:2em;

}

位置 position

规定元素的定位类型  有五种值

abslute  生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

fiexed    生成绝对定位的元素,相对于浏览器窗口进行定位

relative  生成相对定位的元素,相对于其正常位置进行定位

static     默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)

inherit    规定应该从父元素继承 position 属性的值

如    h2

{

position:absolute;

left:100px;

top:150px;

}

时间  setTimeout

让某个函数在经过一段预定的时间之后才开始执行

setTimeout("function",interval)

第一个参数:通常是一个字符串,其内容是将要执行的那个函数的名字

第二个参数:是一个数值,以毫秒为单位,设定了需要经过多长时间后才开始第一个参数所给出的函数

clearTimeout(variable)  取消某个正在排队等待执行的函数  参数为全局变量

如:movement = setTimeout("moveMessage()",5000);

clearTimeout(movement);

overflow属性

处理一个元素的尺寸超出容器尺寸的情况  有三种值

visible 默认值。内容不会被修剪,会呈现在元素框之外。

hidden 内容会被修剪,并且其余内容是不可见的。

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

如:div

{

width:150px;

height:150px;

overflow:scroll;

}

平稳退化:

编辑:服务器运维 本文来源:变量名不允许包含空格与标点符号,与JQuery 常用

关键词: