jquery 对象 参数 jquery对象的方法有哪些 |
您所在的位置：网站首页 › ajax的属性有哪些 › jquery 对象 参数 jquery对象的方法有哪些 |
jquery 对象 参数 jquery对象的方法有哪些
|
文章目录1. 创建jQuery对象方法1：选择器生成方法2：DOM对象生成方法3：HTML标签生成2. 对HTML标签属性操作的方法 ⑴ 常规标签的内容 ⑵ 标签某个属性的值attr()方法prop()方法 ⑶ 表单标签的value属性值 ⑷ 为标签添加class属性 ⑸ 删除属性小结3. 对CSS样式操作的方法样式设置滚动条4. jQuery对象的操作 ⑴ each() ⑵ size() 和 length ⑶ get() 和 eq()5. 效果 ⑴ 基本效果 隐藏 显示隐藏 切换 ⑵ 滑动 ⑶ 淡入淡出 ⑷ 动画6. 事件处理 事件和对应的方法 ready()方法 标准事件绑定和解除7. AJAX serialize()方法 serializeArray()方法 param()方法
在JavaScript中我们使用HTML元素对象的innerHTML属性和innerText属性来获取和设置内容，而jQuery中使用html()和text()方法来获取和设置内容。html()和text()方法使用上差不多，这里以html()为例 方法声明： html([val|fn]) 功能说明： 设置或获取元素的html内容 参数说明： 无参，表示获取元素的html内容，如果是多个对象，只获取第一个对象的html内容；参数 val 是String类型。使用参数val，表示将元素的html内容设置为 val，如果是多个对象，将所有的对象的html内容都设置为 val；参数 function(index, html)是Function类型，第一个参数为当前元素的索引值，第二个参数为原先的 html 值，如果 fn 有返回值，表示将元素 html 内容设置为这个返回值，如果没有返回值，表示获取元素的 html 内容。 通常都会设置返回值，可以用这种方式为每个对象设置不同的 html 内容
测试html()
测试test()function test1() {
// 获取id为a1的元素的内容(识别标签)
var text1 = $("#a1").html();
// 将id为a1的元素的内容设置为超链接(识别标签)
$("#a1").html('我的博客');
}
function test2() {
// 获取id为a1的元素的内容(不识别标签)
var text2 = $("#a1").text();
// 将id为a1的元素的内容设置为超链接(不识别标签)
$("#a1").text('我的博客');
}需要注意的地方： 如果使用$()获取的是多个对象，那么 html() 只会获取第一个元素的html内容，而 text() 则会获取所有对象的纯文本内容的组合如果使用$()获取的是多个对象，那么 html(val) 和 text(val) 会将所有对象的内容都会被设置为 val在jQuery中，一个函数如果没有传递参数，那么这个函数很有可能是取值，如果传递了参数，那么这个函数很有可能是赋值 在帮助文档中，可以看到 html() 和 text() 的参数还可以是一个函数类型的变量function(index, text)
hello
word// 获取jQuery对象数组中每一个对象的html值
$("div").html(function(index，html) {
console.log(index + " " + html);
})
方法声明： attr(name|properties|key,value|fn) 功能说明： 设置或获取元素某个属性的属性值 参数说明： 参数name，String类型，表示获取属性名为name的属性值，如果是多个对象，只返回第一个对象的name属性的属性值。参数properties，properties是{属性1:属性值1,属性2:属性值2,…}的形式(就是个对象)，表示将属性1的属性值设置为属性值1，将属性2的属性值设置为属性值2，…。参数key,value，String,Object类型，key是需要设置的属性的名称，value该属性的属性值，表示将 key 属性的属性值设置为 value。key,function(index, attr) String,Function类型，key属性名称，function(index, attr)第一个参数为当前元素的索引值，第二个参数为原先的属性值，如果有返回值，将key属性的属性值设置为这个返回值，如果没有返回值，获取key属性的属性值。 通常会设置返回值，来为不同的对象设置不同的属性值。// 取值，如果是多个对象，那么只取第一个对象的src属性值 var src = $("img").attr("src"); // 赋值1，如果是多个对象，那么所有的对象属性值都会修改 $("img").attr({"src":"../../imgs/3.jpg",alt:"无法连接"});// 传递的其实就是一个对象 // 赋值2，如果是多个对象，那么所有的对象属性值都会修改 $("img").attr("src","../../imgs/3.jpg"); // 赋值3 $("img").attr("src",function() { return "../../imgs/3.jpg"; });prop()方法使用方式和 attr() 方法是一样的，但是！prop() 和 attr() 操作的元素不同，prop() 操作的是表单相关的标签，而其他常规标签使用 attr()。只要记住这句话，99%的情况都是没问题的，官方给的解释太麻烦了。 篮球 足球 排球 游戏// 获取标签是否被选中，如果是多个对象，只判断第一个对象 // 如果没有被选中的标签，返回false // 如果有被选中的标签，返回true var temp = $('input[type="checkbox"]').prop("checked"); // 如果有多个对象，将所有复选框对象选中(全选操作) $("input[type='checkbox']").prop("checked","true");对于表单标签来说，我们往往需要获取表单标签的 value 属性值，在JavaScript的DOM操作中，我们使用 元素对象.value 的方法获取和设置表单标签的 value 属性，而在jQuery中，我们使用 val() 方法来获取和设置 value 属性。 方法声明： val([val|fn|arr]) 功能说明： 获得匹配元素的当前值。如果多选，将返回一个数组，其包含所选的值。 参数说明： 无参，获取value值，如果是多个对象，只获取第一个对象的value属性值。val，String类型，将对象的 value 属性设置为 val。function(index, value)，Function类型，此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，value为原先的value值。arr，字符串数组。val() 方法的用法和 html() 方法以及 text() 方法差不多，不过 val() 方法多了一个参数的用法——字符串数组 注意的点： 通过 val() 处理 select 元素， 当没有选择项被选中，它返回 null如果select元素有 multiple（多选）属性，并且至少一个选择项被选中，val()方法返回一个数组，这个数组包含每个选中选择项的值方法声明： addClass(class|fn) 功能说明： 为每个匹配的元素添加指定的类名。 参数说明： class，要添加到元素上的类名，如果是多个类名，需要用空格隔开function(index, class)，此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。删除常规标签的属性：removeAttr(name) name是需要删除的属性名 删除表单标签的属性：removeProp(name) name是需要删除的属性名 删除class属性：removeClass([class|fn]) class是需要删除的类名，多个类名空格隔开，function(index, class)，此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。 小结html()、text()、val()的区别 html() text() val() 作用 获取元素的html内容(包括html标签) 获取元素的纯文本内容 获取value属性值 作用范围 不能作用于表单标签上 不能作用于表单标签上 只能作用于表单标签上 使用在多个元素上(无参) 只返回第一个元素的html内容 返回所有元素的文本内容的组合 只返回第一个元素的value值 方法的使用情况 如果想要获取或设置除表单标签外的常规元素的HTML内容，使用html()如果想要获取或设置除表单标签外的常规元素的纯文本内容，使用text()如果想要获取或设置除表单标签外的常规元素的属性，使用attr()如果想要获取或设置表单元素的属性，使用prop()如果想要获取或设置表单元素的value属性，使用val()3. 对CSS样式操作的方法样式设置在DOM操作中，有对CSS样式操作的属性，对象.style.样式名，在jQuery中有对应的对CSS样式操作的方法 css() 方法声明： css(name|pro|[,val|fn]) 功能说明： 访问匹配元素的样式属性 参数说明： 参数可以是name、properties、name，val、name,function(index, value) 参数name，表示获取对象的属性名为name的属性值(name还可以是一个或者多个CSS属性组成的数组)参数properties是{属性1:属性值1,属性2:属性值2,…}的形式(就是个对象)，表示将属性1的属性值设置为属性值1，将属性2的属性值设置为属性值2，…参数 name,value，表示将name属性的值设置为value参数name,function(index, value)，根据函数返回值设置name属性// 获取img标签的CSS宽度属性值，如果是多个对象，只获取第一个 var img_width = $("img").css("width"); // 将img标签的CSS宽度属性值设置为300px，如果是多个对象，所有对象都会别设置 $("img").css("width","300px"); // 将img标签的CSS宽度属性值设置为500px，高度设置为300px // 如果是多个对象，所有对象都会别设置 $("img").css({ width:"500px", height:"300px" })滚动条scrollTop([val])，垂直滚动条 scrollLeft([val])，水平滚动条 无参表示获取相对位移量，有参表示设置相对位移量 4. jQuery对象的操作在学习前面html()等方法的时候，如果是多个对象，使用html()只会返回第一个对象的 html 内容，但我们常常需要获取所有对象的 html 内容，因此需要遍历这些对象，这时候就使用到了each()方法 方法声明： each(callback) 参数说明： callback 是对于每个匹配的元素所要执行的函数。 // 第一个变量是下标，第二个对象是标签的DOM对象 $("select").each(function(index, element) { // console.log(element.innerHTML); console.log($(element).html()); });还有另外一种写法$.each(数组,function(index,element) {})，其中function第一个参数index是数组中的下标，element是数组中对应下标的元素 $.each($("select"),function(index, element) { console.log($(element).html()); });size() 和 length都可以获取jQuery对象中元素的个数，不同的是一个是方法，一个是属性 // jQuery对象的数组 var var1 = $("input[type='checkbox']") // 获得的是DOM对象 var1[0].setAttribute("checked",true) var1.get(1).setAttribute("checked",true) // 获得的是jQuery对象 var1.eq(2).attr("checked",true)使用 get() 方法和使用 [ index ] 获得的都是DOM对象，而使用 eq() 方法获得的才是jQuery对象 5. 效果方法声明： hide([speed,[easing],[fn]]) 参数说明： 无参，立即隐藏，注意：如果是多个对象，所有对象都会隐藏！speed：“slow”、“normal”、 “fast” 或表示动画时长的毫秒数值(如：1000) speed,fn：fn:在动画完成时执行的函数，每个元素执行一次。 [speed],[easing],[fn]：easing:用来指定切换效果，默认是"swing"，可用参数"linear"// 无参形式 $("img").hide(); // 使用speed参数形式 // 以400ms的速度隐藏所有的img标签 $("img").hide(400); // 两个参数 // 在隐藏完img标签后，执行第二个参数的方法 $("img").hide(400, function() { console.log("11"); });显示隐藏的元素使用的是 show() 方法，不论元素是通过 hide() 方法隐藏的还是使用 CSS属性 display: none; 隐藏的，使用 show() 方法都会显示出来。 show() 方法的使用和 hide() 方法相同。 toggle()方法使用和show()、hide()方法相同。 toggle()方法的作用是如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 // 200ms 普通切换 $("img").toggle(200);除了 hide() 和 show() 这两个方法之外，还有 slideUp() (向上隐藏)和 slideDown() (向下显示)的方法来实现隐藏和显示元素，用法和 hide() 和 show() 相同。 slideToggle()方法则是可以使匹配的元素以“滑动”的方式隐藏或显示。 // 400ms向上隐藏 $("img").slideUp(400); // 400ms向下显示 $("img").slideDown(400); // 2秒滑动切换 $("img").slideToggle(2000);fadeOut() 和 fadeIn() 的用法也是和 hide()、show() 方法相同 fadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果 // 4秒淡出 $("img").fadeOut(4000); // 1秒淡入 $("img").fadeIn(1000); // 2秒淡化切换 $("img").fadeToggle(2000);除了上面三种方法之外，还有一种 fadeTo() 方法 方法声明： fadeTo([[speed],opacity,[easing],[fn]]) 参数说明： 两个参数 speed,opacity，比较常用的形式，表示用 speed 的速度将元素淡化至 opacity 透明度方法声明： animate(params,[speed],[easing],[fn]) 功能说明： 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）(注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left)。而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。 参数说明： 比较常用的就是 params和speed 这两个参数的形式。params:一组包含作为动画属性和终值的样式属性和及其值的集合// 用5秒钟将img标签的宽高变为1000px $("img").animate({ width:"1000px", height: "1000px" },5000); // 移动img标签 $("img").css("position","relative"); $("img").animate({ top:"100px", left:"100px" },1000);6. 事件处理在JavaScript中，添加事件使用 元素节点.事件=方法用标签上的事件属性添加事件 事件="js代码" 事件监听addEventListener(事件名，方法)jQuery中有一套针对事件处理的方法。 事件名 方法名 点击事件 click(fn) 双击事件 dblclick(fn) 获得焦点 focus(fn)、focusin(fn) 失去焦点 blur(fn)、focusout(fn) 改变事件 change(fn) 选中事件 select(fn) 提交事件 submit(fn) 键盘事件 keydown(fn)、keyup(fn)、keypress(fn) 鼠标事件 mousedown(fn)、mouseup(fn)、mouseenter(fn)、mouseleave(fn)、 mousemove(fn)、mouseout(fn)、mouseover(fn) 传参数是事件绑定，不传参数是事件触发focusin() 和 focus() 的区别是 focusin() 可以在父元素上检测子元素获取焦点的情况，focusout() 和 blur() 同理change() 当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。键盘事件 keydown：当键盘或按钮被按下时，发生 keydown 事件。 keyup：当键盘或者按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。 keypress：当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。鼠标事件 mousedown：鼠标按下，和click的区别在于不需要松开，按下鼠标时就触发了mousedown事件 mouseup：松开鼠标按钮时，会发生 mouseup 事件。 mouseenter：只有鼠标穿过被选元素时，才会发生 mouseenter事件，离开其子元素不会触发。该事件大多数时候会与mouseleave 事件一起使用。 mouseleave：只有鼠标离开被选元素时，才会发生 mouseleave 事件，离开其子元素不会触发。该事件大多数时候会与mouseenter 事件一起使用。 mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 mouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 mousemove：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。功能说明： 当DOM载入就绪之后，执行ready()方法参数中传递的方法。 // 标准写法 $(document).ready(function() { $("#outer").focus(function(){ alert(123); }); }) // 简写 $(function() { $("#outer").focusin(function(){ alert(234); }); })使用 on() 和 off() 来完成事件绑定和解除 $("p").on("click", function(){ alert( $(this).text() ); }); $("p").off( "click", "**" );7. AJAX关于 ajax 部分，这里先简单介绍几个方法。 序列化，这个方法是干什么用的呢，先来看一段示例 Results: Single1 Single2 Multiple1 Multiple2 Multiple3 check1 check2 radio1 radio2 测试网页预览：
点击测试按钮之后，p 标签的内容变成下图所示内容，说明 serialize() 这个方法是获取了所有被选中的表单项的值， 表单标签的name=被选中的表单标签的value
序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。 var val = $("form").serializeArray(); console.log(val);
可以看到serializeArray()方法获取的是一个对象数组，想对这个对象数组进行操作的话，会用到前面学过的each方法 var val = $("form").serializeArray(); console.log(val); $.each(val,function(index, element) { $("#results").append(element.value+" ") });param() 方法是按照key/value对序列化普通对象。 var p = {name:"youka",age:"19"} var v = $.param(p); console.log(v)
|
【本文地址】