JavaScript问题与总结

梦里梦外; 2022-06-04 05:06 229阅读 0赞

## 写在前面： ##

最近课程大作业需要用到前端的语言去编写一个基于网页的电路连线软件。  
在做这个大作业的过程中会用到很多的前端知识，无论是JavaScript，css，HTML还是到各种热门的前端库都基本上从零学起。不过好在这些东西都不是特别难理解和运用。在这里就将接触到的知识做一个总结。  
createElementNS这个函数具体用法如下所述：  
![这里写图片描述][SouthEast]  
使用具体的命名空间URL创建一个元素和合法的名字。  
![这里写图片描述][SouthEast 1]  
第一个参数就是对应具体命名空间URL的字符串，合法形式如下：  
![这里写图片描述][SouthEast 2]  
**qualifiedName**  
**A string that specifies the type of element to be created. The** **nodeName property of the created element is initialized with the value of qualifiedName.**  
第二个参数是创建的元素具体的类型，创建的元素对应的节点名字的属性是由这个名字对应的初始化的。  
返回值是当前新建的元素。

## 下面是第一段代码的理解： ##

## jQuery: ##

通过jQuery，可以选取（查询，query）HTML元素，并对它们执行”操作”（actions）。jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程。jQuery很容易学习。

**jQuery 语法:** 
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 
基础语法： $(selector).action() 
美元符号定义 jQuery 
选择符（selector）”查询”和”查找” HTML 元素 
jQuery 的 action() 执行对元素的操作 
实例: 
$(this).hide() - 隐藏当前元素 
$(“p”).hide() - 隐藏所有 元素 
$(“p.test”).hide() - 隐藏所有 class=”test” 的 元素 
$(“\#test”).hide() - 隐藏所有 id=”test” 的元素

![这里写图片描述][SouthEast 3]  
以上两种方式等价，显然后者更加简洁。

// jQuery不支持直接创建svg图形，定义一个函数来创建svg图像对应的jQuery对象。
    var ns = 'http://www.w3.org/2000/svg';
    var $s = function (str) {
        
      return $(document.createElementNS(ns, str));
    }

**第一个关键点：**  
$本身只是一个标识符，可以是任何变量。  
这里$大多数是jQuery对象，而jQuery是一个javascript框架。  
$.bind()方便，还是jQuery.bind()方便呢？当然前者方便。

//一般来说$()是为了简短输入而设定的符号。
    //在JQ和Prototype里
    $('#id') 等于 document.getElementById('id')；
    //由于页面大量用到getElementById,写起来很麻烦,所以聪明的人们把它简化了
    function $(id){
        
    return 
    getElementById("id");//返回ID名为"ID"的对象
    }

下面是append.js 的内容 ：实现的功能是**调用 appendComponent 在特定位置画出对应元器件**

/* schComponents 结构体示例如下
 let schComponents = {
 'vcc': [
 { mark: 'line', attr: { x1: -10, y1: -10, x2: 10, y2: -10, }, },
 { mark: 'line', attr: { x1: 0, y1: -10, x2: 0, y2: 0, }, },
 ],
 'gnd': [
 { mark: 'line', attr: { x1: 0, y1: 0, x2: 0, y2: 10, }, },
 { mark: 'line', attr: { x1: -15, y1: 10, x2: 15, y2: 10, }, },
 { mark: 'line', attr: { x1: -10, y1: 15, x2: 10, y2: 15, }, },
 { mark: 'line', attr: { x1: -5, y1: 20, x2: 5, y2: 20, }, },
 ],
 };
 */
 
 let schComponents = {};
 
 jQuery.prototype.appendComponent = function (componentName) {
 let createObj = function (objAttr) {
 //这里的objAttr对应上面结构体的'vcc'这样的器件元素数组
 let obj = $s(objAttr.mark);//创建一个对应mark的元素 
 for (let attrId in objAttr.attr) {
 obj.attr(attrId, objAttr.attr[attrId]);
 }
 obj.attr('stroke', '#A00000').attr('stroke-width', '2');
 return obj;
 }//将对应的属性完全赋值给新建的元素
 
 svgGroup = $s('g');//在document上创建svg元素
 for (let i = 0; i < schComponents[componentName].length; ++i) {
 svgGroup.append(createObj(schComponents[componentName][i]));
 }//将所有的结构体内的元素添加到svg块里
 return this.append(svgGroup);最后再将svg块加到当前jQuery对象上
 }

## 核心 > jQuery.fn.extend(object)： ##

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

下面是props.js的代码：

$.fn.extend({
      getProps: function (key) {
        
        key += 'Properties';
        return this.data(key) || this.data(key, {}).data(key);
      },
      setProps: function (key, data) {
        
        key += 'Properties';
        return this.data(key, $.extend({}, this.data(key) || {}, data));
      },
    });

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

**jQuery.fn.extend(object);给jQuery对象添加方法**。  
fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {      
    　　　init: function( selector, context ) {
        //….　   
    
    　　　//……   
    
    };

原来 jQuery.fn = jQuery.prototype.  
jQuery便是一个封装得非常好的类，比如我们用 语句　$(“\#btn1″) 会生成一个 jQuery类的实例。  
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。  
**$(selector).data(name) 方法向被选元素附加数据，或者从被选元素获取数据。**  
**$(selector).data(name,value) 向被选元素附加数据。**  
name 必需。规定要设置的数据的名称。  
value 必需。规定要设置的数据的值。  
**$(selector).data(object) 使用带有名称/值对的对象向被选元素添加数据。**

**jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。**

$.extend( target [, object1 ] [, objectN ] )

1.  如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2.  如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

![这里写图片描述][SouthEast 4]

jQuery DOM 操作  
jQuery 中非常重要的部分，就是**操作 DOM 的能力**。  
jQuery 提供一系列与 DOM 相关的方法，这使**访问和操作元素和属性变得很容易**。  
DOM = **Document Object Model（文档对象模型）**  
DOM 定义访问 HTML 和 XML 文档的标准：  
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

jQuery attr() 方法用于获取属性值。  
text() - 设置或返回所选元素的文本内容  
html() - 设置或返回所选元素的内容（包括 HTML 标记）  
val() - 设置或返回表单字段的值  
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

添加新的 HTML 内容  
用于添加新内容的四个 jQuery 方法：  
append() - 在被选元素的结尾插入内容  
prepend() - 在被选元素的开头插入内容  
after() - 在被选元素之后插入内容  
before() - 在被选元素之前插入内容

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

function appendText(){
 
 var txt1="文本。"; // 使用 HTML 标签创建文本
 var txt2=$("").text("文本。"); // 使用 jQuery 创建文本
 var txt3=document.createElement("p");
 txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
 $("body").append(txt1,txt2,txt3); // 追加新元素
 }

**append/prepend 是在选择元素内部嵌入。**  
**after/before 是在元素外面追加。**

如需删除元素和内容，一般可使用以下两个 jQuery 方法：  
**remove() - 删除被选元素（及其子元素）**  
**empty() - 从被选元素中删除子元素**

**jQuery 操作 CSS**  
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：  
addClass() - 向被选元素添加一个或多个类  
removeClass() - 从被选元素删除一个或多个类  
toggleClass() - 对被选元素进行添加/删除类的切换操作  
css() - 设置或返回样式属性

**jQuery 提供多个处理尺寸的重要方法：** 
width() 
height() 
innerWidth() 
innerHeight() 
outerWidth() 
outerHeight() 
![这里写图片描述][SouthEast 5] 
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。 
下面的例子返回指定的 < div> 元素的宽度和高度：

$(function(){
 
 $("button").click(function(){
 
 var txt="";
 txt+="div 的宽度是: " + $("#div1").width() + "";
 txt+="div 的高度是: " + $("#div1").height();
 $("#div1").html(txt);
 });
 });

innerWidth() 方法返回元素的宽度（包括内边距）。  
innerHeight() 方法返回元素的高度（包括内边距）。  
outerWidth() 方法返回元素的宽度（包括内边距和边框）。  
outerHeight() 方法返回元素的高度（包括内边距和边框）。

## CSS3 transform 属性 ##

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。  
object.style.transform=”rotate(7deg)”  
transform: none|transform-functions;  
这个属性的具体用法参见：[http://www.runoob.com/cssref/css3-pr-transform.html][http_www.runoob.com_cssref_css3-pr-transform.html]  
以下只是简要的记录所用到的一些：  
**translate(x,y) 定义 2D 转换。**  
**rotate(angle) 定义 2D 旋转，在参数中规定角度。**  
transform:translate(0px,0px) 移动到对应的位置。

undefined 属性用于存放 JavaScript 中未定义的值。  
$(selector).remove()  
remove() 方法移除被选元素，包括所有的文本和子节点。  
该方法也会移除被选元素的数据和事件。  
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。  
提示：如只需从被选元素移除内容，请使用 empty() 方法。

[SouthEast]: /images/20220604/ab2b49bc1f394a2ab91b7a550ee9d6a4.png
[SouthEast 1]: /images/20220604/fca7da8b35ee40be8ecc431bcd229eba.png
[SouthEast 2]: /images/20220604/e2d5697bcb1e4da1acbef6eae8656142.png
[SouthEast 3]: /images/20220604/7abe1426a0f045a8ace5f6e0804e162d.png
[SouthEast 4]: /images/20220604/9e8218dc76554f0da1a80c0ea64c65cf.png
[SouthEast 5]: /images/20220604/f2ec086741a54b11a1fcc1db5e1d4d49.png
[http_www.runoob.com_cssref_css3-pr-transform.html]: http://www.runoob.com/cssref/css3-pr-transform.html