首页 > 代码库 > Jquery基础

Jquery基础

2024-08-30 10:56:25   218人阅读

<!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="http://www.mamicode.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
#aa{ background-color:#36C}
</style>
</head>

<body>

Jquery
    $代表选择器

JS
    选取元素
    操作内容
    操作属性
    操作样式
    
<div id="aa" style="width:100px; height:100px;">11</div>

<div class="aa">22</div>
<span class="aa">33</span>

<input type="text" name="uid" aa="bb" id="cc" />

<input type="checkbox" value="http://www.mamicode.com/1" id="dd" />

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

//页面加载完成
$(document).ready(function(e) {
    
    //页面加载完成之后执行
        
    
    //Jquery
        //找元素,Jquery对象
        //var b = $("#aa"); //根据ID找
        //alert(b[0]);
        
        //var b = $(".aa"); //根据class找
        //alert(b[1]); //找到的是DOM对象
        //alert(b.eq(1)); //找到的是Jquery对象
        
        //var b = $("div"); //根据标签名找
        //alert(b[0]);
        
        //var b = $("[id=‘aa‘]"); //根据属性找
        //alert(b[0]);
        
        //操作内容
            //非表单元素
            //b.html(); //操作元素里面的HTML代码
            //b.text(); //操作元素里面的文本
            
            //表单元素
            //b.val("hello");
            
        //操作属性
            //设置属性
            //b.attr("bs","test");
            //获取属性
            //alert(b.attr("aa"));
            //移除属性
            //b.removeAttr("aa");
            
            //b.prop("checked",false);
            
        //操作样式,可以获取内嵌的样式
        //b.css("background-color","red");
        //alert(b.css("width"));
        //alert(b.css("background-color"));
        
});

</script>
</html>

 

Jquery基础


联系
我们