1.jQuery是一个JavaScript代码的框架,这个框架本身就是使用JavaScript代码写的
jQuery的优点:
1.1可以简化JavaScript代码
1.2.可以像css一样获取元素
1.3可以在代码中直接修改页面样式(css)
1.4.拥有强大的选择器
1.5.解决浏览器兼容性的问题
2.jQuery的引入方式:
因为jQuery就是JavaScript的代码,所以引入方式和普通JavaScript文件一样
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
注意:不能再引入的js文件标签内编写js代码!
3.jQuery对象和JavaScript对象的转换
js的对象只能调用js自己的函数,如果js对象的需要调用jQuery中的函数需要把js对象转换成jQuery对象。
<script type="text/javascript">
//加载完成事件,js原生编写样式
onload = function(){
}
//jQuery加载完成事件,复杂版
$(document).ready(function(){
});
//jQuery加载完成事件简单版
$(function(){
alert("Hello JQ");
//得到按钮,并绑定事件
$("#mybtn").click(function(){
alert("按钮点击了");
//获取文本框内容
alert($("#myinp").val());//val=value缩写
//通过js形式得到js对象
var myinput = document.getElementById("myinp");
alert(myinput.value);
//把js对象转换成jq对象
var $jq = $(myinput);
alert($jq.val());
});
//绑定点击事件
$("#jqtojs").click(function(){
//得到jQuery对象
var $jq = $("#myinp");
alert($jq.val());
//把jQuery对象转换成js对象有两种转换方式,方式一:
var js1 = $jq[0];//常用
//方式二
var js2 = $jq.get(0);
alert(js1.value+"="+js2.value);
});
});
</script>
<body>
<input type="text" id="myinp">
<input type="button" id="mybtn" value="按钮">
<input type="button" id="jqtojs" value="jq转js按钮">
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/4de5c414424343c1e9da8605d1b3aacb.png)
4.jQuery选择器
4.1基本选择器
1.标签名选择器
$("div") 作用:匹配文档中所有的div
2.id选择器
$("#id")
3.类选择器
$(".class")
4.分组选择器
$("div,.class,.#id")
5.所有元素选择器
$("*")
4.2层级选择器
1.“后代选择器”(与JavaScript中选择器基本相同,所以写的名称一样,方便记忆)
$("div span") 匹配div下所以的span元素
2. $("div>span") 匹配div下只是span的子元素
3. $("div+span") 匹配div后面一个的span同级元素(兄弟元素)
4. $("div~span") 匹配div后面所有的span兄弟元素
层级选择器中加上函数的选择器
1.获取元素的所有兄弟元素
$("#two").siblings("div")
2.获取元素的上面元素(获取它的哥哥元素)
$("#two").prev("div")
3..获取元素的所有上面元素(获取它的哥哥们)
$("#two").prevAll("div")
4.获取元素的下面元素(获取它的弟弟)
$("#two").next("div")
5.获取元素的所有下面元素(获取它的弟弟们)
$("#two").nextAll("div")
4.3过滤选择器
1. $("div:first") 匹配所有div中的第一个元素
2. $("div:last") 匹配所有div中的最后一个元素
3. $("div:even") 匹配所有div中偶数div,从0开始
4. $("div:odd") 匹配所有div中奇数div,从0开始
5. $("div:eq(n)") 匹配所有div中下标为n的元素,从0开始
6. $("div:lt(n)") 匹配所有div中下标小于n的元素,从0开始
7. $("div:gt(n)") 匹配所有div中下标大于n的元素,从0开始
8. $("div:not(.one)") 匹配所有div中class不为one的元素
4.4 内容选择器
1. $("div:has(p)") 匹配所有包含p标签的div
2. $("div:empty") 匹配所有空的div
3. $("div:parent") 匹配所有非空的div
4. $("div:contains('id')") 匹配包含id的div
4.5 可见选择器
1. $("div:hidden") 匹配所有隐藏的div元素
2. $("div:visile") 匹配所有可见的div元素
3. $("div").toggle(600); 切换元素的显示状态,600表示切换速度的毫秒数
4. $("div:hidden").show() 让隐藏的元素显示
5. $("div:visible").hide(); 让显示的元素隐藏
4.6 属性选择器
1. $("div[id]") 匹配有id属性的div元素
2. $("div[id='d1']") 匹配id属性等于d1的div
3. $("div[id!='d1']") 匹配id属性不等于d1的div
4.7 子元素选择器
1. $("div:nth-child(n)") 匹配div中第n子元素,n从1开始
2. $("div:first-child") 匹配div中第1个子元素
3. $("div:last-child") 匹配div中最后一个子元素
4.8 表单选择器
1. $(":input") 匹配所有的input中:文本框,密码框,单选,复选框,下拉选,文本域,按钮
2. $(":password") 匹配所有密码框
3. $(":radio") 匹配所有单选
4. $(":checkbox") 匹配所有复选框
5. $(":checked") 匹配所有被选中的单选,复选,下拉选option
6. $("input:checked") 匹配所有被选中的单选和复选,input中没有下拉选的
7. $(":selected") 匹配所有被选中的下拉选option
5.文档操作
1.创建元素
var $d = $("<div>aaa</div>");
2.添加元素
$("#big"),append($d);//添加到同级元素最后面(兄弟元素的最前面)
$("#big").before($d);//添加到同级元素最前面(兄弟元素的最后面)
3.插入元素
$("#big").after($d);//将d标签插入到同级元素id为big的后面(兄弟元素的前面)
$("#big").before($d);//将d插入到同级元素id为bigbig的前面(兄弟元素的后面)
4.删除元素
通过自己删除
$("#id").remove();
先得到所有的同级标签,然后在删除里面#id
$("div").remove("#id");
5.修改样式
$("#id").css("width","40px")//设置宽度
$("#id").css("width")//获取宽度
6.设置属性
$("#id").attr("id","xx");//设置id属性
$("#id").atte("id");//获取id
7.设置文本
$("#id").text("xxx")//设置元素文本
$("#id").text();//获取文本
8.设置html代码
$("#id").html("xxx")//设置元素html代码
$("#id").html()//获取html代码
练习:使用文档操作做一个城市的添加、插入和删除的操作
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function(){//添加操作
//创建li元素
var $li = $("<li>深圳</li>");
//添加到ul中
// $("ul").append($li);//添加到同级元素的最后面
$("ul").prepend($li);//添加到同级元素的最前面
}
function fn2(){//插入操作
//创建li元素
var $li = $("<li>天津</li>")
// $("#sh").after("$li");//插入到兄弟元素上海的后面
$("#sh").before("$li");//插入到兄弟元素上海的前面
}
function(){//删除操作
// $("#sh").remove();//删除上海,常用
$("li").remove("#sh");//先得到所以的li标签,然后在删除里面id为sh的元素
}
</script>
<body>
<input type="button" value="添加" οnclick="fn1()">
<input type="button" value="插入" οnclick="fn2()">
<input type="button" value="删除" οnclick="fn3()">
<ul>
<li>北京</li>
<li id="sh">上海</li>
<li>广州</li>
</ul>
</body>
效果图如下:
点击添加按钮后:
点击添加插入按钮后:
点击添加删除按钮后: