JavaScript&&基于jQuery的元素控制与基于原生的元素控制

元素获取

基于jQuery

//基于属性id。仅获取零个或一个
$("#id_value")
//基于属性class。可获取零个、一个、多个
$(".class_value")
//基于属性name。可获取零个、一个、多个
$("#name_value")
//基于元素类型。可获取零个、一个、多个
$("div")

基于原生

//基于属性id。仅获取零个或一个
var f_element1 = document.getElementById('f_id');
//基于属性class。可获取零个、一个、多个
var f_element2 = document.getElementsByClassName("f_class");
//基于属性name。可获取零个、一个、多个
var f_element3 = document.getElementsByName("f_name");

注意：Elements带“s”,因此获取的是一个数组。所以使用时也应指明是针对数组中的哪一个操作！否则报错。

元素创建

基于原生

//基于元素div创建并获取div元素本身
var cur_element = document.createElement('div');

基于jQuery

方法一：

var link1 = $('<a>',{
   text:"baidu",
   href:"http://www.baidu.com",
   target:"_blank",
   title:"goto baidu" 
});
 
link1.appendTo('body');

方法二：

var link2 = $('<a>baidu</a>').attr({
   href:"http://www.baidu.com",
   target:"_blank",
   title:"goto baidu" 
});
 
link2.appendTo('body');

方法2_2:

var div = $('<div></div>').attr({
	style:"width:640px;height: 480px;display:none",
    class:"div_class",
});
div.appendTo('.page_header');

var $video = $(`<video playsinline muted autoplay style="width:640px;height: 480px;"></video>`);
div.append($video);

参考资料：
https://www.cnblogs.com/JianXin1994/p/11618036.html

设置元素属性

基于原生

x=document.getElementById("demo3") // 找到元素
x.style.color="#ff0000";          // 改变样式
//基于属性id
cur_element.setAttribute('id', userID + 'div');

设置元素的属性style

基于原生

cur_element.setAttribute('style', 'width:100px; position: fixed; top:100px; left:100px;display: block;z-index: 2147483647;');

基于jQuery

var screen_height = window.screen.height;
var screen_width = window.screen.width;
$(".player").attr("style","position:relative;width:"+screen_width+";height:"+screen_height+";margin-top: 8px;");
$(".player video").attr("style","width:"+screen_width+";height:"+screen_height+";");

设置元素类

基于原生

定义class

//方法一：添加属性class并设置值为classA。会清空原有class的值
cur_element.className = 'classA';
//方法二
cur_element.setAttribute('class','letter_send_ok');
//追加类classB
cur_element.className += 'classB';
//删除类classB

基于jQuery

//删除类
$(".room_control_in_player").removeClass('hide');
//追加类
$(".full_screen_ico").addClass('hide');

获取元素的值

基于原生

var x=document.getElementById("demo2").value;

基于jQuery

//eg1
$("#demo2").val();
//eg2
//获取body元素style属性的zoom值，并将字符串值转化为float类型处理
var zoom_org = parseFloat($("body").css("zoom"));
var zoom_new = zoom_org - 0.1;
//赋值
$("body").css("zoom",zoom_new);

设置元素的innerHTML、值

基于jQuery

//获取值
$("div").text();
$("div").html();
//设置值
$("div").text("element2IdaddConten");

基于原生

var oImg=document.getElementById("img");
var oText=document.getElementById("text");
oImg.src="zuozhu.jpg";
oText.innerHTML="佐助";

元素插入

基于jQuery

//一股脑哦
$("p").append("<a href='http://www.baidu.com'>百度链接</a>");

基于原生

f_element1 .appendChild(cur_element );

元素移除

基于jQuery

//基于属性class值移除
$(".classA").remove();