`
myfreespace
  • 浏览: 229053 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 中的DOM操作

阅读更多

js中的dom操作是强大的,但是特长的函数名让我们有点烦吧,那就看看jquery中的吧,

1属性匹配;

$("a[href=xx]").addClass("myclass");把xx超链接添加类,也可以进行匹配$("a[href^=http://").addClass("myclass");表示以http://开头的a链接,当然也可以在结尾匹配 a[href$=xx]  任意匹配 *=
2,包含选择器:
$("li:has(a)");选择li下含有a元素的li元素,还有EF E>F E+F E~F
3.位置选择:
$("p:first-child");选择p标记,并且这个p标记是其父标记的第一个子标记,在 jquery中自动清除了ff中的空格,
$("p:even").addClass() 对p元素的偶数行添加类,等同于 :nth-child(even);不同的是:nth_child(even)的下标是从1开始的,而其他的是从0开始的,:nth-child()表示匹配父元素下的第n个元素或是偶数 奇数行,:eq() :gt() :lt()
4,过滤选择器
:checked获得用户的复选框的值,$("input[name="""]:checked).addClass();
input:not(:radio)方向过滤,
5,获取元素的个数
$("img").size()  $("img[title]")[1]获取第二个元素,等同于 $("img[title]").get(1)
6,添加 删除 过滤
$("img[alt]").add("img[title]")将所有设置了alt 和 title属性的img组合在一起,not()
$("div").addClass("haha").filter("[class*=middle]").addClass("myClass2");先给所有的div添加类,然后选择拥有.middle的div 添加类,注意在filter()过滤器中,不能直接使用=匹配,而用^= *= &= filter(fn)还可以自己定义函数来进行过滤,返回true表示添加,false 删除
$("p").find("span")在所有的p元素中搜索span元素,
7jquery 链的应用
$("p").find("span").addClass("class1").end().addClass("class2);在p中找span添加class1,利用end()将选择返回到$("p")添加样式class2
$("p").dinf("span").addClass("my1").andself().addClass("my2")把 前后的选择组合在一起添加样式.my2
8.获取遍历元素
$("img).each(function(index){ this.title = "k"+index;});
$("em").attr("title");获取第一个em标记的title属性,没有则返回空,而不会去匹配第二个,如果要匹配第二个可以用位置选择器$("em:eq(1)").attr("title");还可以用来设置属性 attr(name,value);
很多时候希望属性的值能够根据不同的元素属性有规律的变化就可以用attr(name,fn)来实现,函数fn接受一个参数为元素序号$("div").attr("id",function(index){return "div"+index;}).each(function(){$(this).find("span").html("(id='"+this.id+"')");attr(properties)还可以设置多个属性
$("img").attr({src:"xj,jpg",title:"haha",alt:"ji"});
属性删除:
$("button").removeAttr("disable")
在类别间动态切换
$(this).toggleClass("classname");点击或其他时间动态切换,
删除属性:
$("p").remove()直接将p元素删除,也可以接受参数,$("p").remvoe(":contains('ok')");移除包含有ok内容的p元素,
empty()是用来删除子元素的,$("p").empty()把p下的所有元素删除,
处理表单元素的值:
$("[name=rr]:checked").avl()获取选择的值,
获取select option 中的值可以是单选 或是多选
var singvalues = $("#name").val();
var multvalues = $("#name2").val()||[];// 可能存在不选的情况
multvalues.join(",");
//jquery中的动画
1,show(speed,[callback]);显示元素 无论这个元素是hide() 或是display:none隐藏的
$("p").show() ,speed还可以用来设置速度 slow normal fast  .callback执行结束回调的函数
2,hide() 
3,toggle() toggle(switch) toggle(speed,[callback]) 切换元素的现隐,

0
0
分享到:
评论

相关推荐

    JQuery DoM和ajax 操作

    **jQuery DOM操作** jQuery库是JavaScript的一个强大工具,它极大地简化了对DOM(Document Object Model)的操作。DOM是HTML和XML文档的结构化表示,允许我们通过编程方式访问和修改页面内容。jQuery提供了丰富的...

    jQuery 中DOM 操作详解

    3. jQuery 中DOM操作的分类: - 查找节点:使用jQuery选择器根据不同的条件查找页面中的元素节点。 - 创建节点:利用jQuery的工厂函数$(),可以根据传入的HTML字符串创建DOM对象,并将其包装为jQuery对象返回。例如...

    jquery中dom操作和事件的实例学习 下拉框应用

    在本篇关于jQuery中DOM操作和事件处理的文章中,我们将学习如何利用jQuery实现一个下拉框选项的动态转移功能。下拉框(select元素)作为网页中常见的表单控件之一,经常需要根据用户交互改变其选项。jQuery提供了一...

    jQuery中DOM操作实例分析

    本文实例讲述了jQuery中DOM操作的方法。分享给大家供大家参考。具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式)、属性的修改、样式的修改、动态绑定事件 代码如下: 复制代码 代码...

    jQuery中DOM操作原则实例分析

    本文实例讲述了jQuery中DOM操作原则。分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的。也就是说,某个方法既可...

    jQuery DOM节点操作源码

    以下是关于jQuery DOM操作的一些关键知识点: 1. **选择器**:jQuery 的核心功能之一就是强大的选择器机制,它允许开发者通过CSS选择器、ID、类名、属性等来选取DOM元素。例如,`$("#myID")` 选择ID为"myID"的元素...

    Jquery+dom+easyUI教程

    jQuery 是一个广受欢迎的 JavaScript 库,其核心理念是简化 DOM 操作,处理事件和创建动画,同时提供了统一的 API 以实现跨浏览器兼容性。jQuery 的“write less, do more”口号反映了它通过简洁的语法实现高效的...

    jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果

    顺带把其中用到的操作和事件介绍下。 html代码: <input type=”text” id=”address” value=”请输入邮箱地址”/> jquery代码: 代码如下: $(document).ready(function(){ $(‘#address’).focus(function()...

    jQuery基础DOM和CSS操作源码

    压缩包中的"第5章 基础DOM和CSS操作.pdf"很可能是教程的电子版,详细讲解了jQuery如何进行DOM操作和CSS选择。而"code2", "code3", "code1"这些文件名可能是配套的代码示例,它们可能包含了实际的jQuery代码片段,...

    jQuery操作DOM解析

    - **缓存选择器结果**:如果一个元素在多次操作中重复使用,应存储选择器的结果,避免每次都重新计算。 - **事件委托(Event Delegation)**:使用`.on()`方法绑定事件时,尽量在更高层级的元素上绑定,减少事件...

    Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM

    Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM 模式识别的新技术 狂顶

    jQuery中的DOM操作.ppt

    jQuery中的DOM操作主要简化了JavaScript原生DOM操作的复杂性,提供了一套更简洁、易用的API。jQuery库使得开发者能够更容易地选取DOM元素、操作DOM结构以及处理事件。以下将详细介绍jQuery中的DOM操作核心知识点: ...

    Ch08-jQuery操作DOM核心笔记.txt

    Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON的支持、XML解析以及一套强大的选择器系统,使得开发者能够更加高效地选取和操作...

    jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料.zip

    jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册(教辅) .pdf ...

    jQuery一个非常流行的操作Dom的JavaScript库

    尽管随着Vue.js、React、Angular等现代前端框架的兴起,jQuery在某些场景下的使用频率有所下降,但其依然是许多项目中的基础工具,尤其在处理DOM操作和动画效果时,jQuery依然表现出色。对于初学者和有经验的开发者...

    gQuery : jQuery DOM 操作部分

    为了解决这个问题,开发者们创建了gQuery,一个专注于DOM操作的轻量级库,它抽离了jQuery中的核心DOM操作函数,以更小的体积提供相似的功能。 gQuery的核心理念是“小巧而实用”。在压缩并去除空格后,其大小不足4...

Global site tag (gtag.js) - Google Analytics