jquery的用法,jquery使用方法

jQuery层次选择器用法示例

本文实例讲述了jQuery层次选择器用法。分享给大家供大家参考,具体如下:

成都创新互联专业为企业提供金牛网站建设、金牛做网站、金牛网站设计、金牛网站制作等企业网站建设、网页设计与制作、金牛企业网站模板建站服务,10年金牛做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title2-5/title

!--

引入jQuery

--

script

src="js/jquery-1.10.1.min.js"

type="text/javascript"/script

script

src="js/assist.js"

type="text/javascript"/script

link

rel="stylesheet"

type="text/css"

href="css/style.css"

/

script

type="text/javascript"

$(document).ready(function(){

//选择

body内的所有div元素.

$('#btn1').click(function(){

$('body

div').css("background","#bbffaa");

})

//在body内的选择

元素名是div

的子元素.

$('#btn2').click(function(){

$('body

div').css("background","#bbffaa");

})

//选择

所有class为one

的下一个div元素.

$('#btn3').click(function(){

$('.one

+

div').css("background","#bbffaa");

})

//选择

id为two的元素后面的所有div兄弟元素.

$('#btn4').click(function(){

$('#two

~

div').css("background","#bbffaa");

})

});

/script

/head

body

h3层次选择器./h3

button

id="reset"手动重置页面元素/button

input

type="checkbox"

id="isreset"

checked="checked"/

label

for="isreset"点击下列按钮时先自动重置页面/label

br

/

br

/

input

type="button"

value="选择

body内的所有div元素."

id="btn1"/

input

type="button"

value="在body内,选择子元素是div的。"

id="btn2"/

input

type="button"

value="选择

所有class为one

的下一个div元素."

id="btn3"/

input

type="button"

value="选择

id为two的元素后面的所有div兄弟元素."

id="btn4"/

br

/

br

/

!--

测试的元素

--

div

class="one"

id="one"

id为one,class为one的div

div

class="mini"class为mini/div

/div

div

class="one"

id="two"

title="test"

id为two,class为one,title为test的div.

div

class="mini"

title="other"class为mini,title为other/div

div

class="mini"

title="test"class为mini,title为test/div

/div

div

class="one"

div

class="mini"class为mini/div

div

class="mini"class为mini/div

div

class="mini"class为mini/div

div

class="mini"/div

/div

div

class="one"

div

class="mini"class为mini/div

div

class="mini"class为mini/div

div

class="mini"class为mini/div

div

class="mini"

title="tesst"class为mini,title为tesst/div

/div

div

style="display:none;"

class="none"style的display为"none"的div/div

div

class="hide"class为"hide"的div/div

div

包含input的type为"hidden"的div

input

type="hidden"

size="8"/

/div

span

id="mover"正在执行动画的span元素./span

/body

/html

效果图:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery选择器用法总结》、《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。

jquery 的$(this)用法

$this只是个自定义的变量;

$(this)是将当前don对象转换成jquery对象 ;

一般定义jquery变量习惯$开头,提高可读性而已。

$(this)是把DOM对象封装成jquery对象,其相当于一个集合。

用法如下:

a href="" target="_blank" data-id="1010000000125418"jQuery/a

$('a').click(function(){

this.innerHTM==$(this).html()=='jQuery';//三者是一样的.

this.getAttribute('href')==this.href==$(this).attr('href')//三者是一样的;

this.getAttribute('target')==this.target==$(this).attr('target')//三者是一样的;

this.getAttribute('data-id')==$(this).attr('data-id')//二者是一样的;

});

jQuery删除节点用法示例(remove方法)

本文实例讲述了jQuery删除节点的方法。分享给大家供大家参考,具体如下:

html

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title/title

script

src="js/jquery-1.10.1.min.js"

type="text/javascript"/script

script

type="text/javascript"

//![CDATA[

$(function(){

//第一种删除的方法

$("ul

li:eq(1)").remove();

//

获取第二个li元素节点后,将它从网页中删除。

//第二种删除的方法

var

$li

=

$("ul

li:eq(1)").remove();

//

获取第二个li元素节点后,将它从网页中删除。

$li.appendTo("ul");

//

把刚才删除的又重新添加到ul元素里

//所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它

//第三种删除的方法

$("ul

li").remove("li[title!=菠萝]");

//把li元素中属性title不等于"菠萝"的li元素删除

//第四种删除的方法

$("ul

li:eq(1)").empty();

//

获取第二个li元素节点后,清空此元素里的内容

});

//]]

/script

/head

body

p

title="选择你最喜欢的水果."

你最喜欢的水果是?/p

ul

li

title='苹果'苹果/li

li

title='橘子'橘子/li

li

title='菠萝'菠萝/li

/ul

/body

/html

效果图如下:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 的is用法

jQuery 遍历 - is() 方法

定义和用法

is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。

语法

.is(selector)

详细说明

与其他筛选方法不同,.is() 不创建新的 jQuery 对象。相反,它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用,比如事件处理程序。

假设我们有一个列表,其中两个项目包含子元素:

ul

lilist strongitem 1/strong/li

lispanlist item 2/span/li

lilist item 3/li

/ul

您可以向 ul 元素添加 click 处理程序,然后把代码限制为只有当列表项本身,而非子元素,被点击时才进行触发:

$("ul").click(function(event) {

var $target = $(event.target);

if ( $target.is("li") ) {

$target.css("background-color", "red");

}

});

jquery $和#的具体用法

$是用户jquery中选取的

#是表示id

比如说

html:

input type="text" id="nav" //定义一个id=nav的文本框

jquery:

$(function(){ //固定步骤

$("#nav").focus(function(){ //$就是调用jquery,("")就是选取里面的东西,$("#nav")就是直接选取id=nav的元素

$(this).css("border-color","#f00"); //$(this)就是之前选取的元素,然后用css改变边框的颜色,变为红色

});

});


网站名称:jquery的用法,jquery使用方法
URL链接:http://hbruida.cn/article/dseosgj.html