jquery有哪些常用方法

‘壹’ jquery的引用方式有几种分别是什么

总共有三种引用方式。

1、最常用的，引入样式表，在样式表中编写样式，引入方式如下：

<link href="css/style.css" rel="stylesheet" type="text/css">

2、在Html头部用<style></style>包起来，在这里面编写样式：

<style type="text/css">

*{

padding: 0;margin: 0

}

</style>

3、在标签里面直接编写行内样式。

<div style="color: #333"><div>

当然还有一种方式是用JS直接更改或者赋值给某个标签，但是其实是属于第三种的范围的。

‘贰’ jQuery常用属性和方法有哪些

属性：

获得标签：$("#id")
获得标签内的代码：.html()
获得标签内的文本：.text()
修改标签内的代码：.html("内容");
修改标签内的文本：.html("内容");

获得标签属性：.attr("属性");
修改标签属性：attr("属性","属性值");

添加样式：addClass("样式名");
动态切换样式：toggleClass("样式名");
获取样式：css

添加元素：append("元素");
移去元素：.remove();
清空节点： .empty();

获取第二个li节点： var $li=$("ul li:eq(1)");
获取第二个li节点的文本内容： var li_txt=$
方法：
一：插入节点：
append() 向每个匹配的元素文本内部的后面追加内容
eg：<p>我想说：</p>

代码：

$("p").append("<b>你好</b>");

结果为：<p>我想说：<b>你好</b></p>

appendto() 将所有的匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是B追加到A中，而是将A追加到B文本的后面中。
eg：<p>我想说：</p>

代码：

$("<b>你好</b>").appendTo("p");

结果为：<p>我想说：<b>你好</b></p>

prepend() 向每个匹配的元素文本的内部前置内容。
eg：<p>我想说：</p>

代码：

$("p").prepend("<b>你好</b>");

结果为：<p><b>你好</b>我想说：</p>

prependto() 将所有的匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是B前置到A中，而是将A前置到B中
eg：<p>我想说：</p>

代码：

$("<b>你好</b>").prependto("p");

结果为：<p><b>你好</b>我想说：</p>

after() 向每个匹配的元素之后插入内容 。
eg：<p>我想说：</p>

代码：

$("p").after("<b>你好</b>");

结果为：<p>我想说：<b>你好</b></p>

insertAfter 将所有的匹配的元素插入到指定的元素后面。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是B插入到A后面，而是将A插入到B后面。
eg：<p>我想说：</p>

代码：

$("<b>你好</b>").after("p");

结果为：<p>我想说：<b>你好</b></p>
before() 在每个匹配的元素之前插入内容
eg：<p>我想说：</p>

代码：

$("<b>你好</b>").after("p");

结果为：<p>我想说：<b>你好</b></p>
insertBefore():将A标签插入到B标签的前面

二：删除：
①remove 该节点所包含的所有的后代节点将同时被删除 也可以通过参数来选择
②empty 清空节点，它能清空元素中的所有后代节点

三：替换节点：
①replaceWith() 作用是将所有匹配的元素都替换成指定的HTML或DOM元素
②replaceAll()

四：包裹节点:
①warp() 作用是是将所有元素进行单独包裹
②warpAll() 作用元素的是所有匹配的元素用一个元素来包裹
③warpinner() 作用是将每一个的子内容（包括文本节点）用其他结构化的标记包裹起来

五：设置和获取HTML、文本值
1、html()：
2、text
3、val

六：遍历节点
1、children（）： 取得匹配元素的子元素
2、next（）：取得匹配元素后面紧邻的同辈元素
3、prev（）：取得匹配元素前面紧邻的同辈元素
4、siblings（）：取得匹配元素前后所有的同辈元素
5、closest（）：取得最近的匹配元素

七：css-dom
css 获取样式的属性

offset（）
position
scroll
scrollLeft

样式操作：
1：获取样式和设置样式 attr
eg：<p class="myClass" title="选择你最喜欢的水果">你最喜欢的水果是？</p>
获取样式： var p_class=$("p").attr("class");
设置样式：$("p").attr("class","high");
2：追加样式 addClass
<style>
.high{
font-weight:bold 粗体字
color:red 字体颜色
}
.another{
font-weight:italic 斜体字
color:blue 字体颜色
}
</style>

追加样式：

$("input:eq(2)").click(function(){$("p".addClass("another"))})

☆在css中有以下规定：
①如果给一个元素添加了多个class值，那么就相当于合并了他们的样式
②如果不同的class设置了同一样式，则后者覆盖前者
addClass attr
对同一个网页元素进行操作 <p>test</p> <p>test</p>
第一次使用 $<"p">.addClass("high"); $<"p">.attr("class","high");
第一次结果 <p class="high">test</p> <p class="high">test</p>
再次使用 $<"p">.addClass("another"); $<"p">.attr("class","another");
最终结果 <p class="high another">test</p> <p class="another">test</p>

