javascript如何调用Jquery呢？_资讯

　　这位网友你好，想调用jQuery的方法你必须先引用jQuery文件，其次你的这个元素必须是jQuery对象才可以。

　　如果缺了上面的两个条件是不可以的，也就是说js不能直接调用jq方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<head>

<title>jquery弹出层</title>

function doAlert(){

var winW = $(window)width();

var winH = $(window)height();

var sroT = $(window)scrollTop();

var sroL = $(window)scrollLeft();

var objW = $("#centerWin")width();

var objH = $("#centerWin")height();

var left = (winW - objW) / 2 + sroL;

var top = (winH - objH) / 2 + sroT;

$("#centerWin")css("left",left)css("top",top)fadeIn(1000);

}

function moveWin(){

var winW = $(window)width();

var winH = $(window)height();

var sroT = $(window)scrollTop();

var sroL = $(window)scrollLeft();

var objW = $("#centerWin")width();

var objH = $("#centerWin")height();

var left = (winW - objW) / 2 + sroL;

var top = (winH - objH) / 2 + sroT;

$("#centerWin")animate({"left":left,"top":top},500)dequeue();

}

$(function(){

$("#alert")click(function(){

doAlert();

});

$(window)resize(function(){

moveWin();

})scroll(function(){

moveWin();

});

$("#winaction")click(function(){

$("#centerWin")fadeOut(500);

});

</script>

#centerWin{

width:400px;

height:200px;

padding:1px;

border:#00a8ff 1px solid;

font-size:12px;

display:none;

background:#ffffff;

position:absolute;

}

#winheader{

padding:1px;

height:25px;

background:#C2DDEE;

border-bottom:1px solid #00a8ff;

}

#wintitle{

width:370px;

float:left;

padding-top:5px;

text-align:left;

padding-left:10px;

}

#winaction{

width:18px;

float:left;

padding-top:5px;

text-align:center;

cursor:pointer;

}

#winbody{

width:300px;

text-align:left;

padding:30px 0px 0px 98px;

background:#ffffff;

display:inline-block;

}

inputclass{

width:140px;

height:18px;

border:1px solid #00a8ff;

}

inputbtn{

width:60px;

height:23px;

border:1px solid #00a8ff;

background:#c2ddee;

text-align:center;

padding-top:3px;

}

#empty{

padding:0px 10px;

}

/以下是空白div高度，目的在于拉长页面，出现滚动条，以测试滚顶效果/

#blank{

height:2000px;

}

</style>

</head>

<body>

<div id="wintitle">Login</div>

</div>

管理员：<input type="text" id="nameinput" class="inputclass" />

密码：<input type="password" id="passwordinput" class="inputclass" />

</div>

</body>

</html>

现在弹出的窗口大小是400px200px，大小自己可以改css样式，反正弹出及随屏滚动效果就是这样实现的，祝你好运！！呵呵

本篇文章是对在Jquery中把一段代码动态写入到DIV中的实现方法进行了详细的分析介绍需要的朋友可以参考下复制代码代码如下: nav = "<div style= width: px;height: px;float:left;background:url(login_image/index/on_ jpg);font size: px;color:white;line height: px; id= left_tab" + "</div>" 复制代码代码如下: $("#top_ ") (nav ); lishixinzhi/Article/program/Java/JSP/201311/20488

　　DOM操作的分类

　　DOM Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。

　　它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XML

　　javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，这些都是Dom Core的组成部分。

　　使用DOM Core来获取表单对象的方法

　　documentgetElementByTagName("from");

　　使用DOM Core来获取某元素的src属性的方法：

　　elementgetAttribute("src");

　　构建DOM元素

<body>

你最喜欢的水果是

<ul>

</ul>

</body>

　　使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。

　　1查找元素节点

　　获取元素节点并打印出它的文本内容，jQuery代码如下:

var $li = $("ul li:eq(1)"); 获取<ul>里第2个<li> 节点

var li_txt=$litext(); //获取第2个<li>元素节点的文本内容

