关于jquery我的认识

聿庵

于 2021-12-18 16:05:56 发布

阅读量1k

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/N2316429505/article/details/122013171

版权

1，jquery是 JavaScript库，也可以称为是JavaScript的语法糖，能让我更简便的使用JavaScript，要想使用jquery 必须引入jq库也就是引入jq这个js 文件.

jquery的基本选择器

1，$(‘#demo’) 选择 id 为 demo 的元素

2，$(‘.demo’) 选择 class 为 demo 的所有元素

3，$(‘div’) 选择所有 div 标签元素

4，$(‘.arr.arr-left’) 选择同时具有 arr 和 arr-left 类名的元素

5， $(‘*‘) 选择所有标签元素

<script>
    console.log($("#li1")); //获取id 元素
    $(".li3").css('background', 'red') //通过class  (类名)去获取元素
    console.log($('li')); //通过标签名去获取元素
    console.log($("*")) //获取页面内的所有标签

    console.log($(".li3.li4")) //获取同时具有li3 和li4 这个类的元素
</script>

基本的筛选选择器

1， :eq(index) 匹配一个给定索引值的元素

2，:gt(index) 匹配所有大于给定索引值的元素

3，:lt(index) 匹配所有小于给定索引值的元素

4，:odd 匹配所有索引值为奇数的元素

5，:even 匹配所有索引值为偶数的元素

6，:first 获取匹配的第一个元素

7，:last 获取匹配的最后一个元素

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

</body>
<script>
    console.log($('li'))
    console.log($('li:eq(0)')) //获取指定索引 的元素
    console.log($('li:gt(2)'));// 获取比索引大的元素
    console.log($('li:lt(3)')); //获取比索引值小的元素
    console.log($('li:odd'));//获取索引值为奇数的元素 ,代表偶数行
    console.log($("li:even"))//获取索引值为偶数的元素,代表奇数行
    $("li:odd").css('background','pink');
    $("li:even").css('background','skyblue');
    console.log($("li:first"))//获取元素 第一个
    console.log($("li:last"))//获取元素的最后一个;
</script>

jquery中属性操作

1， attr 添加的非标准属性他会出现在标签内

2，prop 添加的非标属性不会出现在标签内,他会出现在dom对象里

注意：通过attr添加的属性只能通过removeAttr删除通过prop 添加的属性只能removeProp

<body>
  <img src="bg.jpg" alt="赵云" title="常山赵子龙">

  <input type="checkbox" name="sex" id="sex"  >男
</body>
<script>
//更改
$('img').attr('alt','一点寒芒先到')
//添加
$('img').attr('class','banner');
//删除
$('img').removeAttr('class')
$('img').removeAttr('title');
//prop 方式
//
console.log($('input').prop('name'))

$('input').prop('name','性别');

$('input').prop('age',18);
console.log($("input"));

$('input').removeProp('age');
</script>

jquery中的绑定事件的方式

1，第一种方式获取元素.事件名(function(){ 这里面写要写的代码 })

  $('.box').click(function () {
        console.log('你好');
    })

2，元素.on('事件',function(){ 这里面写要写的代码 })

 $(".box1").on("mousemove", function () {
        console.log('1111')
    })

jquery的链式结构

<script>

//jq的链式结构
    //jq调用方法的时候  返回的
    $('#box').children().children().css({
        "width": '200px',
        "height": '200px',
        "backgroundColor": 'red'
    }).animate({
        'left': '400px'
    }).animate({
        "top": '600px'
    })
</script>

在一个对象里面，this指向的是对象本身，当我们调用方法的时候，这些方法都是在对象内部调用的，所以加this才可以访问到这些方法。如果没有加上return this的话，那么执行完一个函数之后，会默认返回undefined，undefine是js内部隐式添加的。

jquery中的遍历和js中的遍历

js 中遍历数组 for, forEach, map, for...in

js 中遍历dom对象 for for...in ,dom对象是伪数组不能使用数组的方法例如 forEach、

jq 遍历数组 for, forEach, map, for...in

jq 遍历jq对象 for map each(只能遍历jq对象);

jq事件

1，ev.stopPropagation(); //阻止事件冒泡

2，ev.preventDefault(); //阻止默认行为

jq 可以通过 $(父元素).on('事件名','管理的子元素',function())，这是jq 特有的事件委托，它可以监听未来事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>123</li>
        <li>1231</li>
        <li>1232</li>
        <li>1233</li>
        <li>1234</li>
        <li>1235</li>
        

    </ul>
    <button>新增li</button>
</body>
<script src="https://www.bootcdn.cn/ "></script>
<script>
    var n =1
    $('button').on('click',function(){
        n++
        $('ul').append(`<li>我是新增的li:${n}</li>`)
    })
    $('ul').on('click','li',function(){
        console.log($(this).html())
    })
    
</script>
</html>