我们看别人写的js代码,发现很多不明白,其实只是你对语法不清楚。对函数方法了解的不全面。

/**************************************************************************************************************************************************************************************************************************************************************/

第一大类:取值赋值操作(返回值和设置值)

例如:$().css()   使用的是jq中的css()方法。

    如果你遇到,$(' ').css("background-color");里面只有一个css属性【background-color】,代表这句话的意思是返回该选择器下的背景色。

    如果你遇到,$(' ').css("background-color",“#888888”);里面有两个css属性【background-color,#888888】,代表这句话的意思是设置该选择器下的背景色的颜色值。

例如:$("#ID").attr();

   $("#ID").attr(‘attribute’);取值

   $("#ID").attr(‘attribute’,‘value’);设置值

【注意】:.css()  与 .attr() 的区别见网址:https://www.cnblogs.com/hfeng007/p/9143925.html

例如:$().text()使用的是jq中的.text()方法

    text() 方法方法设置或返回被选元素的文本内容。

    $().text():返回选择器选中的文本内容。

    $().text(‘xxxx’):覆盖替换选择器选中的文本内容。

例如:$().val()   :取值

$().val('XXX'):赋值

例如:$("#ID").html();  :相当于取innerHTML

   $("#ID").html(""); :相当于赋值给innerHTML

例如;$(this).idnex();返回当前元素的位置。从0开始

/**************************************************************************************************************************************************************************************************************************************************************/

/**************************************************************************************************************************************************************************************************************************************************************/

第二大类:显示和隐藏

例如:$().hide()   :隐藏

   $().show() :显示

/**************************************************************************************************************************************************************************************************************************************************************/

/**************************************************************************************************************************************************************************************************************************************************************/

第三大类:事件处理

例如:$().bind():绑定事件

   $().unbind(): 解绑事件

jq版本1.7以上新增以下的:

   $().on() :绑定事件

   $().off() :解绑事件

/**************************************************************************************************************************************************************************************************************************************************************/

/**************************************************************************************************************************************************************************************************************************************************************/

第四大类:外观处理

$("#ID").hover( handelIN,handelOUT);//鼠标悬停,增加效果,等同于,$( selector ).mouseover( handlerIn ).mouseout( handlerOut );

$("#ID").addClass(class);//添加样式

$("#ID").removeClass(class);//移除样式

/**************************************************************************************************************************************************************************************************************************************************************/

/**************************************************************************************************************************************************************************************************************************************************************/

第五大类:查找和遍历筛选

$("#ID").each(    function(){ //......}     );//为每个匹配元素添加函数

$("#ID").eq( index);//方法返回带有被选元素的指定索引号的元素(即返回选择器选择下的索引号的元素)     $(" p:eq(1) ")//选择器选择第二个p

$("#ID").find(expr);//搜索所有与指定表达式匹配的元素,即返回被选元素的后代元素,子、孙、曾孙

$("#ID").parent();//获得当前匹配元素集合中每个元素的祖先元素

$("#ID").parents();//获得当前匹配元素集合中每个元素的父元素

$("#ID").children();//获得匹配元素集合中每个元素的所有子元素

$("#ID").map(callback);//将一组元素转换成其他数组

$("#ID").filter();//将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素

$("#ID").not();//从匹配元素集合中删除元素

$("#ID").add();//将元素添加到匹配元素的集合中

$("#ID").slice();//将匹配元素集合缩减为指定范围的子集

$("#ID").siblings(); //获得匹配元素集合中所有元素的同辈元素

$("#ID").prev() & prevAll();//获得匹配元素集合中每个元素紧邻的前一个/所有同辈元素

$("#ID").next() & nextAll();//获得匹配元素集合中每个元素紧邻的一个/所有同辈元素

/**************************************************************************************************************************************************************************************************************************************************************/

/**************************************************************************************************************************************************************************************************************************************************************/

第六大类:元素节点操作

$("#ID").wrap(html);//把所有匹配的元素用其他元素的结构化标记包裹起来

$("#ID").empty();//删除匹配的元素集合中所有的子节点

/**************************************************************************************************************************************************************************************************************************************************************/

/**************************************************************************************************************************************************************************************************************************************************************/

第七大类:Ajax操作

$("#ID").load(url,[data],[callback]);//载入远程 HTML 文件代码并插入至 DOM 中

//url (String) : 待装入 HTML 网页网址。

//data (Map) : (可选) 发送至服务器的 key/value 数据。

//callback (Callback) : (可选) 载入成功时回调函数。

jQuery.ajax();//返回其创建的XMLHttpRequest对象。只有一个参数,参数是key/value 对象,包含各配置及回调函数信息。

/**************************************************************************************************************************************************************************************************************************************************************/

/**************************************************************************************************************************************************************************************************************************************************************/

第八大类:序列化

$("form").serialize();//序列化表格内容为字符串

/**************************************************************************************************************************************************************************************************************************************************************/

工具方法(jQuery可以使用$代替)

jQuery.each(obj,callback);//遍历对象和数组

jQuery.map();//修改数据

jQuery.grep();//数据筛选,返回一个经过筛选后的数组

jQuery.inArray(value,array);//查找元素的下标

jQuery.merge(array1,array2);//合并两个数组

jQuery.unique(dom);//去除重复DOM元素

jQuery.makeArray(obj);//将类数组对象转换为数组对象

jQuery.trim(str);//去掉字符串起始和结尾的空格

jQuery.contains(dom1,dom2);//dom1节点是否包含dom2节点

jQuery.type();//返回对象的数据类型

jQuery.isArray();//是否为数组。

jQuery.isEmptyObject();//是否为空对象(不含可枚举的属性)。

jQuery.isFunction();//否为函数。

jQuery.isNumeric();//是否为数组。

jQuery.isPlainObject();//是否为使用“{}”或“new Object”生成的对象,而不是浏览器原生提供的对象。

jQuery.isWindow();//是否为window对象。

jQuery.isXMLDoc();//判断一个DOM节点是否处于XML文档之中。

jQuery.param(object);//将对象的键值对转化为URL键值对字符串形式

jQuery.proxy();//调整this的指向

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

window 的方法

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)

例如:$().not() 使用的是jq中的not()方法

    语法1:.not(selector)  selector:选择器表达式

    语法2:.not(element)  element:一个或多个需要从匹配集中删除的 DOM 元素。

    语法3:.not(function(index))   function(index):用于检测集合中每个元素的函数。this 是当前 DOM 元素。

      如果给定一个表示 DOM 元素集合的 jQuery 对象,.not() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所应用的选择器会检测每个元素;不匹配该选择器的元素会被包含在结果中。

          请思考下面这个带有简单列表的页面:

              <ul>
                <li>list item 1</li>
                 <li>list item 2</li>
                 <li>list item 3</li>
                <li>list item 4</li>
                <li>list item 5</li>
              </ul>

        我们可以向列表项集应用该方法:

      $('li').not(':even').css('background-color', 'red');

例如:$().filter() 使用的是jq中的filter()方法

    与.not()方法正好相反。

例如:$().click()使用的是jq中的.click()方法

  

jQuery难学是因为什么?的更多相关文章

  1. 传说中的WCF(1):这东西难学吗?

    WCF难学吗? 是啊,这问题估计很多人都会问,也包括阿拉在内,也有此深刻而严重的凝问. 也有人说:“如何某项技术可以化繁为简,学起来轻松一点就好了.”也许,人类开生就摆脱不了一种习性——懒惰:不过,也 ...

  2. C语言指针专题——指针难学的4点原因

    前一篇跟大家聊了聊指针的概念,可是就算了解了指针是什么,为什么依然感觉难学?我试着从几个点切入,聊聊指针难学之处. 文末会给大家推荐几本书,有需要的朋友可以看看! 难点1. 讨厌的星号 定义指针变量p ...

  3. JVM 真的很难学么?不、只是你“不敢学”而已

    JVM 真的很难学么?不.只是你"不敢学"而已        许多招聘的信息上面都说,要了解jvm.多线程什么的对于 java 程序员来说,这是工作好多年的程序员都不一定能掌握的东 ...

  4. JVM难学?那是因为你没认真看完这篇文章

    一:虚拟机内存图解 JAVA程序运行与虚拟机之上,运行时需要内存空间.虚拟机执行JAVA程序的过程中会把它管理的内存划分为不同的数据区域方便管理. 虚拟机管理内存数据区域划分如下图: 数据区域分类: ...

  5. JVM难学?那是因为你没认真看完这篇文章(转)

    一:虚拟机内存图解 JAVA程序运行与虚拟机之上,运行时需要内存空间.虚拟机执行JAVA程序的过程中会把它管理的内存划分为不同的数据区域方便管理. 虚拟机管理内存数据区域划分如下图: 数据区域分类: ...

  6. 为什么Web前端变的越来越复杂,变得更加难学了

    前端发展了也有些年头了,曾记得很多年前,聊起前端,都觉得是很简单,那个时候都没有前端工程师这个职位.可现在,前端已经逆袭了,已经不是原来的样子了,各种技术层出不穷,显的越来越高深莫测了.前端真的变得那 ...

  7. Java为何这么难学?

    在学校的时候,就开始接触Java,哪个时候学的是基础的语法.毕业之后,由于没有找到实习工作且没有从事Java开发,慢慢的就把Java给丢了.从学校出来的几个同事,有的进入了项目实施行业,做了项 目经理 ...

  8. 跟着《beginning jquery》学写slider插件并借助自定义事件改进它

    <beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...

  9. jquery从零开始学----选择器

     (2011-01-10 21:21:28) 转载▼ 后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix m ...

随机推荐

  1. mybatis多个参数时传参方式

    第一种方案 DAO层的函数方法 Lecture getLecture(Integer id, Integer parentId); 对应的mapper.xml <select id=" ...

  2. 【rust】rust安装,运行第一个Rust 程序 (1)

    安装 Rust 在 Unix 类系统如 Linux 和 macOS 上,打开终端并输入: curl https://sh.rustup.rs -sSf | sh 回车后安装过程出现如下显示: info ...

  3. Java——动态绑定和多态

    动态绑定是在执行期间(而不是编译期间)判断所用对象的实际类型,根据其实际的类型调用其相应的方法(确定选择哪个多态形式被调用). 首先是方法的参数是父类对象,传入子类对象是否可行 然后引出Parent ...

  4. placeholder属性 样式修改(颜色,大小,位置)

    input::-webkit-input-placeholder{ color:red; } /* WebKit, Blink, Edge */ input::-moz-placeholder{ co ...

  5. 转载:PICT使用教程(设计测试用例工具)

    原文:https://blog.csdn.net/quiet_girl/article/details/50699543 之前一篇写了正交设计助手的使用教程,与正交设计助手相比,个人觉得PICT的使用 ...

  6. 在centos上配置环境

    1.   安装wget [root@localhost ~]# yum -y install wget 2.   在oneinstack官网配置安装环境 wget http://mirrors.lin ...

  7. Springboot-H2DB

    为什么在Springboot中用H2DB 用Springboot开发需要连接数据库的程序的时候,使用H2DB作为内存数据库可以很方便的调试程序. 怎么用 1.加入依赖 <dependency&g ...

  8. C++ Boost库的编译及使用

    https://www.jianshu.com/p/de1fda741beb https://www.cnblogs.com/weizhixiang/p/5804778.html Windows编译 ...

  9. WPF 实现多语言支持

    WPF 多语言有各种实现方式.如 https://www.codeproject.com/Articles/35159/WPF-Localization-Using-RESX-Files,后来发现这个 ...

  10. 009-elasticsearch5.4.3【三】搜索概述-查询模型、分页、ES数据类型

    一.概述 1.查询模型 搜索API允许用户执行搜索查询并返回与查询匹配的搜索匹配.它可以跨一个或多个索引以及跨一种或多种类型执行.可以使用查询Java API提供查询.搜索请求的主体是使用Search ...