jQuery其二

Posted 2021-02-18 caoyu080202201

一、类相关操作

　　1、jQ_obj.addClass(‘c1‘)：添加类c1。

　　2、jQ_obj.removeClass(‘c1‘)：移除类c1。

　　3、jQ_obj.hasClass(‘c1‘)：是否已经继承了类c1。

　　4、jQ_obj.toggleClss(‘c1‘)：切换对类c1的继承/不继承。

二、CSS相关操作

　　1、链式操作：有些jQ_obj的方法调用后返回的还是这个jQ_obj，所以可以在调用表达式的后面继续调用其他方法，以此实现了一行代码调用多个方法，这就是链式操作。如，jQ_obj.first().css(‘color‘, ‘red‘).last().css(‘color‘, ‘blue‘)。

　　2、括号内不加参数就是获取当前值，加上参数就是设置值为此参数。

　　3、位置相关：

　　　　①jQ_obj.offset()：标签相对于浏览器窗口的位置(上外边距和左外边距)。

　　　　②jQ_obj.position()：标签相对于父标签的位置(上外边距和左外边距)。

　　　　③jQ_obj.scrollTop()：标签相对于页面顶部的距离。多用---$(window).scrollTop()，来监测窗口的垂直位置。

　　　　④jQ_obj.scrollLeft()：标签相对于页面左边的距离。

　　4、尺寸相关：

　　　　①jQ_obj.height()：文本的高度。

　　　　②jQ_obj.width()：文本的长度。

　　　　③jQ_obj.innerHeight()：文本的高度+上下内边距。

　　　　④jQ_obj.innerWidth()：文本的宽度+左边内边距。

　　　　⑤jQ_obj.outerHeight()：文本的高度+上边内边距+边框上下线宽。

　　　　⑥jQ_obj.outerWidth()：文本的宽度+左右内边距+边框左右线宽。

　　5、文本相关：

　　　　①jQ_obj.text()：纯文本内容。

　　　　②jQ_obj.html()：含有html语法格式的内容。

　　6、值相关：

　　　　①jQ_obj.val()：即标签对象的.value。

　　　　②input标签的file模式：要获取文件数据，jQ_obj暂时没有对应的方法，所以需要还原为标签对象再进行操作---file_jQ_obj[0].files[0]---文件数据。

　　7、属性相关：

　　　　①jQ_obj.attr(‘name‘, ‘tom‘)：设置指定属性为指定值，属性可以是内置的，也可以是自定义的。

　　　　②jQ_obj.attr(‘name‘)：获取指定属性的当前值。

　　　　③jQ_obj.removrAttr(‘name‘)：移除指定属性。

　　8、jQuery对象的推荐的命名风格：$xxxEle。

　　9、选取相关：

　　　　①jQ_obj.prop(‘checked‘)：用于input标签的radio模式和checkbox模式，是否已勾选。

　　　　②jQ_obj.prop(‘selected‘)：用于select标签下的option标签，是否已拉选。

　　10、标签的创建与置位：

　　　　①let $divEle = $(‘<div>‘)：创建标签。

　　　　②$dadEle.append($divEle)：放于某标签内部的末端位置。

　　　　③$divEle.appendTo($dadEle)：上述表达式的反向操作，效果同上。

　　　　④$dadEle.prepend($divEle)：放于某标签内部的开头位置。

　　　　⑤$divEle.prependTo($dadEle)：效果同上。

　　　　⑥$brotherEle.after($divEle)：放于某标签同级后一个位置。

　　　　⑦$divEle.insertAfter($brotherEle)：效果同上。

　　　　⑧$brotherEle.before($divEle)：放于某标签同级前一个位置。

　　　　⑨$divEle.insertBefore($brotherEle)：效果同上。

　　　　⑩$divEle.remove()：清除该jQ_obj对应的标签及内部所有嵌套。

　　　　①①$divEle.empty()：清除该jQ_obj对应的标签内部所有嵌套及文本。