专栏首页Super 前端jQuery选择器、元素属性操作--jQuery基础知识点(1)

jQuery选择器、元素属性操作--jQuery基础知识点(1)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/41419849

一、jQuery代码风格:

1. $(document).ready(function(){})可简写为$(function(){})其在页面框架下载完毕后就执行;而window.οnlοad=function(){}必须在页面全部加在完毕(包含图片下载)后才能执行。很明显前者的执行效率高于后者。 2. 在jQuery选择器定位页面元素时,无须考虑定位元素在页面中是否存在,即使不存在,浏览器也不会报错!

二、jQuery选择器:

1. 基本选择器:效率: $("#id") > $("element") > $(".class") > $("*") 2. 层次选择器:例:$("div span") 例:$("#divMid").siblings("div") 3. 过滤选择器:例:$("#select option:selected") $("li:nth-child(2)") (1)简单过滤选择器【:first、:last、:not、:even、:odd、:eq、:gt、:lt、:header、:animated】 (2)内容过滤选择器【:contains、:empty、:has、:parent】 (3)可见性过滤选择器【:hidden、:visible】 (4)属性过滤选择器【[attribute=value]、[attribute!(^,$,*)=value]】 (5)子元素过滤选择器【:nth-child(eq|even|odd|index)、:first-child、:last-child、:noly-child】 (6)表单对象属性过滤选择器【:enabled、:disabled、:checked、:selected】 4. 表单选择器:例:$("#form1 :input") 例:$("#form1 :password")

三、 jQuery元素属性操作:

1. DOM(Document Object Model,文档对象模型) 2. 通过该函数返回的值作为元素的属性 attr(key,function(index)) 例:$("img").attr("src",function(){ return "Images/img0" + Math.floor(Math.random()*2+1)+".jpg" }); 3. $("select").val().join(","); //获取列表框中全部被选中的选项值 $(":radio").val(["radio2","radio3"]); //value值为radio2和radio3的单选框被选中 4. toggleClass(class); //元素中含有名称为class的CSS类别时,删除该类别,否则增加一个该名称的CSS类别 5. 动态创建节点:$(html) var $div = $("<div title="jQuery学习">加油</div>"); $("body").append($div); 等价于:$($div).appendTo($("body")); 6. clone()&clone(true) clone()被复制后的元素以不具有任何元素的行为 7. replaceWith(content)&replaceAll(selector) $("#id").repalceWith("<span>ligang</span>"); //后者替换前者 $("<span>ligang</span>").replaceAll("#id"); //前者替换后者 8. wrap()&wrapInner() $("p").wrap("<b></b>"); //包裹在p标签外<b><p></p></b> $("span").wrapInner("<i></i>"); //span内的内容被i标签包裹<span><i></i></span> 9. $("img").each(function(index){}) //index下标从0开始 10. remove()&empty() empty(); //只移除了指定元素中的所有子节点 remove([expr]); //把其从dom中删除,而不会保留其所占的位置 <p>Hello</p> $("p").empty(); //结果:Hello $("p").remove(); //结果:p标签也被删除

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS选择器

    在模块定义不太稳定的阶段,浏览器会采用厂商前缀实现某个特性。它允许早起采纳者试用浏览器实现的新属性。

    奋飛
  • JavaScript设计模式--中介者模式

    面向对象设计鼓励将行为分布到各个对象中,把对象划分成更小的粒度,有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增,又可能反过来降低它们的可复用性。 ...

    奋飛
  • 编写高质量代码:改善JavaScript程序建议--面向对象编程

    ​ 对象(Object)是没有原型的,只有构造函数拥有原型,而构造类的实例对象能够通过prototype属性访问原型对象。 prototype表示类的原型,...

    奋飛
  • CSS 之 选择器

    选择器 类型选择器 也叫做 元素选择器和简单选择器,可以根据元素标签指定样式。 p { color:red; } 类选择器 一般用于某些同类型的样式。 .xxx...

    用户1154259
  • CSS 语法入门

    CSS 是前端开发的基础。CSS 規則由兩個主要的部分構成:選擇器,以及一條或者多條聲明。 CSS 是前端开发的基础,主要由两个部分构成:

    zucchiniy
  • PHP面向对象之类和对象

    首先既然你知道面向对象,那么 OOP 相信你并不陌生吧? 他的英文全称 Object Oriented Programming 直译为:面向对象编程

    hedeqiang
  • php学习之类与对象基础知识,适合初学者

    在面向对象中,最重要的概念就是类和对象,比如,一个人类,每一个人都具有一定的属性和行为方法,这这些属性和方法具体到每一个人身上就是一个对象,一个大类就是有无数个...

    吾爱乐享
  • JS笔记(二):对象

    free赖权华
  • 应用监控系列之谁开发谁运行谁监控

    开发很好理解,程序员的主要本质工作,通过代码的方式去实现业务需求。开发过程中也是很有讲究的,选用什么语言,java、python、还是go,需要根据实际的情况,...

    用户4361942
  • Android开发笔记(三十三)文本文件和图片文件的读写

    简单文件读写一般是借助于FileOutputStream和FileInputStream,其中FileOutputStream用于写文件,而FileInpu...

    用户4464237

扫码关注云+社区

领取腾讯云代金券