jquery示例代码（jquery编程）

admin 发布：2022-12-19 02:53 115

今天给各位分享jquery示例代码的知识，其中也会对jquery编程进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、jQuery代码
2、在jquery中,写出5个选择元素的示例代码
3、jQuery函数的等价原生函数代码示例
4、求一个jquery效果代码
5、jQuery基本筛选选择器实例代码
6、简单的jquery代码

jQuery代码

$(document).ready(function(){ //页面加载完成后执行｛｝内的代码

$("p").click(function(){ //为每个p标签绑定一个点击事件

$(this).hide(); //点击后，隐藏这个p标签

});

jquery示例代码（jquery编程）

在jquery中,写出5个选择元素的示例代码

div id="myid"/div

$('#myid') //查找id为myid的元素

divdiv1/divspanspan/span

$("div") //查找div元素

div class="note"/div

$(".note") //选择类是note的元素

ul

li1/lili2/li

/ul

$('li:first') //匹配第一个元素

$('li:last')//匹配最后一个元素

$('li:eq（1）')//匹配第二个元素

其实查手册不就可以了...

jQuery函数的等价原生函数代码示例

我们针对常用的jQuery方法以及其等价原生方法的性能做了一些测试(1,

2,

3)。

我知道你在想什么。原生方法明显要比jQuery方法快，因为jQuery方法要处理浏览器兼容以及其他一些事情。是的，我完全赞成。写这篇文章并不是出于反对使用jQuery，但如果你针对的是现代浏览器，那么使用原生方法会使性能有很大的提升。

许多开发者没有意识到大多数他们使用的jQuery方法可以使用原生方法，或者更轻量级的方法来代替。下面是一些代码示例，展示一些常用的jQuery方法，以及其等价原生方法。

译者注：需要注意下面有些原生方法是HTML5引用的，部分浏览器可能不能使用。

选择器

jQuery的核心之一就是能非常方便的取到DOM元素。我们只需输入CSS选择字符串，便可以得到匹配的元素。但在大多数情况下，我们可以用简单的原生代码达到同样的效果。

复制代码

代码如下:

//----得到页面的所有div---------

/*

jQuery

*/

$("div")

/*

原生

*/

document.getElementsByTagName("div")

//----得到所有指定class的元素---------

/*

jQuery

*/

$(".my-class")

/*

原生

*/

document.querySelectorAll(".my-class")

/*

更快的原生方法

*/

document.getElementsByClassName("my-class")

//----通过CSS选择得到元素----------

/*

jQuery

*/

$(".my-class

li:first-child")

/*

原生

*/

document.querySelectorAll(".my-class

li:first-child")

//----得到指定clsss的第一个元素----

/*

jQuery

*/

$(".my-class").get(0)

/*

原生

*/

document.querySelector(".my-class")

译者注：其实这里面是有些问题的，document.querySelectorAll和jQuery选择器还是有区别的，前者返回的是一个NodeList，而后者返回的是一个类数组对象。

DOM操作

jQuery还在DOM操作上频繁使用，例如插入或者删除元素。我们也可以使用原生方法来进行这些操作，你会发现这需要写额外的代码，当然也可以写自己的辅助函数来让使用起来更容易。下面是一些将元素插入到页面中的例子。

复制代码

代码如下:

//----插入元素----

/*

jQuery

*/

$(document.body).append("div

id='myDiv'img

src='im.gif'//div");

/*

蹩脚的原生方法

*/

document.body.innerHTML

+=

"div

id='myDiv'img

src='im.gif'//div";

/*

更好的原生方法

*/

var

frag

=

document.createDocumentFragment();

var

myDiv

=

document.createElement("div");

myDiv.id

=

"myDiv";

var

im

=

document.createElement("img");

im.src

=

"im.gif";

myDiv.appendChild(im);

frag.appendChild(myDiv);

document.body.appendChild(frag);

//----前置元素----

//

除了最后一行

document.body.insertBefore(frag,

document.body.firstChild);

CSS

classes

在jQuery中，我们可以很容易对DOM元素添加、删除、检查它的CSS

class。幸运的是，利用原生方法也可以简单的办到。

复制代码

代码如下:

//

得到DOM元素的引用

var

el

=

document.querySelector(".main-content");

//----添加class------

/*

jQuery

*/

$(el).addClass("someClass");

/*

原生方法

*/

el.classList.add("someClass");

//----删除class-----

/*

jQuery

*/

$(el).removeClass("someClass");

/*

原生方法

*/

el.classList.remove("someClass");

//----是否是该class---

/*

jQuery

*/

if($(el).hasClass("someClass"))

/*

原生方法

*/

if(el.classList.contains("someClass"))

修改CSS属性

总是通过Javascript修改和检索CSS属性，这样会比使用jQuery

CSS函数更加简单快速，并且没有任何不必要的代码。

复制代码

代码如下:

//

得到DOM元素引用

var

el

=

document.querySelector(".main-content");

//----设置CSS属性----

/*

jQuery

*/

$(el).css({

background:

"#FF0000",

"box-shadow":

"1px

1px

5px

red",

width:

"100px",

height:

"100px",

display:

"block"

});

/*

原生

*/

el.style.background

=

"#FF0000";

el.style.width

=

"100px";

el.style.height

=

"100px";

el.style.display

=

"block";

el.style.boxShadow

=

"1px

1px

5px

red";

求一个jquery效果代码

1、jquery实现

div class="box" style="width: 100px;height: 80px;background: #999;"/div

$("div.box").click(function() {

var scale = 1.5; // 放大的倍数，0-1为缩小，大于1为放大

var speed = 500; // 动画执行的时间，单位：ms

var finalWidth = $(this).width() * scale;// 最终宽度

var finalHeight = $(this).height() * scale;// 最终高度

var mt = parseInt($(this).css("margin-top") == "auto" ? 0 : $(this).css("margin-top"));

var ml = parseInt($(this).css("margin-left") == "auto" ? 0 : $(this).css("margin-left"));

var wdv = (finalWidth - $(this).width()) / 2;

var hdv = (finalHeight - $(this).height()) / 2;

var finalMT = hdv 0 ? mt - hdv : mt + hdv;

var finalML = wdv 0 ? ml - wdv : ml + wdv;

// 动画显示

$(this).animate({

width : finalWidth,

height : finalHeight,

marginTop : finalMT,

marginLeft : finalML

}, speed);

});

// 亲自在chrome和IE8中试过，无问题，如果你放大的对象拥有position属性也不会有影响

2、如果你的浏览器支持css3，可以用transform实现，具体如下：

$("div.box").click(function() {

$(this).css({

"transform" : scale(1.5), // 1.5为放大的倍数

"-webkit-transform" : scale(1.5),

"-moz-transform" : scale(1.5)

});

当然你也可以事先在样式表中定义好样式，然后用addClass()追加即可。

jQuery基本筛选选择器实例代码

本文实例为大家分享了jQuery基本筛选选择器的具体代码，供大家参考，具体内容如下

!DOCTYPE

html

head

简单的jquery代码

这是封装好的json需要向后台传的值

json的格式为{key1:value1,key2:value2,key3:value3.........}中间用“，”隔开

后台获取key来都到value值

例：{suggest:txt}

这个json只有一个参数，参数名为suggest，值为txt也就是$("input").val()的值

这是jquery的ajax异步操作

我这样讲应该够清楚吧，望采纳……

关于jquery示例代码和jquery编程的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。

标签：jquery 示例编程代码

版权说明：如非注明，本站文章均为 AH站长原创，转载请注明出处和附带本文链接；

本文地址：http://ahzz.com.cn/post/1261.html；

上一篇：商业代码是什么（商业服务代码）
下一篇：网站弹窗公告代码（使用弹窗显示公告什么意思）

jquery示例代码（jquery编程）

本文目录一览：

jQuery代码

在jquery中,写出5个选择元素的示例代码

jQuery函数的等价原生函数代码示例

求一个jquery效果代码

jQuery基本筛选选择器实例代码

简单的jquery代码

相关推荐

取消回复欢迎你发表评论:

温馨提示

jquery示例代码（jquery编程）

本文目录一览：

jQuery代码

在jquery中,写出5个选择元素的示例代码

jQuery函数的等价原生函数代码示例

求一个jquery效果代码

jQuery基本筛选选择器实例代码

简单的jquery代码

相关推荐

取消回复欢迎 你 发表评论:

分享到

温馨提示

取消回复欢迎你发表评论: