JQ学习内容

目录

一、jQuery起步

二、选择器

三、样式

四、DOM操作

五、属性

六、事件

七、动画效果

---

一、jQuery起步

1.1 入口函数

又称作 预加载函数

<script>
// 第一种写法
$(document).ready(function(){
  // 在这里写你的代码...
});
  // 第二种写法
$(function(){
  // 在这里写你的代码... 
})
</script>

JavaScript 中获取 html 元素的方法

document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName()

jQuery 中获取对象的方法

$()

1.2 jQuery 获取 DOM 元素

$() 来获取对象 (DOM 元素 )

二、选择器

选择器就是帮助我们来选取元素的，比如说在 css 中的选择器，选择好元素后进行样式的修饰，在

Jquery 中选择器选好元素后，是需要进行 DOM 操作的

大部分的 css 选择器都可以应用到 jQuery 选择器中

CSS 的选择器分类

(1)  基础选择器

* 号选择器

标签 ( 元素 ) 选择器

类选择器 . 类名

id 选择器 #id 值

(2) 复合选择器

后代选择器 E F 查找的是 E 元素里边的 F 元素

子集选择器 E>F 查找的是 E 元素的子集 F 元素

紧邻兄弟选择器

同辈兄弟选择器

多重选择器

(3) 伪类选择器

:hover

:active

:visited

:link

:fifirst-child

:last-child

:nth-child()

:not()

:nth-of-type()

（4）伪对象选择器

::before

::after

::fifirst-line

::fifirst-letter

三、样式

1. css() 为 dom 对象设置样式

   第一种用法 ： css( 属性名称 , 属性值 ) 一次只能设置一个样式

<div class="demo"> 
        设置一条样式
</div> 
<script> 
$('.demo').css('color','blue').css('background-color','red')
 </script>

第二种用法 ： css({ 属性名称 : 属性值 , 属性名称 : 值 ....})

       设置一条样式

四、DOM操作

1. append() 向匹配到的父元素末尾追加子元素

<div class="add">append</div>
<script>
     /*
       1. 创建dom元素
         jQ: $('<a href="http://www.baidu.com">百度</a>')
       2. 获取父元素 
       $('.add')
       3. 使用append()追加 
       父元素对象.append(要追加的子元素)
                */
var obj = $('<a href="http://www.baidu.com">taobao</a>') 
$('.add').append(obj)
</script>

2. appendTo() 把子元素追加到父元素中

<div class="add">append</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
obj.appendTo($('.add'))
</script>

3. prepend() 向父元素的开头添加子元素

<div class="add">prepend</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').prepend(obj)
      //结果： <div class="add"><a 
href="http://www.baidu.com">taobao</a>prepend</div>
</script>

4. prependTo() 元素前置到另一个、指定的元素元素集合中。

<div class="parent">宝剑锋从磨砺出</div>
   <span id="child">梅花香自苦寒来</span>
<script>
     $(function(){
                $('#child').prependTo($('.parent'))
                // 效果：<div class="parent"> <span id="child">梅花香自苦寒来</span>宝剑锋从 磨砺出</div>
     })
</script>

5. remove() 移出匹配到的元素

<p>苹果01</p>
<p class="two">苹果02</p>
<p>苹果03</p>
<script>
//$('p').remove() // remove()方法不传递参数的情况下 表示删除匹配到的所有元素
$('p').remove('.two') // 移除类名等于two的p标签
</script>

五、属性

1. attr() 获取或者设置属性

<div class="demo" title="这是一个测试代码">attr方法 </div>
<script>
// attr() 获取匹配元素属性的值
      var res = $('.demo').attr('title')
// attr() 设置匹配元素的属性值
       $('.demo').attr('title','this is a test code') // 只修改一个属性值
       $('.demo').attr({name:'code',id:'test'}) // 设置多个属性
</script>

2. removeAttr() 移除属性

<div class="demo" title="这是一个测试代码" id='test'>attr方法 </div>
<script> 
$('.demo').removeAttr('id') 
</script>

注意：只接受一个参数

3. addClass() 添加类名

<div id="demo"> 白日依山尽</div> 
<script>
     $(this).addClass('active') 
</script>

4. removeClass() 移出类名的

<div id="demo" class='active'> 白日依山尽</div> 
<script>
     $(this).removeClass('active') 
</script>

5. toggleClass() 当某个类名存在时则删除，不存在时则添加

<div id="demo"> 白日依山尽</div> 
<script> 
     $('#demo').click(function(){ 
       $(this).toggleClass('active') 
</script>

6. html() 获取或者设置匹配元素的内容 ( 包含标签 )

<div class="content"><span>作者:王之涣</span><br>白日依山尽</div> 
<script>
     $(function(){ 
            // html() 获取元素的内容 和JavaScript中的innerHTML相同的
            var con = $('.content').html() 
            // console.log(con); 
           // html() 设置匹配元素的内容
$('.content').html('去<a href="http://jd.com" target="_blank">京东 </a>网购')
        })
</script>

7. text()

<div class="content"><span>作者:王之涣</span><br>白日依山尽</div>
<script>
      $(function(){
         // text() 获取元素的文本内容不包含标签 和JavaScript中innerText的相 同的
         var con = $('.content').text()
         // console.log(con); 
         // text() 设置匹配元素的文本内容
$('.content').text('去<a href="http://jd.com" target="_blank">京东 </a>网购')
      }) 
</script>

注意： text() 和 html() 最大的区别， text() 只处理文本内容，不能识别标签，而 html() 方法可以识别

标签

text() 和 html() 方法不能够用于获取或者设置表单标签的值，除了 button 和 textarea 这两个

标签之外

8. val() 获取或者设置表单标签的值

<input type="text" id="user" value="zhangsan">
<script>
    $(function(){
       // val() 获取表单标签的值
       var res = $('#user').val()
       // console.log(res);
       // val() 设置匹配元素的value值
       $('#user').val('张三')
}) 
</script>

9. prop() 设置或者获取元素的属性值

10. removeProp() 移出属性

attr() 和 prop() 的应用场景

prop() 方法经常用于标签属性值有 true 和 false 的时候使用，例如： checked 、 seleted 、 readonly 、

disabled

六、事件

1.1  鼠标事件

语法：

事件对象 (dom 元素 ). 事件名称 (function(){})

1. 鼠标单击事件 click()

<style> 
       .clk{
            width: 200px; 
            height: 180px; 
            background-color: red; 
            }
            .active{
                     background-color: blue;  
            }
</style>
<div class="clk"></div> 
<script> 
     $(function(){ 
       $('.clk').click(function(){ 
          $('.clk').toggleClass('active') 
      }) 
   })  
</script>

2. 鼠标移出事件 mouseout()

3. 鼠标滑过事件 mouseover()

1.2  表单事件

1. 聚焦事件 ( 获得焦点事件 ) focus()

2. 失去焦点事件 blur()

3. 内容改变事件 change()

4. 表单提交事件 submit()

注意 : 对象是 form 标签

1.3  键盘事件

1. 键盘按下事件 keydown()

2. 键盘弹起事件 keyup()

3. 键盘按压事件 keypress()

键盘码

1.4  jq 中独有的事件方法

1. 事件绑定方法 bind()

2. 事件解绑方法 unbind()

3. 只触发一次事件方法 one()

4. on()

需要事件委托的元素的事件绑定 一般都是动态创建的 dom 元素需要事件委托

七、动画效果

1.1 显示和隐藏·

show() 显示

<button>显示</button> 
<button>隐藏</button>
<div class="show">显示</div> 
<script>
    $(function(){
    // 单击显示按钮 div显现
    $('button:eq(0)').click(function(){
       $('.show').show(2000)
   })
   }) 
</script>

hide() 隐藏

<button>显示</button> 
<button>隐藏</button> 
<div class="show">显示</div> 
<script> 
    $(function(){ 
    // 单击隐藏按钮 div消失 
    $('button:eq(1)').click(function(){ 
        $('.show').hide(2000,function(){ 
             $(this).show(1000) 
       }) 
    })
    }) 
</script>

1.2 上拉和下拉

slideUp() 上拉

slideDown() 下拉

slideToggle() 如果元素未显示 下拉 显示的 就是上拉

<button>上拉</button> 
<button>下拉</button> 
<button>toggle</button> 
<div class="show">div标签</div> 
<script> 
    $(function(){ 
        $("button:eq(0)").click(function(){ 
            $(".show").slideUp(2000) 
        })
        $("button:eq(1)").click(function(){ 
            $(".show").slideDown(2000) 
        })
        $("button:eq(2)").click(function(){ 
            $(".show").slideToggle(2000) 
        }) 
     }) 
</script>

1.3 淡入和淡出

fadeIn() 淡入

fadeOut 淡出

fadeToggle()

<button>淡入</button> 
<button>淡出</button> 
<button>toggle</button> 
<div class="show">div标签</div> 
<script> 
     $(function(){ 
         $("button:eq(0)").click(function(){ 
              $(".show").fadeIn(2000) 
     })
     $("button:eq(1)").click(function(){ 
         $(".show").fadeOut(2000) 
     })
     $("button:eq(2)").click(function(){ 
         $(".show").fadeToggle(2000) 
      }) 
    }) 
</script>

1.4 自定义动画

animate()

<style>
        .show{
               width: 240px; 
               height: 180px; 
               background-color: red; 
             }
</style>
<body>
          <div class="show">div标签</div>
<script> 
    $(function(){ 
       $(".show").animate({ 
              "margin-top":'200px', 
              "margin-left":'300px' 
      },2000) 
   }) 
</script>