认识jQuery(二)

一、管理选择的结果

1, 获取元素的个数

$("img").size()

2,  提取元素

$("img[title]")[1]   获取所有设置了title属性的img标记中第二个元素。等效于:$("img[title]").eq(1)

以上用eq即可

var iNum=$("li").index($("li[title=isaac]")[0])获取<li title="isaac">标记在整个列表中所处的位置。并返回给iNum.

3, 添加、删除、过滤元素

$("img[alt],img[title]").addClass("myClass") 所有设置了alt属性的img标记和所有设置了 tilte属性的img标记添加样式。

$("li[title]").not("[title*=isaac]")所有设置了title属性的li标记,但不包括title值中任意匹配字符串isaac的那些。

注意:not()方法所接受的参数不能包括特定的元素, 只能是通用的表达式。

EG:

错误:$("li[title]").not("img[title*=isaac]")

正确:$("li[title]").not("[title*=isaac]")

筛选:filter方法

$("li").filter("[title*=isaac]") 等同于$("li[title*=isaac]")

注意:filter中的参数,不能直接是等于匹配,只能是前匹配^=,后匹配&=,任意匹配*=。

filter(函数)函数要求返回布尔值,对于返回值为true的元素保留,否则去除。

$("p").find("span")在所有p标记元素中搜索span标记,获取一个新的元素。

var bHasImge=$("div").is("img")页面中的div块中是否包含img标记。

4,jQuery链

jQuery语句链在一起

如下: $("div").addClass("myClass1").filter(function(index){return index==1||$(this).attr("id")=="fourth"}).addClass("myClass2");

整体div加myClass1,然后进行筛选出的元素再加myClass2

后面的操作都已以前的操作结果为对象的,如果操作对象为上一步对象,则用end方法

如下:

$("P").find("span").addClass("myClass1").edd().addClass("myClass2")

$("div").find("p").addClass("myBackgroud").andSelf().addClass("myBorder")

div中找P,给p加myBackgroud然后把div,p 合并,添加myBorder,对div和p都有效,如果不加只对p有效。

  标记的属性

each()遍历元素

$(function(){$("img").each(function(index){this.title"这是第"+index+“副图,id是”+this.id;})

})

 二、获取属性的值

*<em>标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味要把这段文字用斜体来显示。

var sTitle=$("em:eq1").attr("title") ; 获取第二个em的title 属性

$("a[href^=http://]").attr("target","-blank");设置属性值

$("img").attr({src:"06,Jpg",title:“公寓”,alt:“国家”});设置多个属性值

$("button").removeAttr("disabled");删除属性值

时间: 2024-08-06 20:47:38

认识jQuery(二)的相关文章

小谷实战Jquery(二)--可以编辑的表格

今天实现的是一个表格的例子,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格可以在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路很清晰,只是在实现的过程中会出现一些小bug.通过jQuery函数就可以一一解决. 下面看下HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

从零开始学习jQuery (二) 万能的选择器

原文:从零开始学习jQuery (二) 万能的选择器 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery

一步一步学习 JQuery (二) 选择器: 基本选择器 &amp;&amp; 层次选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法 完善的事件处理机制 一.基本选择器 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用). 改变 id 为 one 的元素的背景色为 # bbffaa 改变 class 为 mini 的所有元素的背景

JavaWeb的学习--jQuery二

一.使用JQ完成省市二级联动 1.需求分析 使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作 方式一: $(function(){ // 全选/ 全不选 $("#checkallbox").click(function(){ var isChecked = this.checked; //使用对象访问的方式进行遍历,语法:$().each(function(){}) $("input[name='hobby']").each(function()

jquery二维码生成插件jquery.qrcode.js

插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com/jquery-info294 如何使用它 将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> <script type="text/javascrip

jquery二维码

这里可以调用一个jq-qrcode库,然后根据参数往里面传内容即可,本人当时做的是一个名片系统,所以可以生成一个vcf文件在PC端. 具体项目文件请见:https://github.com/marhovey/QRcode; jq-qrcode直接访问:https://github.com/jeromeetienne/jquery-qrcode; 1.生成微信名片二维码: function createvcf() { $(".qrBox").css({display:"bloc

jQuery(二) jQuery对Ajax的使用

学习使我快乐!嘿 --WH 一.jQuery使用Ajax 想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代码进行对比,才会有所悟. 1.1.什么是Ajax?(顺带提一下) 全名:Asynchronous Javascript And Xml[异步javascript和xml], 同步和异步原理图 同步就是浏览器发送一个请求到服务器端,网址会改变,页面会被重新加载到新的页面.如图 异步就是浏览器发送一个请

jQuery(二)

jQuery学完了!好用! 1.用定时器做的jquery里面的animate效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器实现ANIMATE效果</title> <style type="text/css"> div{ width:100px; height:

JavaScript类库---JQuery(二)

接上: 6.Ajax:  一个基础底层函数:jQuery.ajax();  //高级工具函数都会调用此函数:  一个高级工具方法:load() ;  四个高级工具函数:jQuery.getScript().jQuery.getJSON().$.get() . $.post(); load():是一个方法,向它传入一个URL,它会异步加载该URL的内容,然后将内容插入到选中的元素中,去替换已存在的内容:形如:$("#status").load('status.html'); 如果只想显示