　　alert(li_txt); //打印文本内容，这里会打印出橘子

以上代码获取了<ul>元素里第2个<li>节点，并将它的文本内容"橘子"打印出来

　　2查找属性节点

　　利用jQuery 选择器查找到需要的元素后，就可以使用attr()方法来获取它的各种属性的值attr()方法得参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。

　　获取属性节点并打印出它的文本内容，jQuery代码如下：

var $para = $("p"); //获取节点

var p_txt=$paraattr("title"); //获取元素节点属性title

　　alert(p_txt); //打印title属性值

　　创建节点

　　在dom 操作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。

　　1 创建元素节点

例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。

(1)创建两个<li>新元素。

　　(2)将这两个新元素插入文档中。

　　第(1)个步骤可以使用jQuery的工厂函数$()来完成。

　　$(html);

　　$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个<li>元素,jQuery代码如下:

$("ul")append($li_1); //添加到<ul>节点中，使之能在网页中显示

　　$("ul")append($li_2); //可以采取链式写法:$("ul")append($li_1)append($li_2);

　　注意事项：

　　(1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。

　　(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。

例如创建一个 元素，使用$("")或者(""),但是不要使用$("")或者大写的$("");

　　2创建文档节点

var $li_1= $("<li>香蕉</li>"); //创建一个<li> 元素，包括元素节点和文本节点，香蕉就是创建的文本节点

var $li_2 =$("<li>雪梨</li>"); //创建一个<li> 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。

$("ul")append($li_1); //添加到<ul>节点中，使之能在网页中显示

$("ul")append($li_2); //添加到<ul>节点中，使之能在网页中显示

　　以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将他们添加到文档中就可以了。

　　注意事项：

　　无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。

例如$("<li>这是一个<a href='#'>复杂的组合</a></li>");

　　3创建属性节点

　　创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。

　　jQuery代码如下:

var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素，包含元素节点，文本节点和属性节点其中title='香蕉'就是创建的属性节点

var $li_2=$("<li title='雪梨'>雪梨</li>");//创建一个<li>元素包括元素节点，文本节点和属性节点，其中title=‘雪梨’就是创建的属性节点

　　$("ul")append($li_1);

$("ul")append($li_2); //添加到<ul> 节点中，使之能在网页中显示

　　插入节点

　　动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。

　　使用append(),它会在元素内部追加新创建的内容。

　　jQuery中还有提供了其他几种插入节点的方法。

　　方法描述示例

　　append() 向每个匹配的元素内部追加内容 HTML代码

我想说:

jQuery代码: $("p")append("你好"); 结果: 我想说:你好

　　appendTo() 将所有匹配的元素追加到指定的元素中，

实际上，使用该方法是颠倒了常规的$(A)append(B)的操作，即不是将B追加到A中，而是将A追加到B中 HTML 代码 我想说: jQuery代码： $("你好")appendTo("p"); 结果: 我想说：你好

prepend() 向每个匹配的元素内部前置内容 HTML代码: 我想说: jQuery代码: $("p")prepend("你好");结果你好我想说:

prependTo() 将所有匹配的元素前置到指定的元素中，实际上，使用该方法是颠倒了常规的$(A)prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。HTML 代码 我想说: jQuery代码: $("你好")prependTo("p"); 结果你好我想说

after() 在每个匹配的元素之后插入内容 HTML代码 我想说: jQuery代码: $("p")after("你好"); 结果: 我想说:你好

insertAfter() 将所有匹配的元素插入到指定元素的后面，与after()颠倒了 HTML代码 我想说 jQuery代码：$("你好")insertAfter("p"); 结果我想说：你好

before() 将每个匹配的元素之前插入内容 HTML代码 我想说: jQuery 代码：$("p")before("你好"); 结果你好我想说:

insertBefore() 将所有匹配的元素插入到指定的元素的前面，实际上，使用该方法是颠倒了常规的before的操作 $(" 你好")insertBefore("p"); 结果:你好我想说:

　　删除节点

　　如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的方法，即remove() 和empty()

　　1remove()方法

　　作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。

例如删除图3-11中<ul>节点中的第2个<li>元素节点，jQuery代码如下:

$("ul li:eq(1)")remove();//获取第2个<li>元素节后，将它从网页中移除

　　当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

　　下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。

var $li = $("ul li:eq(1)")remove();//获取第2个<li>元素节点后，将它从网页中删除

$liappendTo("ul");//把刚删除的节点又重新添加到<ul>元素里

　　可以直接使用appendTo()方法得特性来简化以上代码：

　　$("ul li:eq(1)")appendTo("ul");

　　//appendTo()方法也可以用来移动元素

　　//移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。

　　另外remove()方法也可以通过传递参数来选择性地删除元素

$("ul li")remove("li[title!='菠萝']"); //将<li>元素属性title不等于"菠萝" 的<li>元素删除。

　　2empty()方法

　　严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。

$("ul li:eq(1)")empty(); //获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里面。

使用firebud查看橘子节点发生变化 <li title='橘子'/>

　　3复制节点

　　复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品

　　并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果

　　$("ul li")click(function(){

$(this)clone()appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中

　　});

　　//在页面中点击"菠萝"后，列表最下方出现新节点"菠萝"。

　　$(this)clone(true)appendTo("body");//注意参数true

　　在clone()方法传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。

　　替换节点

　　如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和 replaceAll()

　　replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。

例如要将网页中你最喜欢的水果是 替换成 你最不喜欢的水果是 可以使用如下jQuery代码：

$("p")replaceWith("你最不喜欢的水果是");

　　也可以使用jQuery中另一个方法repalceAll()来实现，该方法与replaceWith()方法得作用相同，只是颠倒了replaceWith的操作。

$("你最不喜欢的水果是")replaceAll("p");

　　注意：

　　如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

　　4 包裹节点

　　如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，wrap()，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

　　jQuery代码如下：

$("strong")wrap("");//用标签把 元素包裹起来

　　得到的结果如下：

你最喜欢的水果是

　　1wrapAll()方法

　　该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法，wrap()方法将所有的元素进行单独的包裹。

$("strong")wrap("");

　　2wrapinner()方法

该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来，例如可以使用它来包裹 标签的子内容:jQuery代码如下：

$("strong")wrapInner("");

运行代码后，发现标签内的内容被一对标签包裹了。

你最喜欢的水果是

　　属性操作

　　在jQuery 中，用attr() 方法来获取和设置元素属性，removeAtt() 方法来删除元素属性。

　　1获取属性和设置属性

如果要获取元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。

var $para=$("p"); //获取节点

var p_txt=$paraattr("title"); //获取元素节点属性title

如果要设置元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。

　　jQuery代码如下：

　　$("p")attr("title","your title");//设置单个的属性值

　　//为同一个元素设置多个属性值

　　$("p")attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。

　　jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等方法。

　　2删除属性

　　有时候需要删除文档元素的特定属性，可以使用removeAttr()方法

删除元素的title属性

　　$("p")removeAttr("title");

　　操作样式

　　获取样式和设置样式

　　HTML代码如下：

你最喜欢的水果是

class 也是元素的属性，因此获取class 和设置class都可以使用attr()方法。

var p_class = $("p")attr("class");//获取元素的class

可以使用attr()方法来设置元素的class，jquery代码如下：

$("p")attr("class","high");//设置元素的class为high

　　他是将原来的class替换为class，而不是在原来的基础上追加新的class

　　追加样式

jQuery提供了专门的addClass()方法来追加样式，为了使例子更为容易理解，首先在<style>标签里添加另一组样式

<style>

　　high{

　　font-weight:bold;

　　color:red;

　　}

　　another{

　　font-style:italic;

　　color:blue;

　　}

　　//在网页中追加class类的按钮

　　$("input:eq(2)")click(function(){

$("p")addClass("another"); //给元素追加"another"类

　　})

　　attr() 和addClass()的区别

　　用途追加样式设置样式

对同一个网页元素操作 test

　　第一次使用方法 $("p")addClass("high"); $("p")attr("class","high");

第1次结果 test

　　再次使用方法 $("p")addClass("another"); $("p")attr("class","another");

结果 test test

　　3移除样式

　　如果单击某一个按钮时，删除class的某个值，那么可以使用addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class

　　如下jQuery代码来删除

$("p")removeClass("high");//移除元素中为"high"的class

//如果要把元素的两个class都删除，就要使用removeClass()

　　$("p")removeClass("high")removeClass("another");

　　//jquery提供了更简单的方法

　　$("p")removeClass("high another");

　　另外，还可以使用removeClass()方法得一个特性来完成同样的效果，它不带参数的时候会将 class的值全部删除

　　$("p")removeClass();

　　切换样式

　　$toggleBtntoggle(function(){

　　//3

　　},function(){

　　//4

　　});

　　toggle()方法此处的作用是交替执行代码3和4两个函数，如果元素原来是显示的，则隐藏它，如果隐藏的，则显示它，此时，toggle()方法主要是控制行为上的重复切换。

　　判断是否含有某个样式

　　hasClass可以用来判断元素中是否有某个class，如果有，则返回true，否则返回false

　　$("p")hasClass("another");

　　//jQuery内部实际上是调用了is()方法来完成这个功能的，该方法等价于

　　$("p")is("another")

　　1设置和获取HTML，文本和值

　　html()方法

　　$("P")html();//获取元素的html代码

　　2text() 方法

$("p")text(); //获取元素的文本内容

　　//text()可以对文本内容设置内容

$("p")text("你最喜欢的水果是"); //设置元素的文本内容

　　3val()方法

　　val()方法取值

　　通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值，另外val() 方法还有另外一个用处，就是它能select(下拉列表框)，checkbox(多选框)和radio(单选框) 相应的选项被选中，在表单操作中会经常用到。

　　//使用val设置选中项

　　$("#single")val("选择2号");

　　//如果要使下拉列表的第2项和第3项被选中

　　$("#multiple")val(["选择2号"，"选择3号"]); //以数组的形式赋值

　　使多个文本框被选中

　　$(":checkbox")val(["check2","check3"]);

　　$(":radio")val(["radio2"]);

　　也可以使用attr()方法来实现同样的功能

　　$("#single option:eq(1)")attr("selected",true); //设置属性selected

　　$("[value=radio2]:radio")attr("checked",true);

　　1 children()方法

　　该方法用于取得匹配元素的子元素集合

　　var $body = $("body") children();

　　var $p=$("p")children();

　　var $ul = $("ul")children();

　　alert($bodylength);

　　alert($plength);

　　alert($ullength);

　　2next方法

　　该方法用于取得匹配元素后面紧邻的同辈元素。

从dom树的结构可以知道元素的下一个同辈节点时<ul>，因此可以通过next() 方法来获取<ul> 元素

var $p1 = $("p")next();//取得紧邻元素后的同辈元素

<ul>

</ul>

　　prev()方法

　　该方法用于取得匹配元素前面紧邻的同辈元素。

从DOM树的结构中可以知道<ul>元素的上一个同辈节点时，因此可以通过prev()方法类获取元素

var $ul = $("ul")prev(); //取得紧邻<ul>元素前得同辈元素

　　得到的结果将是:

你最喜欢的水果是

　　4siblings()方法

　　该方法用于取得匹配元素前后所有的同辈元素。

　　在第1章导航栏的例子中有段代码如下：

　　$("has_children")click(function() {

　　$(this)addClass("highlight"); //为当前元素增加highlight类

　　children("a")show()end()

　　siblings()removeClass("highlight")

　　children("a")hide();

　　})

欢迎分享，转载请注明来源：表白网

原文地址:https://h5.hunlipic.com/biaobai/4072383.html

javascript如何调用Jquery呢？

发表评论

评论列表（0条）