美文网首页jqueryWeb前端之路
二jquery基本操作(2)

二jquery基本操作(2)

作者: 向布谷鸟说早安 | 来源:发表于2017-02-15 20:02 被阅读207次

1jquery对样式的操作(类)

1.1增加/删除样式

1.1.1addClass()
1.1.2removeClass()

1.2检查是否有某个指定的样式

hasClass()

1.3.增加删除样式

toggleClass()

2jquery对属性的操作

2.1添加(或者返回)/删除属性(常用)

attr() 没有是添加,有的话是返回,有两个参数,属性名,属性值,如果属性值没有设置,就可以得到这个值
removeAttr()
小知识:
图片的lazingloading:页面打开后图片会默认请求,为了不让未显示到当前屏上的图片去请求,可以用window.scrollY获取滚动条的位置。当没有滚动到图片位置时可以移除图片的src属性,滚动到相关位置时再添加上这个图片,可以减轻服务器的请求压力

2.2获取设置表单对象的值

val()

2.3以json形式返回data-*属性值

data()

3jquery对css的操作

$('p').css("属性名","属性值");如果没传属性值,意思就是获取这个属性的属性值和attr一样
注意:使用css设置font-size时不需要加px,返回的却是带px的字符串
此时需要用parseInt();

4jquery对domTree的操作

在Dom树中找到指定的元素并进行操作

4.1向上遍历

parent() parents()包括爷爷
parentsUtil() closest()

4.2向下遍历

find() children()

4.3同级遍历

siblings() next() nextAll() nextUntil() nextUntil() prev() prevAll() prevUntil()

4.4迭代操作(对数组的遍历操作)

4.4.1filter()

括号里是函数function(index,object){}
如果return true;返回匹配对象

4.4.2each()

返回上不会做一些操作

4.4.3map()

如果return true;返回return的内容,内容匹配,返回内容
以下是这三个方法在console.log()里的执行情况
html代码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript"src="jquery-3.1.0.min.js">
    
  </script>
  <script type="text/javascript">
    
  </script>
 </head>
 <body>
    <div id="" class="nav-list">
        <ul>
            <li class="nav-item">
                <h3><a href="#">研发.编程</a></h3>
                <p><a href="#" id="test">HTML5</a>
                   <a href="#">Java</a>
                </p>
            </li>
            <li class="nav-item">
                <h3><a href="#">研发.编程</a></h3>
                <p><a href="#">HTML5</a>
                   <a href="#">Java</a>
                </p>
            </li>
        </ul>
    </div>
 </body>
</html>

var jqueryList = $('a');
undefined
jqueryList.filter(function(){console.log(arguments)});
[]
jqueryList.filter(function(index,object){return index%2==0;});//返回偶数对象
[a, a, a]0: a1: a2: alength: 3prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.filter(function(index,object){return $("#test");});
[a, a#test, a, a, a, a]0: a1: a#test2: a3: a4: a5: alength: 6prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.filter(function(index,object){return index%2==1});//返回奇数对象
[a#test, a, a]0: a#test1: a2: alength: 3prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.filter(function(index,object){return $(object).attr("id")});//有id属性的对象
[a#test]0: a#testlength: 1prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.map(function(index,object){return $(object).attr("id")});//有id属性的对象
["test"]
jqueryList.map(function(index,object){return index%2==0});//返回偶数对象
[true, false, true, false, true, false]0: true1: false2: true3: false4: true5: falselength: 6prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.map(function(index,object){return $(object).attr("id")||object});//有id属性的对象
[a, "test", a, a, a, a]
jqueryList.each(function(index,object){return $(object).attr("id")||object});//有id属性的对象
[a, a#test, a, a, a, a]

本文相关代码链接:https://github.com/wangyiman/jqueryResource

相关文章

  • 二jquery基本操作(2)

    1jquery对样式的操作(类) 1.1增加/删除样式 1.1.1addClass()1.1.2removeCla...

  • 二jquery基本操作(1)

    1.三种创建元素的操作: 可以使用$直接创建元素 1.1线上模式 结果: 1.2线下组装模式(性能更好) 结果: ...

  • jQuery 基础

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • JQuery基础知识

    jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样式 css操作...

  • jQuery 样式操作

    jQuery 样式操作 1、基本样式操作 设置样式属性操作 获取样式属性操作 2、类样式操作 添加类样式 移除类样...

  • 2018-04-08

    JQuery 赋值基本操作整理,(转)

  • jQuery基本操作

    jquery选择器 选择集转移 click事件 jquery索引值 jquery选项卡 jQuery属性操作

  • JQuery基本操作

    (1)jQuery加载 jQuery加载 // alert();//弹...

  • jQuery基本操作

    1、文本操作: 2、样式操作:addClassremoveClasstoggleClass例如: 3、属性操作:

网友评论

    本文标题:二jquery基本操作(2)

    本文链接:https://www.haomeiwen.com/subject/lssqwttx.html