Jquery

2019-04-11  本文已影响0人  cj小牛

什么是javaScript框架库

普通JavaScript的缺点：每种空间的操作方式不同意，不同浏览器下有区别封装库，要编写跨浏览器的程序非常麻烦。因此出现了很多对javaScript的

常见的Javascript框架库

Prototype、YUI(网络反响一般)、Dojo、ExtJs、jQuery （http://jquery.com）等，这些库对JavaScript进行了封装，简化了开发。这些库是对javaScript的封装，内部都是javaScript的实现。

为什么要学习Jquery

很好用

DOM对象转jQuery对象
    var btn = document.getElementById('btn");
    // $(btn) Dom对象直接转成jQuery对象
    $(btn).click(function(){ 
        $(this).css("backgroundColor",'red');
    });

Dom复习

选择器

1.1 基本选择器

几个常用的方法

$("*") 所有的

1.2 层级选择器

$(".outer p") class 名字叫outer 的所有子孙p标签
$(".outer>div")class 名字叫outer 的儿子div
$(".outer+div") 毗邻 outer的div
$(".outer~div") outer 后面所有直接的兄弟标签

1.3 基本筛选器

$("li:first") 列表中的第一个
$("li:eq(2)") 列表中索引为2的
$("li:lt(2)") 列表中序号小于2的
$("li:gt(2)") 列表中序号大于2的
$("li:event") 列表中隔一个算一个。
$("#uu>li:even") uu中li 的偶数行
$("#uu>li:odd") uu 中li的偶数行

1.4 属性选择器 这个是重点
$("[id = "div1"]")
$("["属性名 = "一个取的名字""]")
eg : <input type="text" value="123">
<input type="button" value="321">
$("[type = 'button']").css("color","red");//
2.0 过滤选择器
$("li").eq(2)
$("li").first()
$("li").hasclass("test")//判断li中有没有class 等于test 的 返回bool值
$("li").toggleClass("test")//样式在test 添加和移除中切换

3.0
$(".class").children().css("color","red") //名字为clolor 的所有子控件。不包括自己

js属性操作

$(#ck).attr("id") 取属性
$(#ck),attr("id","eee")设置属性
$(#ck).attr("checked","true")//设置选中
$(#ck).removeAttr("checked","true")//删除属性

$(#ck).prop("checked","true")//设置全选属性
$(#ck).removeProp("checked","true")//删除属性
$(#ck).addClass("hidden") // 添加类样式
$("#ck").removeClass("hidden")//移除样式，不谢类名就是移除所有

遍历

li =[120,20,30]
$.eaceh(li, function(i,x)){
i索引
x 120
})

    <ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script src="js/jQuery.js"></script>
<script>
  $(function () {
    $("#uu>li").each(function (indx,element) {
    //这里就是通过each 相当于是遍历 得到的是索引 和对应的对象
        $(element).css("opacity",(indx+1)/10);
     });
});

</script>

val

$(":text").val()//获取指
$(":text").val("456")//设定值

append 插入。appendTo拼接到

var ele = $(".p1")
$(".div1").append(ele) //插入到div1 中
$(".p1").appendTo($(".div1"))//拼接到div中

删除 empty remove

$("div").empty() 内部内容清空
$("div").remove() 删除整个标签都删除了

动画

fade动画

animate 动画

jQuery 创建元素

jQuery中追加元素的方法

对元素的操作

清空
设置和获取系统属性值或者自定义属性值

事件的绑定

})

在这几个绑定事件的方法，使用on ，bind 和delegate 方法尽量不要用

事件的解绑
  1. 如果子级元素是父级元素通过调用delegate 的方式绑定的事件，父级元素使用off 方式解除绑定事件，这个时候父级元素和子级元素的相同的事件都会被解绑。

事件触发（ 条件 要先绑定了事件 才能触发事件）

事件对象

    $("#dv").on("click",'input',function (event) {
       //这里的event 就是事件

       console.log(event);
       // event 中有几个参数要学习下
       // 1 delegateTarget：div#dv.dv 意思是同div 给inpt元素绑定的事件
       // 2 currentTagret  当前的事件是给谁绑定的 input
       // 3 target 谁触发的事件。
   });
事件冒泡

概念： 元素中有元素，这些元素所有相同的事件，一旦最里面的元素的事件触发了，外面的所有的元素的相同的事件都会被触发。

       // 元素A中有一个元素B，A和B都有点击事件，B点击事件触发，A点击事件自动触发.如下面的例子，点击了最小的div 两个大的div 的事件也被触发了
    在每个Jquery 中添加return false;取消事件冒泡
 <div id="dv1">
   <div id="dv2">
    <div id="dv3">
    </div>
  </div>
  </div>
  <script src="js/jQuery.js"></script>
<script>
   $(function () {
     $("#dv1").click(function () {
        alert("div1被点击了"+ this.id);
     });
     $("#dv2").click(function () {
        alert("div2被点击了"+ this.id);
       });

      $("#dv3").click(function () {
         alert("div3被点击了"+ this.id);
        // 取消事件冒泡 
          return false;
       });
  });
</script>

多库共存的问题

var xy = .noConflict() 就是把. 改成xy 。用途是一个文件中导入了多个库，关键名字一样的时候用到这样的方法。

上一篇下一篇

猜你喜欢

热点阅读