用jQuery基础
2024-09-02 14:14:14
要使用jQuery要引用jQuery文件，在头标签中引用
|
1
|
<script src="jquery-1.11.2.min.js"></script> //引入jQuery文件 |
注意：页面同时引用多个js文件，jQuery一定是最前面
在jQuery中“$”符号是代表选择器
|
1
2
3
4
5
6
|
<script type="text/javascript"> //页面加载完成 $(document).ready(function(e) { //页面加载完成后执行 });</script> |
jQuery的几种操作（注意和js的区别）：
1.选取元素
|
1
2
3
4
5
6
7
8
9
10
11
|
//JS中的找元素,DOM对象//var a = document.getElementById("aa"); //根据id找//alert(a);//var a = document.getElementsByClassName("aa"); //根据class名找//alert(a[1]);//var a = document.getElementsByTagName("div"); //根据标签找//var a = document.getElementsByName("uid"); //根据name找//alert(a[0]); |
jQuery选取元素：
|
1
|
<div id="aa">1111</div> |
（1）根据id找
|
1
2
|
//var a = $("#aa"); //根据ID找：#//alert(a); //1.找的是jQuery对象<br> alert(a[0]); //2.找的就是id的 |
|
1
2
|
<div class="bb"></div><span class="bb"></span> |
（2）根据class名找
|
1
2
|
var a = $(".bb"); //根据class名找：.//alert(a[0]); //找到的是dom对象<br>//alert(a[1]); |
找到的是Jquery对象
|
1
2
|
var a = $(".bb");alert(a.eq(0)); //1.找jQuery对象<br>alert(a.eq(0)[0]); //1.找到的就是相应的dom对象 |
（3）根据标签找
|
1
2
|
var a = $("div"); //根据标签名找alert(a[1]); |
|
1
2
3
4
|
<div id="aa">1111</div><div class="bb"></div><span class="bb"></span><input type="text" name="cc" /> |
（4）根据属性找
|
1
2
3
|
var a = $("[name='cc']"); //1.根据属性找var a = $("[id='aa']"); //2.根据属性找alert(a[0]); |
2.操作内容
|
1
2
3
4
5
|
//JS中的操作内容//a.innerHTML //操作元素里面的html代码//a.innerTEXT //操作元素里面的文本//a.value //操作表单元素的值 |
jQuery操作内容：
|
1
2
3
4
|
<div id="aa">1111</div><div class="bb"></div><span class="bb"></span><input type="text" name="cc" /> |
（1）非表单元素
|
1
2
|
//a.html(); //操作元素里面的HTML代码//a.text(); //操作元素里面的文本 |
（2）表单元素
|
1
2
|
var a = $("[name='cc']"); //根据属性找a.val("hello"); |
3.操作属性
|
1
2
3
4
|
//JS中的操作属性//a.setAttribute("",""); //设置//a.removeAttribute(""); //移除//a.getAttribute(""); //获取 |
jQuery操作属性：
|
1
2
3
4
5
6
|
//设置属性//a.attr("bs","test");//获取属性//alert(a.attr("aa"));//移除属性//a.removeAttr("aa"); |
复选框
|
1
|
<input type="checkbox" value="1" name="aa"/> |
|
1
2
|
var a = $("[name=aa]");a.prop("checked",true); //false是不选中，true是选中 |
4.操作样式
|
1
2
|
//JS中的操作样式：只能操作内联样式//a.style.backgroudColor = "red"; |
jQuery的操作样式：jQuery是可以操作内嵌样式
|
1
2
|
var a = $("#aa"); //根据id名找a.css("background-color","red"); //设置css样式 |
最新文章
- swift 如何在IOS应用图标上添加消息数
- java回顾rmi
- 20145308刘昊阳 《Java程序设计》实验四 Android环境搭建 实验报告
- Spark核心—RDD初探
- 实战:ASP.NET MVC中把Views下面的视图放到Views文件夹外
- comparing-html5-mobile-ui-frameworks
- Android开发之音乐播放器的实现
- Python编程规范及性能优化（转载）
- 设置UILabel可变高度（根据文本内容自动适应高度）
- [转] Java中的访问控制
- 高通平台手机开发之LCD
- js-图片轮播(极简)
- Python中函数partial的应用
- ADO.NET工具类（二）
- 洛谷P1494 小Z的袜子
- BZOJ1607 [Usaco2008 Dec]Patting Heads 轻拍牛头 筛法
- Unity3D 批处理场景的工具
- 移动端web页面滚动不流畅，卡顿闪烁解决方案
- Nodejs学习事件模块
- Java连接MySQL数据库及操作