jQuery库应用与实践

旧城等待， 2022-07-13 10:25 144阅读 0赞

*更新时间：2017年11月28日23:37:35*

[《我的博客地图》][Link 1]

JavaScript开发语言用途广且轻量，但在网页开发过程中，原生JavaScript的DOM操作代码冗余且费时费力，因此，大部分的开发任务还是交给了JQuery库来完成。

1.DOM对象和JQuery对象

概念：

DOM对象：通过原生JavaScript获取到的对象：document.getElementById('div');

jQuery对象：通过jQuery语法获取到的对象：$('\#div');

常识：

jQuery对象无法使用DOM对象的属性和方法 || DOM对象无法使用jQuery对象的属性和方法

变量命名规范：

DOM对象和jQuery对象的命名规则：

var div = document.getElementById('div'); || var $div = $('\#div');

2、常见DOM元素对象的属性和方法：

元素的滚动条位置：

document.body.scrollLeft || document.body.scrollTop;//页面滚动条的scrollLeft || scrollTop属性

document.getElementById('div').scrollLeft;//出现滚动条元素的scrollLeft || scrollTop属性

video元素和audio元素方法：document.getElementById('video').pause || start

document.getElementById('div').tagName;

3、jQuery对象和DOM对象互相转换

jQuery对象 => DOM对象:

每个jQuery对象也被当成一个数组，所以可以直接用数组的取值运算符来获得列表项的DOM对象：

var div = $('\#div')\[0\]; || var div = $('\#div').eq(1)\[0\];

然而，这种语法缺少某些 .get() 所具有的附加功能，比如可以指定索引值为负值：  
 $('\#div').get(-1);//负的索引值,表示从匹配的集合中从末尾开始倒数

jQuery对象自身方法：var div = $('\#div').get(0);

DOM对象 => jQuery对象:

var $div = $('\#div'); || var $div = $(document.getElementById('div'));

4、jQuery库的常用方法

get(index);//通过jQuery对象获取一个对应的DOM元素。

event.stopPropagation();//阻止事件冒泡，也就是不触发该元素任何祖先元素上的事件处理函数。

event.preventDefault();//阻止事件触发，默认事件行为将不再触发。

$.fn.extend();//一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

$.fn.extend(\{  
  check: function() \{  
    return this.each(function() \{ this.checked = true; \});  
  \},  
  uncheck: function() \{  
    return this.each(function() \{ this.checked = false; \});  
  \}  
\});

$.fn.checker = function (param) \{\};//向jQuery的原型添加新的方法  
$.extend(defaults, param1, param2, param3...);//对象 方法和属性 合并，返回一个新对象

typeof $(this).attr('checked') === "undefined";//检测元素是否具有某个属性 true=>没有这个属性  
$(this).attr('checked','checked');//设置元素属性  
$(this).removeAttr('checked');//删除元素属性  
$(this).trigger('click');//添加自动处理事件 自动单机事件  
$(this).toggleClass('checked');//添加 || 删除 类

5、事件注册

子元素和父元素同时注册事件，阻止子元素事件冒泡到父元素的方法：

$('\#parent').on('click',function()\{\})

$('\#child').on('click',function()\{

event.stopPropagation() || return false

\})

页面加载完成后，动态添加元素，向动态添加的元素绑定事件：

假如动态生成，class名为dynamic的元素：

live事件，但是在jQuery1.9版本之后已经废止

$(document).on('click','.dynamic',function()\}\{)

事件绑定的高级用法：

动态添加的元素绑定事件的方法，前提\#parent必须静态存在

$('\#parent').on('click','.dynamic',function()\{\})

6、封装jQuery插件

返回页面最大高度的div元素：

(function ($) \{

$.fn.maxHeight = function () \{  
        var max = 0;  
        this.each(function () \{  
            max = Math.max(max, $(this).height());  
        \});  
        return max;  
    \};  
\})(jQuery);  
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

6、在匹配元素上存储任意相关数据

.data()在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值；

.data() 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

$("body").data("foo", 52);  
$("body").data("bar", \{ myType: "test", count: 40 \});  
$("body").data(\{ baz: \[ 1, 2, 3 \] \});

$("body").data("foo"); // 52  
$("body").data(); // \{ foo: 52, bar: \{ myType: "test", count: 40 \}, baz: \[ 1, 2, 3 \] \}

未完，待续。。。

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440