知识大全 jquery的介绍与使用

Posted 2022-07-20 知

篇首语：幼敏悟过人，读书辄成诵。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jquery的介绍与使用相关的知识，希望对你有一定的参考价值。

　　当前流行的JavaScript库有:

　　jQuery MooTools Prototype Dojo YUI EXT_JS DWR

　　jQuery由美国人JohnResig创建至今已吸引了来自世界各地的众多javascript高手加入其team

　　jQuery是继prototype之后又一个优秀的Javascript框架其宗旨是——WRITELESS DO MORE 写更少的代码做更多的事情

　　它是轻量级的js库(压缩后只有 k) 这是其它的js库所不及的它兼容CSS 还兼容各种浏览器(IE + FF + Safari + Opera +)

　　jQuery是一个快速的简洁的javaScript库使用户能更方便地处理HTMLdocuments events 实现动画效果并且方便地为网站提供AJAX交互

　　jQuery还有一个比较大的优势是它的文档说明很全而且各种应用也说得很详细同时还有许多成熟的插件可供选择

　　jQuery能够使用户的页保持代码和内容分离也就是说不用再在里面插入一堆js来调用命令了只需定义id即可

　　jQuery对象就是通过jQuery包装DOM对象后产生的对象

　　引入jquery 将js文件导入项目中在引入页面

