博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jq 杂
阅读量:5061 次
发布时间:2019-06-12

本文共 2982 字,大约阅读时间需要 9 分钟。

1.获取属性的方法

  attr();

$("img").attr("src");//获得img标签的src的属性值$("img").attr("src","test.jpg");//给img标签的src属性赋值。$("img").attr({ src: "test.jpg", alt: "Test Image" });//给img标签的多个属性赋值$("img").attr("title", function() { return this.src });//可以写函数

  removeAttr();

$("img").removeAttr("src"); //移除img的src属性

2.对css的class的操作方法

  addClass();

$("p").addClass("selected");//给p标签添加selected添加class值$("p").addClass("selected1 selected2");//给p标签添加多个class值得方法

  removeClass():

$("p").removeClass("selected");//删除selected的class值$("p").removeClass();//删除所有的class值$('li:last').removeClass(function() {//删除这个元素跟上一个元素的class共有的值    return $(this).prev().attr('class');});

  toggleClass();如果有这个class就去删除,如果没有就去添加

$("p").toggleClass("selected");//为匹配的元素切换 'selected' 类$('div.foo').toggleClass(function() {
//根据父元素来设置class属性 if ($(this).parent().is('.bar') { return 'happy'; } else { return 'sad'; }});

3.跟文本和HTML节点有关的

  html();

$('p').html();//获取p标签下的所有内容,包括文本和元素节点$("p").html("Hello world!");//设置所有 p 元素的内容$("p").html(function(n){    return "这个 p 元素的 index 是:" + n;});

  text();

$('p').text();//返回p元素的文本内容。$("p").text("Hello world!");//设置所有 p 元素的文本内容

  val();

$("input").val();//获取文本框中的值$("input").val("hello world!");//设定文本框的值

4.css

  css();

$("p").css("color");//获取p标签的color属性值$("p").css("color","red");//将所有段落字体设为红色$("p").css({ color: "#ff0011", background: "blue" });//将所有段落的字体颜色设为红色并且背景为蓝色。

5.位置

  offset():获取匹配元素在页面最左端的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。

console.log($("#test").offset());//{left:100,top:100}

  position(): 获取元素相对父元素(相对定位的元素)的偏移;此方法只对可见元素有效。

console.log($("#posi").position());//获取跟最近的父级(定位为relative)的偏移量

  scrollTop();获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

var p = $("p:first");$("p:last").text( "scrollTop:" + p.scrollTop() );//获取第一段相对滚动条顶部的偏移$("div.demo").scrollTop(300);//设置相对滚动条顶部的偏移

   scrollLeft();

var p = $("p:first");$("p:last").text( "scrollLeft:" + p.scrollLeft() );//获取第一段相对滚动条左侧的偏移$("div.demo").scrollLeft(300);//设置相对滚动条左侧的偏移

6.尺寸

  height();

$("p").height();//获取p元素的高$("p").height(20);//把所有段落的高设为 20:

  width();

$("p").width();//p元素的宽$("p").width(20);//设置p元素的宽

  innerHeight();获取第一个匹配元素内部区域高度(包括padding、不包括border,margin)。此方法对可见和隐藏元素均有效。

var p = $("p:first");$("p:last").text( "innerHeight:" + p.innerHeight() );//获取第一个p元素的内部区域高度。

  innerWidth():获取第一个匹配元素内部区域宽度(包括padding、不包括border,margin)。此方法对可见和隐藏元素均有效。

var p = $("p:first");$("p:last").text( "innerWidth:" + p.innerWidth() );//获取第一个p元素的宽度

  outerHeight(): 获取匹配元素的外部高度(包括padding,border  但是不包括margin)此方法对可见和隐藏元素均有效。如果 里面参数是 true的话,最终值是包括margin的

var p = $("p:first");$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );//第一个就是没有margin的值,第二个表示有margin的值

 

  outerWidth(): 获取匹配元素的外部高度(包括padding,border  但是不包括margin)此方法对可见和隐藏元素均有效。如果 里面参数是 true的话,最终值是包括margin的

var p = $("p:first");$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );//第一个就是没有margin的值,第二个表示有margin的值

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

转载于:https://www.cnblogs.com/web-chuan/p/9112795.html

你可能感兴趣的文章
无法向会话状态服务器发出会话状态请求
查看>>
数据中心虚拟化技术
查看>>
01入门
查看>>
复习文件操作
查看>>
SQL Server 使用作业设置定时任务之一(转载)
查看>>
第二阶段冲刺-01
查看>>
BZOJ1045 HAOI2008 糖果传递
查看>>
发送请求时params和data的区别
查看>>
JavaScript 克隆数组
查看>>
eggs
查看>>
一步步学习微软InfoPath2010和SP2010--第七章节--从SP列表和业务数据连接接收数据(4)--外部项目选取器和业务数据连接...
查看>>
如何增强你的SharePoint 团队网站首页
查看>>
FZU 1914 Funny Positive Sequence(线性算法)
查看>>
oracle 报错ORA-12514: TNS:listener does not currently know of service requested in connec
查看>>
基于grunt构建的前端集成开发环境
查看>>
MySQL服务读取参数文件my.cnf的规律研究探索
查看>>
java string(转)
查看>>
__all__有趣的属性
查看>>
写博客
查看>>
利用循环播放dataurl的视频来防止锁屏:NoSleep.js
查看>>