Jquery基础入门-3-JQuery DOM操作-3、4、5

11-JQuery DOM操作-332:00

12-JQuery DOM操作-421:38

13-JQuery DOM操作-520:59

八、节点属性操作</strong><br /> 1、设置获取属性方法:attr(),删除属性的方法:removeAttr()。<br /> ◆ alert($(“li:eq(1)”).attr(“title”));//获取第二个li元素的title属性。<br /> ◆ $(“ul”).attr({“title”:”列表”,”id”:”myul”});//一次性设置多个属性。<br /> ◆ $(“li:eq(1)”).removeAttr(“title”);//删除第二个li内的titile属性。<br /> <strong>

九、节点样式操作</strong><br /> 1、获取和设置样式可以用前面讲的设置获取属性(attr())方法来实现<br /> ◆ var li_class=$(“li:eq(2)”).attr(“class”);//获取第二个li元素的class属性值。<br /> ◆ $(“li:eq(2)”).attr(“class”,”myclass”);//给第二个li元素设置class属性为myClass<br /> 2、追加样式使用addClass()方法<br /> ◆ $(“li:eq(2)”).addClass(“another”);//给第二个li元素追加another类选择器,和前面设置的样式不同的功能<br /> 会叠加,相同的功能会覆盖。<br /> 3、移除样式使用removeClass()方法<br /> ◆ $(“li:eq(2)”).removeClass(“myClass”);//移除一个calss选择器<br /> ◆ $(“li:eq(2)”).removeClass(“myClass another”);//以空格方式隔开来同时移除多个class选择器<br /> <strong>

十、节点样式操作</strong><br /> 1、切换样式使用toggleClass()方法<br /> ◆ $(“li:eq(2)”).toggleClass(“another”);//重复切换another选择器,已经使用的时候移除,没有使用的时候设<br /> 置。<br /> 2、判断是否含有某个样式使用hasClass()方法<br /> ◆ $(“li:eq(2)”).hasClass(“another”);//有返回true,没有返回false<br /> //此方法和$(“li:eq(2)”).is(“another”);等同。<br /> <strong>

十一、设置和获取HTML、文本和值</strong><br /> 1、HTML()方法<br /> 2、val()方法<br /> 3、text()方法<br /> <strong>

十二、遍历节点操作</strong><br /> 1、children()方法:该方法用于取得匹配元素的子元素集合<br /> 2、next()和prev()方法:用于取得匹配元素后面(前面)紧邻的同辈元<br /> 3、parent()方法:用于取得匹配元素的父级元素<br /> 4、siblings()方法:该方法用于取得匹配元素前后所有的同辈元素<br /> 5、closest()方法:该方法用于取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则逐级向上查找父元素,找到则返回,找不则返回空的对象。<br /> <strong>

十三、获取和设置某个元素的样式属性 </strong><br /> 1、$(“p”).css(“color”); //取得段落的color样式属性的值。<br /> 2、$(""p"").css({ ""color"": ""#ff0011"", ""background"": ""blue"" }); //将所有段落的字体颜色设为红色并且背景为蓝色。<br /> 3、$(""p"").css(""color"",""red""); //将所有段落字体设为红色<br /> <strong>

十四、获取和设置元素的高度和宽度</strong><br /> 1、$(“p”).height();//获取段落的高度<br /> 2、$(""p"").height(20);//把所有段落的高设为 20px<br /> 3、$(“p”).width();//获取段落的宽度<br /> 4、$(“p”).width(20);//把所有段落的宽度设为 20px<br /> <strong>

十五、元素定位的方法</strong><br /> 1、offset()方法:获取和设置元素在当前视窗的相对偏移,主要有top和left属性。<br /> 2、position()方法:获取匹配元素相对父元素的偏移,同样有两个属性top和left。<br /> 3、scrollTop()和scrollLeft()方法

原文地址:https://www.cnblogs.com/HiJackykun/p/11197100.html

时间: 2024-11-08 12:44:28

Jquery基础入门-3-JQuery DOM操作-3、4、5的相关文章

jQuery基础学习(三)&mdash;jQuery中的DOM操作

一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法. //1.操作文本节点:通过jQuery的text()方法 alert($("#bj").text()); $("#bj").text("南京"); alert($("#bj").text()); //2.操作属性节点 //注:

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

JQuery基础及css和属性操作 其他函数

JQuery语法 使用JQuery必须先导入jquery-X.X.X.js文件 jQuery中的选择器       $("选择器名称").函数名(); 注意     $ 是jQuery的缩写,也就是说,选择器可以使用jQuery(":input") jQuery   文档就绪函数 $(document).ready(function(){ //jQuery代码 console.log($(":input:disabled")), }); 简写文档

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

jquery学习(二)-DOM操作

来自锋利的jquery第二版 一.DOM分类 DOM分为3类DOM Core(核心).HTML-DOM.CSS-DOM 1.DOM Core:其并不专属于javascript,任何一种支持DOM程序设计的语言都可以使用它.如javascript中的getElementById.getElementByTagName.getAttibute和setAttribute等方法,就是DOM Core的组成部分. 2.HTML-DOM:其比DOM Core出现的还要早,它提供了一些更简明的记号来描述各种H

jQuery 【事件】【dom 操作】

事件  hover( function(){},function(){})   --  鼠标移入移出事件   toggle(function(){},function(){},function(){},....)  -- 循环执行,花括号内各方法循环执行  对象.live("事件名",function(){});  -- 对未来创建的元素进行操作 -- btn1 的点击事件中创建 class="div2" 的 div 放到 id="div1" 的

JQuery基础知识==认识JQuery

1. Javascript简介 1.1  JS的3个弊端:复杂的文档对象模型(DOM),不一致的浏览器实现和便捷的开发,调试工具的匮乏 1.2  为了简化JS的开发,一些JS程序库就诞生了,大部分的JS程序库都是封装了很多预定义的对象和实用函数,快捷开发并兼容各大浏览器 1.3  一些JS程序库:Prototype,Dojo,YUI,Ext JS,Moo Tools,JQuery库:轻量级,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性,链式操作等功能 2.  JQuery优势

jQuery基础学习3——jQuery库冲突

默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

jQuery 第四章 实例方法 DOM操作之data方法

jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有联系,存信息, 存数据.以便以操作, 但是淘宝 把data 等放在行间样式上, 是为了 vue 等 其他框架的使用,在jquery中, jquery为我们提供了一个方法, 就是.data() 以便于我们存信息, 存数据.是用jquery 时,不推荐把 data等信息,写在行间样式了,性能不高,还频繁