JQuery

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());
  })
  

选择器

基本选择器

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

层级选择器

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

层级函数

1. 获取某个元素的所有兄弟元素

   $("d1").siblings("div") //参数可以不写,不写代表所有兄弟元素

2. 获取某个元素的哥哥元素(一个哥哥)

   $("d1").prev("div");//参数可以不写,获取相邻的上一个元素,写参数指定上一个的元素类型

3. 获取某个元素的哥哥们(多个)

   $("d1").prevAll("div");

4. 获取某个元素的弟弟元素

   $("d1").next("div");

5. 获取某个元素的弟弟们

   $("d1").nextAll();

过滤选择器

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

内容选择器

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

可见选择器

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

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

   • 显示隐藏相关的函数

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

属性选择器

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

子元素选择器

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

表单选择器

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

文档操作

1. 创建元素

   var div = $("<div>avsad</div>");
   

2. 添加元素

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

3. 插入元素

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

4. 删除元素

   元素对象.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>