jquery原理与ajax基础系列（三）之属性操作

      内容选择器

               运行环境：ubuntu+atom+jquery。尝试几次皆不能准确的显示，后将选择器的内容分开来写,问题得到解决。然后再将分开来写的选择器再次合起来写，依旧可以运行。期间，还有打开关闭浏览器/去除缓存/换一个新的浏览器等等操作，但都没能解决问题，不知道何故？

       选择器分开来书写与合并起来书写：

//合起来写的：
  console.log($("div:empty"));

//分开来写的
$div=$("div:empty");
console.log($div);

      

       新增的四种内容选择器：

    $(function() {
                  console.log($("div:empty"))
                  console.log($("div:parent"))
                  //格式形如$("div:contains(里面的内容不需要带“”，否则报错)")。与视
//频不同，视频中contains后选中的内容要求带“”
                  console.log($("div:contains(div啊)"))
//has（selector），selector依旧不需要带“”
                  console.log($("div:has(span)"))
            })

 

------------------------------------

**属性和属性节点

视频中的属性指的是方法函数中的属性，属性节点指的是html中DOM节点的某一个属性.

 

**关于属性节点在浏览器的查找/直观现实:

F12-->   source  -->在当前的source标签页中，右下角（本环境）有2个选项卡：Scope Watch 。 默认Scope   --> 选择Watch            --> 选择“+”，输入“document.getElementsByTagname("span")”,可显示出来相关的"span"标签的属性，本操作可以保存。即当浏览器关闭重启后，打开另外一个网页，也会在相应的位置显示“span”出来（本浏览器下如是）。    -->    将注意点移到“span”，找到“attributes”这个属性。哪里就是你需要的“属性节点”。【没事多看看相关选项卡的属性以及具体的内容，大有益处！】

 

**setAttribute && getAttribute(此为原生js自带的)：

DOM节点.setAttribute("属性节点的名称","值")

DOM节点.getAttribute("属性节点的名称")

-------------------

上面2点是知识的背景，下面开始切入正题（文章标题：属性操作）

one.

// $("span")[0]这种写法居然是不承认的，不可思议！！？
// 问题来了，$("span")[0]与 $("span").eq(0)什么时候可以等价交换？
// $('.a’).eq(0) ,选择了所有的class为a的jq对象（可以用jq属性和方法）
// $('.a’)[0],选择了第一个a，是jq对象（不可以使用dom属性方法(属性节点)，
// 可以用jq的属性、方法）
console.log($("span")[0].attr("class"));

// 得写成这种格式？！！但是要注意，它只能表示第一个？！
console.log($("span").attr("class"));
console.log($("span").eq(0).attr("class"));
// 如果你要表示的是非第一个，那么你只能这么做：
console.log($("span").eq(1).attr("class"));

//复习一下：所有的函数都自身携带有隐藏的变量arguments的，通常用
// arguments.length来确定的参数的个数。因此，可以断定，jquery源码中，
// 也是通过arguments.length来确定参数是一个还是二个的，从而将.attr()进行
// 不同的划分区别，达到适合的想要的目的：单个参数表示取值，2个参数表示设置。
// 当参数是2个的时候，第一个参数表示的属性节点若是已经存在的，则表示修改原有的值；
// 第一个参数表示的属性节点若是不能存在的，则表示增加这个属性节点的值。比如：
console.log($("span:eq(0)").attr("name","sg"));
console.log($("span").eq(0).attr("class","nicai~nicai~"));

// 上面的是正常的应该提倡的写法，还有不提倡的但是你应该懂得的写法：
// 当不带.eq(0)或者:eq(0)的时候，表示设置的是全部的而不是某一个单个的：
console.log($("span").attr("age","18"));

// removeAttr表示的移除相关的属性节点的意思
console.log($("span").removeAttr("class"));
console.log($("span:eq(0)").removeAttr("age"));


// prop与attr十分的类似：
// 最大的区别就是prop是对原生的HTML中的DOM属性节点进行操作，对于通过其他的方法
// 比如JS新增加的DOM属性节点.attr("age","19")中新增的“age”不起作用，
// 即不可以再通过prop("age")获取19,返回的是undefined
// 也不可用通过prop("age","28")重新设置年龄28，不报错，但是不起作用，
// 也不可以通过removeProp()删除掉这个属性节点。不报错，但是不起作用。

console.log($("span").prop("age"));

// 区别于attr,prop可以修改已经存在的DOM属性节点，但不能创造任意的属性节点
//不起作用：
$("span").prop("speed","femal");
//class为已经存在的DOM节点属性，起作用：
$("span").prop("class","femal");

//在浏览器F12(开发者模式）elemets中直接现实class="undefined",另外一种形式的“删除”
$("span").removeProp("class");

two.

1.innerHTML是唯一的一个不多见的非驼峰写法。

2.要使用原生的js就要使用到底，不要一半原生的一半jquery。比如推荐:

document.getElementsByTagName('div')[0].innerHTML="原汁原味！推荐使用"

而不推荐：

$("div")[0].innerHTML="一半jquery，一半原生js：选择器用的是jquery,.innerHTML用的是原生js";

