码迷,mamicode.com
首页 > Web开发 > 详细

jquery用法第二波

时间:2015-03-22 10:28:11      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

过滤器

属性过滤选择器:

$("div[id]")选取有id属性的<div>

$(#id)

$("div[title=test]")选取title属性为“test”的<div>JQuery中没有对getElementsByName进行封装,用$("input[name=abc]")

$("div[title!=test]")选取title属性不为“test”的<div>

还可以选择开头、结束、包含等,条件还可以复合。(*

表单对象选择器(过滤器):

$("input:enabled")选取idform1的表单内所有启用的元素

$("input:disabled")选取idform1的表单内所有禁用的元素

$("input:checked")选取所有选中的元素(RadioCheckBox

$("select option:selected")选取所有选中的选项元素(下拉列表)

相对定位

$(select,queryContext) 例子:         //$("td",$("#mytr"))是相对该行tr下的搜有td             $("td",$("#mytr")).css("background","green");

例子

        $(function () {

            $(‘tr‘).click(function () {

                $(‘td‘, ‘table tr‘).css(‘backgroundColor‘, ‘‘);

                $(‘td:even‘, $(this)).css(‘backgroundColor‘, ‘red‘);

                $(‘td:odd‘, $(this)).css(‘backgroundColor‘, ‘yellow‘);

            })

        });

Jquerydom操作

1、使用html()方法读取或者设置元素的innerHTML

Alert$(‘#btn’).html();

$(‘#btn’).html(‘hello’);

 

2、使用text()方法读取或者设置元素的innerText

同上

 

3、使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。

Alert(‘#img1.attr(‘src’);

$(‘#btn1’).attr(‘href’,’http;//www.baidu.com’)

Attr也可以添加样式

4、使用removeAttr(href")删除属性。删除的属性在源代码中看不到,这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份

 

 

动态创建dom结点

使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到其他节点(元素)中:

        var link = $("<a href=‘http://www.baidu.com‘>百度</a>");

        $("div:first").append(link);

$()创建的就是一个jQuery对象,可以完全进行操作

var link = $("<a href=‘http://www.baidu.com‘>百度</a>");

link.text("百毒");

$("div:first").append(link);

父元素.append(子元素)方法.将 C对象 追加到 A对象中 用来在元素的内部末尾追加一个子元素。 创建出的元素没有append到界面之前是无法用选择器找到的,就像数据没有insert到数据库之前是无法select出来的。

子元素.appendTo(父元素)。将 对象移到 对象中。 $("#select1 option:selected").remove().appendTo($("#select2")) ;

      $("#select1 option:selected").appendTo($("#select2")) ;

 

复制和替换节点

clone(): 克隆匹配的 DOM 元素返回值为克隆后的副本但此时复制的新节点不具有任何行为.

clone(true): 复制元素的同时也复制元素中的的事件 

<button>保存</button>

<p>段落</p>

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

   alert("点击按钮");

 });

  //克隆节点,不克隆事件

  $("button").clone().appendTo("p"); 

  //克隆节点,克隆事件

  $("button").clone(true).appendTo("p");

replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素

replaceAll(): 颠倒了的 replaceWith() 方法.

注意若在替换之前已经在元素上绑定了事件替换后原先绑定的事件会与原先的元素一起消失

//<p>段落</p>

//方式一

$("p").replaceWith("<button>登陆</button>");

//方式二

$("<button>登陆</button>").replaceAll("p");

 

attr(): 获取属性和设置属性 相当于 dom的: setAttribute   getAttribute

当为该方法传递一个参数时即为某元素的获取指定属性

当为该方法传递两个参数时即为某元素设置指定属性的值

jQuery 中有很多方法都是一个函数实现获取和设置: attr(), html(), text(), val(), height(), width(), css() .

removeAttr(): 删除指定元素的指定属性

jquery用法第二波

标签:

原文地址:http://www.cnblogs.com/zhendiao/p/4356754.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!