jQuery基础知识

Javascript中的基本操作:

<script src="jquery.min.js"></script>
<style>

#aa
{
    width:200px;
}

</style>
</head>

<body>
<div id="aa">hello</div>
<div class="bb">22</div>
<div class="bb">33</div>
<div class="bb">44</div>
<input type="text" name="cc" />

</body>
<script>
var d = document.getElementById("aa");//根据ID找元素,找到是具体的DOM对象
var c = document.getElementsByClassName("bb");
var div = document.getElementsByTagName("div");
var input = document.getElementsByName("cc");


//操作内容
//1.非表单元素
d.innerHTML;//HTML代码    赋值d,innerHTML="";
d.innerTEXT;//纯文本 

//2.表单元素
d.value;


//操作属性
d.setAttribute("bs","pp"); //添加属性
d.getAttribute("bs");  //获取属性
d.removeAttribute("bs"); //移除属性
//操作样式
d.style.color = "red";
d.style.backgroundColor = "yellow";  //只能获取内联样式表 ,不能获取内嵌样式表和外联样式表

jQuery中的基本操作:

<script>
$(document).ready(function(e) {
    
    //根据ID找元素,找出的是jQuery对象,如果要取DOM对象,取索引为0的元素
    var jd = $("#aa");//根据ID
    //alert(jd);
    var jc = $(".bb");//根据class
    var div = $("div");//根据标签名
    var ip = $("input[name=cc]"); //根据name找,利用属性选择器
    //alert(ip.eq(0)[0]);//取第几个用eq()方法
    for(var i =0;i<jc.length;i++)
    {
        jc.eq(i);//取数组里的第几个jquery对象
    }
    
    //操作内容
    //1.非表单元素
    jd.html();//取值    赋值jd.html("vv");
    jd.text(); 

    //2.表单元素
    jd.val();//取值     赋值jd.val("bb");
    
    
    
    //属性操作
    jd.attr("bs","aa");//设置属性
    jd.attr("bs");//获取属性
    jd.removeAttr("bs"); //移除属性
    
    
    
    //操作样式
    jd.css("background-color","#0F0"); //设置样式
    jd.css("width");  //获取样式
    
    //事件设置
    $("#aa").click(function ()  //给一个元素加事件
    {
        alert("aa");
    });
    
    
    $(".bb").click(function ()  //给多个元素加事件,设置同一个class
    {
        alert($(this).text());
    });
    
    $(".bb").css("color","#F00");; //给多个元素设置相同的样式
});
</script>
原文地址:https://www.cnblogs.com/Itwonderful/p/5489642.html