您的位置：首页 > Web前端 > JQuery

jquery 的基础知识，以及和Javascript的区别

2017-03-08 20:22 627 查看

想到之前所学的javascript 我们会想到这几个方面：找元素；操作内容；操作属性；操作样式；统一操作元素；

jquery 也是从这几个方面来学习的。

1 <head>
2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3     <title>无标题文档</title>
4     <script src="jquery-1.11.2.min.js"></script>  //首先要引入jquery包
5     <style type="text/css">
6         #aa{ width:100px; height:100px;}
7     </style>
8 </head>
9 <body> /*举了几个例子*/
10 <div id="aa" style="color:red"><span>aaaaaa</span></div>
11 <div class="a1">div1</div>
12 <div class="a1">div2</div>
13 <span class="a1" bs="1">span1</span>
14 <input type="text" name="uid" id="bd" value="aa" />
15 </body>

1 找元素：（1）javascript 找元素

1 <script type="text/javascript">
2     var a=document.getElementById("aa"); //获取ID
3     var a=document.getElementsByClassName("a1");//获取class
4     var a=document.getElementsByTagName("div");//找标签
5     var a=document.getElementsByName();//表单元素用的比较多
6 </script>

（2）jquery 找元素

1 <script type="text/javascript">
2 var a = $("#aa");
3 var a = $(".a1");
4 alert(a.eq(2)); //读取的是span的class
5 var a = $("div");
6 var a = $("[name=xx]");//如果是读取name值 可以直接赋值
7 </script>

2 操作内容

（1）javascript

var a = document.getElementById("aa")

//非标单元素
alert(a.innerText); //文本
alert(a.innerHTML); //HTML代码
//表单元素
alert(a.value);
a.value="hello";

（2）jquery

var a=$("#aa")
//非表单元素
alert(a.text());
a.text("bbbbb");  //直接更改
alert(a.html());
//表单元素
a.val("hello");

3 操作属性

（1）javascript

a.setAttribute("test","test"); //设置属性和属性值
a.removeAttribute("test");
alert(a.getAttribute("value"));

（2）jquery

a.attr("test","test"); //设置属性和属性值
a.removeAttr("test");//直接移除
alert(a.attr("value"));
a.prop("test","test");// 用prop 可以减少bug
a.removeProp("test");
alert(a.prop("test"));

4操作样式

（1）javascript

a.style.fontSize = "30px";  //无法获取外部样式表
alert(a.style.color);

（2）jquery

a.css("background-color","green");
alert(a.css("width"));  //这里是从外部样式表获得的，可以直接读出

5 统一操作样式

（1）javascript

var d = document.getElementsByClassName("a1"); //获取的是cLassname  是一个数组 要利用循环才能修改每一个class
for(var i=0;i<d.length;i++)
{
d[i].style.fontSize = "30px";
}

（2）jquery

$(".a1").css("font-size","30px"); //利用jquery可以直接修改
$(".ck").prop("checked",true); //可以直接添加元素

下面是一个全选的例子，用jquery来写非常方便

当点击全选的时候下面的选项都被选中，移除后，都不选中

1 <script src="jquery-1.11.2.min.js"></script>
2 <script type="text/javascript">
3 $("#ck").click(function() {
4
5 //$(this); //获取自身
6 //$(this).prop("checked"); 返回值是true,或者false 点击的时候是true,移除的时候是false
7
8 $(".ck").prop("checked",$(this).prop("checked"))
9
10 })

下面的例子是关于外部样式表的：

1 <script src="jquery-1.11.2.min.js"></script>
2 <style type="text/css">
3 .aa{ width:100px; height:100px; float:left; background-color:green; margin:2px;}
4 </style>
5 </head>
6
7 <body>
8
9 <div class="aa"></div>
10 <div class="aa"></div>
11 <div class="aa"></div>
12 <div class="aa"></div>
13
14 </body>

如图所示：流式布局

我想做一个效果，就是点击某一个方块的时候就让它变红色（其他的方块是绿色的）

运用jquery来写

//首先要引用jquery包，我就不写了 从网上下载就可以

<script type="text/javascript">

$(".aa").click(function(){
$(".aa").css("background-color","green"); //原本的都是绿色的
$(this).css("background-color","red"); //点击的这个方块变红色
})

</script>

效果如图所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航