　　jQuery对象是jQuery独有的如果一个对象是jQuery对象那么它就可以使用jQuery里的方法: $(“#test”) ();

　　比如

　　$("#test") () 意思是指获取ID为test的元素内的代码其中()是jQuery里的方法

　　这段代码等同于用DOM实现代码

　　document getElementById("test ") innerHTML;

　　虽然jQuery对象是包装DOM对象后产生的但是jQuery无法使用DOM对象的任何方法同理DOM对象也不能使用jQuery里的方法乱使用会报错

　　约定如果获取的是 jQuery对象那么要在变量前面加上 $

　　•var$variable =jQuery对象

　　•varvariable = DOM对象

　　选择器是jQuery的根基在jQuery中对事件处理遍历DOM和Ajax 操作都依赖于选择器

　　jQuery选择器的优点:

　　•简洁的写法

　　•完善的事件处理机制

　　==========================基本选择器

　　$("#id")//通过id查找节点元素

　　$("标签名")//通过标签名查找节点元素

　　$(" class的值")//通过class属性的值查找节点元素

　　$("*")//查找所有的节点标签

　　==========================层次选择器

　　$("标签或者id或者class 标签或者id或者class")//查找标签或者id或者class节点中的所有标签或者id或者class节点 “ ”空格代表指定标签里面的所有标签 class id

　　$("标签或者id或者class>标签或者id或者class")//查找标签或者id或者class节点中的子节点标签或者id或者class “>”代表父子关系

　　$("标签或者id或者class+标签或者id或者class")//查找标签或者id或者class的下一个标签或者id或者class节点 “+”下一个节点

　　$("标签或者id或者class~标签或者id或者class")//查找标签或者id或者class的以后的所有的标签或者id或者class节点 “~”以后的所有节点

　　$("id或者class") siblings("div")//查找id或者class并且是指定节点的节点元素

　　==========================基础过滤选择器

　　 $(节点元素条件)

　　$("标签或者id或者class:first")//查找标签或者id或者class第一个出现的节点元素

　　$("标签或者id或者class:last")//查找标签或者id或者class最后一个出现的节点元素

　　$("div:not(标签或者id或者class)")//查找某节点上不为标签或者id或者class节点元素注意没有id或者class属性也包括在内

　　$("标签或者id或者class:even")//查找标签或者id或者class出现顺序为偶数的节点元素

　　$("标签或者id或者class:odd")//查找标签或者id或者class出现顺序为奇数的节点元素

　　$("标签或者id或者class":gt(index))//查找标签或者id或者class索引值大于指定index的节点元素;gt是 greater than的缩写

　　$("标签或者id或者class:eq(index)")//查找标签或者id或者class索引值等于指定index的节点元素;eq是equals的简写

　　$("标签或者id或者class:lt(index)")//查找标签或者id或者class索引值小于指定index的节点元素;lt是less than的简写

　　$(":header")//查找所有的标题节点元素;是固定写法

　　$("标签或者id或者class") slideToggle( method);//让标签或者id或者class节点元素动起来表示动画时长的毫秒数 method回调的方法

　　==========================内容过滤选择器

　　$("标签或者id或者class:contains( di )")//查找标签或者id或者class内容里面包含指定内容的节点元素

　　$("标签或者id或者class:empty")//查找标签或者id或者class没有任何子元素的节点元素

　　$("标签或者id或者class:has(标签或者id或者class)")//查找标签或者id或者class包含标签或者id或者class元素的节点元素

　　$("标签或者id或者class:parent")//查找标签或者id或者class包含子元素的节点元素

　　$("标签或者id或者class:not(:contains( di ))")//查找标签或者id或者class不包含指定文本内容的节点元素

　　==========================可见度过滤选择器

　　$("标签或者id或者class:visible")//查找标签或者id或者class为可见元素的节点元素

　　$("标签或者id或者class:hidden") show()//查找标签或者id或者class为隐藏元素的节点元素

　　each(function(index domEle)

　　alert(index+"==="+domEle value);

　　);//jquery的遍历方法 index是角标 domEle是将节点元素对象转换成dom对象返回

　　$ each(需要遍历的对象或数组 function(index domEle))//jquery的静态方法

　　==========================属性过滤选择器

　　$("标签或者id或者class[title]")//查找标签或者id或者class节点元素属性为title的节点元素

　　$("标签或者id或者class[title=test]")//查找标签或者id或者class节点元素属性为title并且等于指定值的节点元素

　　$("标签或者id或者class[title!=test]")//查找标签或者id或者class节点元素属性为title并且不等于指定值的节点元素;注意没有title属性的也包括在内

　　$("标签或者id或者class[title^=te]")//查找标签或者id或者class节点元素属性为title并且属性值以指定开始值的节点元素

　　$("标签或者id或者class[title$=te]")//查找标签或者id或者class节点元素属性为title并且属性值以指定结束值的节点元素

　　$("标签或者id或者class[title*=te]")//查找标签或者id或者class节点元素属性为title并且属性值包含指定值的节点元素

　　$("标签或者id或者class[title*=te][属性] ")//查找标签或者id或者class节点元素同时过滤多个属性的节点元素

　　==========================子元素过滤选择器

　　$("标签或者id或者class :nth child(index)")//查找标签或者id或者class节点下的指定子元素;注意在之前加空格 index是从开始

　　$("标签或者id或者class :first child")//查找标签或者id或者class节点下的第一个子元素

　　$("标签或者id或者class :last child")//查找标签或者id或者class节点下的第一个子元素

　　$("标签或者id或者class :only child")//查找标签或者id或者class节点如果只有一个子元素就返回

　　==========================表单选择器

　　input[type=checkbox]:checked") length//获取多选按钮的选中的个数

　　$("select>option:selected")//获取下拉选框选中的内容一般用each遍历

　　==========================匹配选择器

　　$(":input")//返回值集合元素说明:匹配所有 input textarea select 和 button 元素

　　$(”:text”)//返回值集合元素说明: 匹配所有的单行文本框

　　$(”:password”)//返回值集合元素说明: 匹配所有密码框

　　$(”:radio”)//返回值集合元素说明: 匹配所有单选按钮

　　$(”:checkbox”)//返回值集合元素说明: 匹配所有复选框

　　$(”:submit”)//返回值集合元素说明: 匹配所有提交按钮

　　$(”:image”)//返回值集合元素说明: 匹配所有图像域

　　$(”:reset”)//返回值集合元素说明: 匹配所有重置按钮

　　$(”:button”)//返回值集合元素说明: 匹配所有按钮这个包括直接写的元素button

　　$(”:file”)//返回值集合元素说明: 匹配所有文件域

　　$(”input:hidden”)//返回值集合元素说明: 匹配所有不可见元素或者type为hidden的元素这个选择器就不仅限于表单了除了匹配input中的hidden外那些style为hidden的也会被匹配

　　注意: 要选取input中为hidden值的方法就是上面例子的用法但是直接使用 “:hidden”的话就是匹配页面中所有的不可见元素包括宽度或高度为的

　　==========================

　　=====创建节点元素

　　$("

　　")//标签怎么写就怎么写注意自闭合标签的写法:

　　=====插入节点

　　$("#a") append($("#b"))//将后面的b节点添加到a节点上

　　$("#a") appendTo($("#b"))//将前面的a节点添加到b节点上

　　$("#a") after($("#b"))//将后面的b节点添加到a节点的后面

　　$("#a") before($("#b"))//将后面的b节点添加到a节点的前面

　　$("#a") insertAfter($("#b"))//将前面的a节点插入到b节点的后面

　　$("#a") insertBefore($("#b"))//将前面的a节点插入到b节点的前面

　　=====删除节点元素

　　remove()//删除节点元素自身删除

　　empty()//删除所有的字节点不删除属性节点

　　=====克隆节点元素

　　clone(boolean)//克隆一个节点默认只克隆节点不克隆事件如果传入一个true就代表事件也同时克隆

　　=====替换节点元素

　　$("#a") repalaceWith($("#b"))//将a节点替换成b节点

　　$("#a") repalaceAll($("#b"))//将b节点替换成a节点

　　=====常用的基本方法

　　val()//获取节点元素的值

　　val("xxx")//改变节点元素的值

　　text()//获取节点对象的文本内容

　　text("abcd")//设置文本节点

　　attr("name")//获取name属性值

　　attr("name" "zhangsan")//设置name属性值

　　removeAtt("name")//删除属性

　　==========================

　　 css( 属性值属性名 )//设置样式

　　=====dom/jquery转换

　　 $(dom对象)将dom对象装换成jquery对象

　　 var name = $变量名[index] //将jquery转换成dom对象

　　 jquery提供了一个get(index)方法将jquery转换成dom对象

　　 $(document) ready(function());//所有页面中的内容加载完毕才执行//简写格斯:$() ready(function());

cha138/Article/program/Java/JSP/201311/19828