jquery用法第二波

过滤器

属性过滤选择器:

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

$(“#id”)

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

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

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

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

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

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

$("input:checked")选取所有选中的元素(Radio、CheckBox)

$("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‘);

})

});

Jquery的dom操作

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(父元素)。将 对象A 移到 对象C 中。 $("#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(): 删除指定元素的指定属性

时间: 2024-10-12 17:10:55

jquery用法第二波的相关文章

Jquery用法

向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. 可以通过下面的标记把 jQuery 添加到网页中: <head> <script type="text/javascript" src="jquery.js"></script> </head> 请注意,<script> 标签应该位于页面的 <head> 部分. Jq

data 原生用法 jquery 用法

//原生js: document.getElementById("obj").dataset.bid = "1";//赋值 var bid = document.getElementById("obj").dataset.bid;//取值 document.getElementById("obj").setAttribute("data-bid", "1");//赋值 var bid =

总结几个关于 jQuery 用法

有关 jquery 用法 目录: $.trim() $.inArray() $.getJSON() 事件委托 on 遍历closest() ajaxSubmit() 拖拽排序 dragsort() 进入正文 ing... 1. jQuery.trim(str) 解释:从字符串的开头和结尾删除空格. var str=' hello hi '; var new_str=$.trim(str); console.log(str.length) // 12 console.log(new_str.len

jQuery用法总结

-- 该笔记的整理引用自[http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html],感谢博主的整理!-- jQuery简介 jQuery是一个javascript的函数库,本质是对JS的一个封装,可以更加方便使用.比如JS中取对象document.getElementById()但用jquery的话$("#id")即可.使用Jquery可以: 1.快速获取文档元素 jQuery的选择机制构建于CSS的选择器,

jQuery用法小结

filtering过滤: .not('' ) 在所选元素集合中,  排除特定的元素 $( "li" ).not( ":even" ).css( "background-color", "red" ); .filter('') 在所选集合中,选定特定的元素:与.not( )相反: .eq(num )  num:0 1 2 3 4... .has(“ul”)  $( "li" ).has( "ul&q

Jquery 用法总结

1.用Jquery给框架内的父页面传值 parent.$("#middle").contents().find("#hidChecker").val(“test的大幅度发”);   middle frame框架的id   hidChecker 控件的id 2.Jquery中attr和prop的区别 对于html中元素自带的属性(如:id.name等)用prop 对于html中元素没有自己自定义的属性用attr 3.Jquery获取table中td的值 $("

jquery用法初探

JQuery选择器 JQuery选择器用于查找满足条件的元素,比如可以用$(“#控件Id”)来根据控件id获得控件的jQuery对象,相当于getElementById: 1.id 选择器   $(“#div1”).html(“<font color=red>hello</font>”).语法.意义类似于CSS选择器 2.标签选择器 $("TagName")来获取所有指定标签名的jQuery对象,相 当于getElementsByTagName: $(funct

jsp中jquery用法一步刷新 验证用户名是否存在

<script type="text/javascript"> /* $(document).ready(function(){ var id="ha"; var s="<td>用户名:<select name='"+id+"'>"+"<option>sdfsdf</option></select>" $("#f")

jQuery常见的50种用法

1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.selected)的子节点. .filter(":not(:has(.selected))") 2. 如何重用元素搜索 var allItems = $("div.item"); var keepList = $("div#containe