$(function(){
// 第一次做的时候不知道发什么神经病，给input设置innerHTML，醉了醉了！
//设置html
$("button")[0].onclick=function(){
// innerHTML算元素节点的属性，因此在进行选择器的选择的时候不能使用[]，可以使用
// .eq()或者默认的方式(什么都不带)
$("div").html("这里是<p>jquery</p>的<span>.html('xxx')用法啊</span>")

// 选择器是个数组的时候，尤其是操作innerHTML时，是个大问题！不可以用:eq()，却可以用[]。
//因此建议 你在用原生的js涉及到选择器数组的时候，要么统一用原生的要么统一jquery。
// 下面的是正确的，但不推荐使用 ，含混不清：
$("div")[0].innerHTML="JS";
// 完整版原生js。注意大小写innerHTML。注意使用的是="原汁原味！推荐使用"
//而非.innerHTML("原汁原味！推荐使用")
document.getElementsByTagName('div')[0].innerHTML="原汁原味！推荐使用"
}

// 获取的时候出现了HTML标签？？！网上扒小说的一种方式，扒下来的小说带有H5标签，
// 显然是需要经过正则表达式等手段进行再处理！
$("button")[1].onclick=function(){
console.log($("div").html())
// $("div")[0].innerHTML
console.log($("div")[0].innerHTML)
}


$("button")[2].onclick=function(){
$("div").text("<p>怎么出现了p标签啊？因为用的是text()非html()</p>")

// 原生的js这点做的不好，有点神经错乱的意思。innerHTML是罕见的非驼峰形式，到这里，
// innerText又变成了一般规则的正常的写法了。牢记这一点。 
$("div")[0].innerText="<p>怎么出现了p标签啊？因为用的是text()非html()</p>"
}

$("button")[3].onclick=function(){
console.log($("div").text())
}


$("button")[4].onclick=function(){
// $("input").val("<p>弄个标签看看什么效果</p>")
$("input")[0].value="<p>弄个标签看看什么效果</p>"
}

$("button")[5].onclick=function(){
console.log($("input").val())
}
})

three.

如果已经通过Style设置了css ,不推荐再用jquery的".css({})进行修改！

// 获取看看？$("div").css(),css()里面还是要带点东西的，否则在jquery源码里报错
console.log($("div").css())// 错误
console.log($("div").css("background-color"))// 正确

// 三种表达方式之第一种也是最基本的一种:
$("div").css("width","300px")
// 第二种，链式表达式，不建议太长，长度建议三个：
$("div").css("height","250px").css("padding","15px").css("font-size","30px").css("background-color","pink")

// 第三种，问题多多！最标准的写法{"":""}，不要尝试把“”丢掉。
// 如果已经通过Style设置了css 不推荐再这么使用！问题多多。！
$("div").css({
 "width":"500px",
 "height":"100px",
 "background-color":"red",
 background-color:"red"
 border:"10px"
 })

在原生的js中获取css属性是这么获取的：

function getStyle(dom, attr) {
      if (window.getComputedStyle) {
// 这里要使用[]，【attr】=【"attr"】但是.attr !=  ."attr"
            return window.getComputedStyle(dom)[attr];
      } else {
             return dom.currentStyle[attr];
      }
}

four.

简单的说：offset/position只offset的设置管用，其他的不管用。【可能是由于版本的问题？！】

 $(".son").width("120px");
// width/height:元素本身的宽度高度
// innerWidth/innerHeight:元素本身的宽度高度+padding
// outerWidth/outerHeight：元素本身的宽度高度+padding+border


console.log($(".son").width()) //56  :100-2*2-20*2
console.log($(".son").innerWidth())// //96  :100-2*2
console.log($(".son").outerWidth())//100:border-box

console.log($(".father").width()) // 200:content-box
console.log($(".father").innerWidth()) // 230:200(contentbox)+15*2(pading*2)
console.log($(".father").outerWidth()) //330:200+15*2+50*2(padding*2)

// 复习下原生的js中的offsetLeft/offsetTop
//offsetLeft  vs .style.left :offsetLeft相对于css来说，.style.left是老古董的行间样式
//offsetLeft一般用于取值（不可赋值），所以为了取值的方便，不带单位"px"，.style.left可用于
// 赋值/取值，因为需要赋值，自然要带有单位“px”：
 console.log($(".son")[0].offsetLeft)
// offsetWidth指的是整个元素空间的width，包括元素本身+padding+border（动动脑子想想也能
//知道原因）
console.log($(".father")[0].offsetWidth)
//行间样式
$(".son")[0].style.left="100px"
console.log($(".son")[0].style.left)
// console.log(document.getElementsByClassName("son")[0].offsetLeft)

//offset进行设置操作：
$(".son").offset({
left:200,
top:300
})

//简单的说：offset/position只offset的设置管用，其他的不管用。【可能是由于版本的问题？！】
// 多次尝试，且是使用不同的方式进行尝试，给出的结果是undefined.
$div=$("div:eq(0)")
console.log($div.offset.left) //undefined
console.log($(".son").offset.top) //undefined
// console.log(document.getElementsByClassName("father")[0].offset)

//报错：".left"不存在。
console.log($div.positon.left)

//bug: .position 不是个 function
$(".son").positon({
  left:30,
  top:20
 })

five.

原生js参考：

https://www.cnblogs.com/minigrasshopper/p/8011942.html

原生js中的scrollTop是直接“=”设置的。

$("button")[0].onclick=function(){
console.log($("div").scrollTop());
//chrome/firefox/..
console.log($("html").scrollTop());
//ie浏览器下：
console.log($("body").scrollTop());

// 两种兼容方式（其实最经典的if-else方式判断有无这个变量没有出现）：
console.log($("body").scrollTop()+$("html").scrollTop());
console.log($("body,html").scrollTop());
}

$("button")[1].onclick=function(){
// .scrollTop("300px")是错误的。
//$("div").scrollTop("300px")
$("div").scrollTop(300)
$("html").scrollTop(300)
}

six

.addClass()   removeClass()   toggleClass() .感觉还是原生的js修改简单。直接.className="修改后的内容即可"。jquery在这点上有点“化简入繁”了。