3：移除样式 removeClass
<p class="high another">test</p>
移除一个：$<"p">.removeClass("high");
移除二个：$<"p">.removeClass("high").removeClass("another");==$<"p">.removeClass("high another")
移除全部：$<"p">.removeClass();

4：切换样式 toggle

5：判断是否含有摸个样式 hasClass
可以用来判断元素中是否含有某个class，如果有返回true否则返回false

‘叁’ jquery 常用使用方法

新窗口打开链接 XHTML Strict 版本不支持 target="_blank" 属性 而使用 JQuery 能很好地解决这个问题 实现新窗口打开网页

复制代码 代码如下:

$( a[@rel$= external ] ) click(function(){ this target = "_blank"; }); /* Usage: <a href=" target=_blank >css教程("padding" " em em" ); //B Target anything above IE if ($ browser msie && $ browser version > ) $("#menu li a") css("padding" " em em" ); //C Target IE and below if ($ browser msie && $ browser version <= ) $("#menu li a") css("padding" " em em" ); //D Target Firefox and above if ($ browser mozilla && $ browser version >= " " ) $("#menu li a") css("padding" " em em" );

字符串替换 用 JQuery 能对文本内容中的特定字符串进行替换操作

复制代码 代码如下:

var el = $( #id ); el (el () replace(/word/ig ""));

列高度相等 用 CSS 实现两列高度相等并不容易 JQuery 能帮你解决

复制代码 代码如下:

function equalHeight(group) { tallest = ; group each(function() { thisHeight = $(this) height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group height(tallest); } /* Usage: $(document) ready(function() { equalHeight($(" recent article")); equalHeight($(" footer col")); }); */

字体大小重设 字体大小重设是一个非常常用的功能

$(" resetFont") click(function(){ $( ) css( font size originalFontSize); }); // Increase Font Size $(" increaseFont") click(function(){ var currentFontSize = $( ) css( font size ); var currentFontSizeNum = parseFloat(currentFontSize ); var newFontSize = currentFontSizeNum* ; $( ) css( font size newFontSize); return false; }); // Decrease Font Size $(" decreaseFont") click(function(){ var currentFontSize = $( ) css( font size ); var currentFontSizeNum = parseFloat(currentFontSize ); var newFontSize = currentFontSizeNum* ; $( ) css( font size newFontSize); return false; }); });

禁用右键菜单 有许多 JavaScript 代码段可禁用右键菜单 但 JQuery 使操作变得更容易

复制代码 代码如下:

‘肆’ jQuery中常用的方法有哪些这些方法都是用来做什么的jQuery的这些方法是放到什么地方的

按以下几类分解
一、选择器(定位元素方法)方法
$("各种类型选择器")

二、筛选方法
$("xxx").find()等

三、对DOM元素的增、删、改方法
如append/remove/html/clone等

四、对DOM元素属性的增、删、改方法
如attr/css/val等方法

五、对集合的处理方法
如json/each等方法

六、对事件的绑定方法
如click/bind/live/toggle等方法

七、其它常用方法
如ajax等

‘伍’ jQuery的使用方法

使用步骤如下：
1.jQuery给放到一个文件夹里面,方便我们待会引用这个jQuery,这里我就放到我项目的js文件夹里面。
2.然后我们来开始编辑HTML界面代码。
3.使用script标签把jQuery引入到我们的HTML界面。src引号里面的就是我们的jQuery路径名称。
4.接着再书写一个script标签对,里面写上jQuery入口函数,这样,当我们的HTML加载完成之后就会执行我们的jQuery代码

‘陆’ jquery脚本的几个常用方法

1.多选框回显:

‘柒’ 浅析jQuery中常用的元素查找方法总结

