Jquery和js取数据的区别以及引用Jquery文件

Posted 小美好。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery和js取数据的区别以及引用Jquery文件相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
#d1
{
    font-size:24px;
}
.list
{
    width:200px;
    height:30px;
    text-align:center;
    line-height:30px;
    vertical-align:middle;
    background-color:#999;
    color:#F00;
}
</style>
</head>

<body>

<div id="d1" name="div" ><b>第一个DIV</b></div>

<div class="d">22222</div>
<div class="d">333333</div>
<div class="d">444444</div>


<div class="list">hello</div>
<div class="list">world</div>
<div class="list">hai</div>
<div class="list">aaaa</div>


<input type="text" bs="uid" />


<input type="checkbox" id="aa" value="hello" />

<input type="button" id=‘btn‘ value="取值"/>


</body>
<script type="text/javascript">

//JS取元素,取出来的是具体的元素对象
//var d = document.getElementById("d1");
//alert(document.getElementsByClassName("d"));
//alert(document.getElementsByTagName("div"));
//alert(document.getElementsByName("uid"));

//操作内容
//alert(d.innerText); //获取文本内容
//alert(d.innerHTML); //获取HTML代码
//d.innerText = "hello"; //给元素赋值(文本)
//d.innerHTML = "<span style=‘color:red‘>hello</span>"; //给元素赋值(HTML代码)

//d.value  获取或者设置表单元素的内容

//操作属性
//alert(d.getAttribute("name")); //获取属性的值
//d.setAttribute("bs","001"); //设置属性
//d.removeAttribute("name"); //移除属性


//操作样式
//alert(d.style.fontSize); //获取样式,必须是写在元素里面的
//d.style.fontSize = "36px"; //修改设置样式



$(document).ready(function(e) {
    
    //Jquery取元素,取出来的是jquery对象
    //var d = $("#d1"); //根据ID找
    /*var d = $(".d"); //根据CLASS找
    
    for(var i=0;i<d.length;i++)
    {
        alert(d.eq(i));
    }*/
    
    //alert($("div")); //根据标签名找
    
    //alert($("[bs=uid]")); //根据属性找
    
    //操作内容
    //alert(d.text()); //获取元素的内容(文本)
    //alert(d.html()); //获取元素的内容(HTML代码)    
    
    //d.text("hello"); //给元素赋值(文本)
    //d.html("<span style=‘color:red‘>hello</span>");    //给元素赋值(HTML代码)
    
    //d.val(); //操作表单的内容,可以取值赋值
    
    
    //操作属性
    //alert(d.attr("name")); //获取属性
    //d.attr("bs","001"); //设置属性
    //d.removeAttr("bs"); //移除属性
    
    //操作样式
    //alert(d.css("font-size")); //取样式
    //d.css("font-size","36px"); //设置样式
    
    
    //事件
/*    $("#d1").click(function (){
        
        alert("aa");
        
        })*/
        
    
/*    $(".d").click(function(){
        
        //alert($(this).text());

        })*/
        
    //菜单选中
    $(".list").click(function(){
        
        //让所有元素变为非选中状态
        $(".list").css("background-color","#999").css("color","#F00");
        
        //让该元素变为选中状态
        $(this).css("background-color","#60F").css("color","#FFF");
                
        })
        
    //取checkbox选中值
    $("#btn").click(function(){
        
        if($("#aa")[0].checked)
        {
            alert($("#aa").val());
        }
        else
        {
            alert("未选中!");
        }
        
    })
});

</script>
</html>

 

以上是关于Jquery和js取数据的区别以及引用Jquery文件的主要内容,如果未能解决你的问题,请参考以下文章

js和jquery的区别是啥?

jquery和Js的区别和基础操作

jquery和Js的区别和基础操作

jQuery与js的区别,并有基本语法详解,

js文件里能使用jquery方法吗

在js文件中无法引用jquery的函数