【JS、JQuery】JS和JQuery常用方法的区别对比

下面总结一下原生JS和JQuery一些常用方法的区别对比:

 

 js方法jquery方法
1、页面加载 window.onload=function(){
 };

$(document).ready(function() {
});

等价于下面:
$(function() {
});

2、获取DOM对象

var pid=document.getElementById("pid");

var div = document.ElementsByClassName("test");//取到的是个数组

var pid=$("#pid");

var div = $(".test");

3、改变元素内容举例:给id为pid的元素赋值
document.getElementById("pid").innerHTML="hello";

$("#pid").text("hello");//有参数是赋值,无参数是取值
或者:

$("#pid").html("hello");//可以解析标签

4、改变元素属性举例A:改变图片src属性:
document.getElementById("imgid").src="7.jpg";

$("#imgId").attr("src","img/2.jpg");
或者:

$("#imgId").attr({"src": "img/2.jpg"});//可以修改多个属性

.removeAttr('src');//移除属性

.attr('src');//获取属性

举例B:改变输入框value属性:
document.getElementById("inputId").value="hello";
或者:

document.getElementById("inputId")['value']="hello";
或者:document.getElementById("inputId").setAttribute('value','hello');

.removeAttribute("value");//移除属性

.getAttribute(‘value’);//获取属性

$("#inputId").val('hello');//有参数是赋值,无参数是取值
5、改变元素样式举例A:改变元素背景颜色:
document.getElementById("divid").style.background="blue";

$("#divId").css("background-color","blue");
或者:

$("#divId").css({"background-color": "blue"});

举例B:让元素隐藏(仍保留原来的空间):
document.getElementById('pId').style.visibility='hidden';//visible显示
让元素消失:
document.getElementById('pId').style.display= 'none';//block显示

$("#pId").hide();//元素消失
$("#pId").show();//元素显示

$("#pId").toggle();//元素在显示和隐藏之间切换

注意:JS操作样式的方法只能获取内联样式,不能取内嵌的和外部的!!!!!
6、点击事件var btn = document.getElementById('btn');
btn.onclick = function (ev) {
    alert("btn.onclick");
};
$("#btn").click(function(){
    alert("btn.onclick");
});
7、给元素添加样式 

$(".divId").addClass("style1");// style1是样式的名称
removeClass删除class中的某个值;
toggleClass存在就删除class,不存在就添加class;

removeAttr删除class这个属性;

 

阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qing_小诺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值