JQuery

JQuery是一个js语言的框架,作用是简化JS,是一个.js的文件

JQuery的优势

简化js代码
可以像css一样通过选择器查找元素
可以直接修改元素的样式
解决兼容性问题

JQuery的引入

因为此框架就是一个js文件,引入方式跟一般文件一样

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>

加载完成事件

//复杂版
/* $(document).ready(function(){
    alert("复杂");
}); */
//简单版
$(function(){
    alert("JQuery加载完成事件 ");
});

点击事件

//点击事件=-=写在加载完成之外拿不到按钮==JQuery中没有onclick===id="mybtn"
$("#mybtn").click(function(){
    alert("绑定成功");
})

$

$等效JQuery $("#id") = JQuery("#id");

JQuery对象和js对象互相转换

$("#id");//JQuery对象
var btn = document.getElementById("id");//js对象

input.value
$("#myinput").val()

js对象与Query对象转换

//JQuery对象-js对象
$("#btn1").click(function(){
    var input = $("#myinput");
    alert("我是JQuery:" + input.val());//获取myinput标签的内容
    //JQuery对象-js对象
    var jsObj = input[0];
    //jsObje = input.get(0);
    alert("我是js:" + jsObj.value);
})

//js对象-JQuery对象
$("#btn2").click(function(){
    var input = document.getElementById("myinput");
    alert("我是js:" + input.value);
    //js对象-JQuery对象
    var JQueryObj = $(input);
    alert("我是JQuery:" + JQueryObj.val());
})

选择器

基本选择器

标签名选择器 $("div")
id选择器 $("#id")
类选择器 $(".class")
分组选择器 $("div,span,p.myClass")
任意选择器 $("*")

层级选择器

$("div span") 匹配div下所有的span子孙元素
$("div>span") 匹配div下span子元素
$("div+span") 匹配div同级的后面的相邻span兄弟元素
$("div~span") 匹配div同级的后面的所有span兄弟元素

层级函数

获取某个元素的所有兄弟元素
$("d1").siblings("div") //参数可以不写,不写代表所有兄弟元素
获取某个元素的哥哥元素(一个哥哥)
$("d1").prev("div");//参数可以不写,获取相邻的上一个元素,写参数指定上一个的元素类型
获取某个元素的哥哥们(多个)
$("d1").prevAll("div");
获取某个元素的弟弟元素
$("d1").next("div");
获取某个元素的弟弟们
$("d1").nextAll();

过滤选择器

$("div:first") ;//匹配所有div中的第一个
$("div:last");//匹配所有div中的最后一个
$("div:even");//匹配所有div中的偶数位的元素0...
$("div:odd");//匹配所有div中的奇数位的元素0...
$("div:eq(n)")//匹配div中的第n个元素
$("div:lt(n)")//匹配div中所有小于n的元素
$("div:gt(n)")//匹配div中所有大于n的元素
$("div.not(.one)")//匹配div中类不为one的元素

内容选择器

$("div:has(p)")//匹配所有包含p标签的div
$("div:empty")//匹配所有空的div
$("div:parent")//匹配所有非空的div
$("div:contains('avc')")//匹配所有包含文本avc的div

可见选择器

$("div:hidden")//匹配所有隐藏的div

$("div:visible")//匹配素有可见的div

显示隐藏相关的函数

$("#abc").hide();//隐藏
$("#abc").show();//显示
$("#abc").toggle()//隐藏显示切换

属性选择器

$("div[id]") 匹配有id属性的div
$("div[id='d1']") 匹配有id=d1的div
$("div[id!='d1']")匹配id!=d1的div

子元素选择器

$("div:nth-child(n)")//n从1开始,匹配div中第n个子元素
$("div:first-child")//匹配div中第一个子元素
$("div:last-child")//匹配div中最后一个子元素

表单选择器

$(":input")//匹配所有文本框,密码框,单选,复选..(不包括下拉选)
$(":password")//匹配所有密码框
$(":radio")//匹配所有单选
$(":checkbox")//匹配所有复选框
$("checked")//所有单选,复选,下拉选
$("input:checked")//匹配所有的单选,复选
$(":selected")//匹配所有被选中的下拉选

文档操作

创建元素
```
var div = $("<div>avsad</div>");
```

添加元素

父元素JQuery对象.append(div);//添加到最后面
父元素JQuery对象.prepend(div);//添加到最前面

插入元素

兄弟元素.after(div);//插入到兄弟元素的后面
兄弟元素.before(div);//插入到兄弟元素的前面

删除元素
```
元素对象.remove();
```

修改CSS样式

元素对象.css("color","red");
元素对象.css({"color":"red","background-color":"blue"})

修改属性

元素对象.attr("id","a");
元素对象.attr("id")

文本

元素对象.text("afasd");
元素对象.text()

HTMl

元素对象.html("sdf")
元素对象.html();

动画相关

show(1000,function(){})
hide(1000);
slidUp()
slideDown()
fadeOut()
fadeIn()
animate

音视频播放

    <audio src="1745.mp3" prevload="auto" autoplay="autoplay" loop="loop" controls="controls"></audio>