$("#myELement") 选择id值等于myElement的元素 id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素 返回div元素数组 $(" myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素 可以运用多种的选择方式进行联合选择 例如$("#myELement div myclass")

层叠选择器 $("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点 经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器 $("tr:first") 选择所有tr元素的第一个 $("tr:last") 选择所有tr元素的最后一个 $("input:not(:checked) + span")

过滤掉 checked的选择器的所有的input元素 $("tr:even") 选择所有的tr元素的第 个元素（注意 因为所选择的多个元素时为数组 所以序号是从 开始） $("tr:odd") 选择所有的tr元素的第 个元素 $("td:eq( )") 选择所有的td元素中序号为 的那个td元素 $("td:gt( )") 选择td元素中序号大于 的所有td元素 $("td:ll( )") 选择td元素中序号小于 的所有的td元素 $(":header") $("div:animated")

内容过滤选择器 $("div:contains( John )") 选择所有div中含有John文本的元素 $("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组 $("div:has(p)") 选择所有含有p标签的div元素 $("td:parent") 选择所有的以td为父节点的元素数组

可视化过滤选择器 $("div:hidden") 选择所有的被hidden的div元素 $("div:visible") 选择所有的可视化的div元素

属性过滤选择器 $("div[id]") 选择所有含有id属性的div元素 $("input[name= newsletter ]") 选择所有的name属性等于 newsletter 的input元素 $("input[name!= newsletter ]") 选择所有的name属性不等于 newsletter 的input元素 $("input[name^= news ]") 选择所有的name属性以 news 开头的input元素 $("input[name$= news ]") 选择所有的name属性以 news 结尾的input元素 $("input[name*= man ]") 选择所有的name属性包含 news 的input元素 $("input[id][name$= man ]") 可以使用多个属性进行联合选择 该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器 $("ul li:nth child( )") $("ul li:nth child(odd)") $("ul li:nth child( n + )") $("div span:first child") 返回所有的div元素的第一个子节点的数组 $("div span:last child") 返回所有的div元素的最后一个节点的数组 $("div button:only child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器 $(":input") 选择所有的表单输入元素 包括input textarea select 和 button $(":text") 选择所有的text input元素 $(":password") 选择所有的password input元素 $(":radio") 选择所有的radio input元素 $(":checkbox") 选择所有的checkbox input元素 $(":submit") 选择所有的submit input元素 $(":image") 选择所有的image input元素 $(":reset") 选择所有的reset input元素 $(":button") 选择所有的button input元素 $(":file") 选择所有的file input元素 $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器 $(":enabled") 选择所有的可操作的表单元素 $(":disabled") 选择所有的不可操作的表单元素 $(":checked") 选择所有的被checked的表单元素 $("select option:selected") 选择所有的select 的子元素中被selected的元素 选取一个name 为”S_ _ ″的input text框的上一个td的text值 $(”input[@name =S_ _ ]“) parent() prev() text() 名字以”S_”开始 并且不是以”_R”结尾的 $(”input[@name ^= S_ ]“) not(”[@name $= _R ]“) 一个名为radio_ 的radio所选的值 $(”input[@name =radio_ ][@checked]“) val(); $("A B") 查找A元素下面的所有子节点 包括非直接子节点 $("A>B") 查找A元素下面的直接子节点 $("A+B") 查找A元素后面的兄弟节点 包括非直接子节点 $("A~B") 查找A元素后面的兄弟节点 不包括非直接子节点

$("A B") 查找A元素下面的所有子节点 包括非直接子节点 例子 找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("form input") 结果: [ <input name=name /> <input name=newsletter /> ]

$("A>B") 查找A元素下面的直接子节点 例子 匹配表单中所有的子级input元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("form > input") 结果: [ <input name=name /> ]

$("A+B") 查找A元素后面的兄弟节点 包括非直接子节点 例子 匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("label + input") 结果: [ <input name=name /> <input name=newsletter /> ]

‘捌’ jQuery的操作方式有哪些

一、选取DOM元素
jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。
var $ = document.querySelectorAll.bind(document);
这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组（有数字索引和length属性），但不是数组，不能使用pop、push等数组特有方法。
二、DOM操作
DOM本身就具有很丰富的操作方法，可以取代jQuery提供的操作方法。
尾部追加DOM元素。
// jQuery写法
$(parent).append($(child));
// DOM写法
parent.appendChild(child)
头部插入DOM元素。
// jQuery写法
$(parent).prepend($(child));
// DOM写法
parent.insertBefore(child, parent.childNodes[0])
删除DOM元素。
// jQuery写法
$(child).remove()
// DOM写法
child.parentNode.removeChild(child)

‘玖’ jquery中有哪些基础事件方法

jquery基础事件，包括绑定事件、简写事件、复合事件；

(9)jquery有哪些常用方法扩展阅读

1、绑定事件fn函数

1)使用点击事件

$('input').bind('click', function () {//点击按钮后执行匿名函数

alert('点击！');

});

2)普通处理函数

$('input').bind('click', fn); //执行普通函数式无须圆括号

function fn() {

alert('点击！');

}

2、简写事件函数

1）.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。而.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。

2）.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。

3）.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

3、复合事件示例，背景移入移出切换效果

$('div').hover(function () {

$(this).css('background', 'black'); //mouseenter 效果

}, function () {

$(this).css('background', 'red'); //mouseleave 效果，可省略

});

参考资料

jQuery官方网站-事件

‘拾’ Jquery中常用的AJax的方法有哪几个

jQuery中ajax的4种常用请求方式：
1.$.ajax()返回其创建的 XMLHttpRequest 对象。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。如果指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。
实例：
保存数据到服务器，成功时显示信息。
$.ajax({ type: "post", dataType: "html", url: '/Resources/GetList.ashx', data: dataurl, success: function (data) {
if (data != "") {
$("#pager").pager({
pagenumber: pagenumber, pagecount: data.split("$$")[1],
buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2.通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数
。如果需要在出错时执行函数，请使用 $.ajax。 实例：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3. 通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
实例：
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
function (data) {
if (data == "ok") {
alert("添加成功！");
}
}
)
4.通过 HTTP GET 请求载入 JSON 数据。
实例：
$.getJSON("api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&
jsoncallback=?，前面加上http://", function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});