jQuery2 jQueryHTML和插件

一字狂~

已于 2023-08-02 09:10:46 修改

阅读量458

点赞数

分类专栏： JQuery 文章标签： jquery

于 2023-08-01 19:27:01 首次发布

本文链接：https://blog.csdn.net/weixin_53560514/article/details/132037817

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery2jQueryHTML和插件

一，jQuery事件机制
二，html的设置和捕获
三，对html的页面尺寸的操作
四，添加元素和删除元素
五，jQuery.color
六，懒加载
七，Eacharts
八，jQuery.ui

一，jQuery事件机制

<style>
    #box{
      height: 200px;
        background-color: red;
        width: 200px;
    }
</style>
<body>
    <div id="box"></div>
    <input type="text" id="ipt">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

1.bind()、on()方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

$("#box").bind("mouseover",function(){
    $(this).css("width","400px")
})
$("#box").on({
    mouseover:function(){
        $(this).css("background","green")
    }
})

2.bind()、on()方法的区别

（1）参数

一、bind有三个参数，分别是event，data，function，也就是事件，额外要添加的数据以及执行函数
二、on有四个参数，分别是event，selector, data，function 分别是事件，选择器，额外添加的数据和执行函数。

1.on 可以多一个selector 参数,可以给子元素添加事件
bind 只能给自己添加事件
2. 使用on添加的事件比如给自己子集使用类选择器添加的 ,后来创建的含有这个类名的子节点也有事件
3.on是jquery推荐使用的，bind是从某个版本开始就不推荐使用的

（2）事件冒泡

事件冒泡也是委托事件的原型，事件委托就是子类的事情委托给父类的去做
最直观的区别就是on绑定比bind绑定多一个参数’childSelector’
childSelector ：可选规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

bind只能给符合条件的元素本身添加事件
on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件

3.delegate()方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$("div").delegate("p","click",function(){
$("p").css("background-color","pink");
});

4.事件对象event

event对象有以下属性
type：事件类型，比如click。
which：触发该事件的鼠标按钮或键盘的键。
target：事件发生的初始对象。
data：传入事件对象的数据。
pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角

$("#ipt").on("keydown", function(event){
console.log("ceshi");
console.log(event);
//阻止默认事件
event.preventDefault()

//阻止冒泡事件
event.stopPropagation()
console.log(event.keyCode);

}

5. each()方法为每个匹配元素规定要运行的函数

$("ul li").bind("click",function(){
    $(this).each(function(){
        console.log($(this));

    })
})

6.Query.each(指定的对象和数租，回调函数)==$.each()函数用于遍历指定的对象和数组

var arr=[1,2,3]
jQuery.each(arr,function(index,item){
    console.log(index);
    console.log(item);
})
var obj = {
        name: 'zs',
        age: 18
    }

$.each(obj,function(key,value){
    console.log(key);
    console.log(value);
})

二，html的设置和捕获

<style>
    #box{
      height: 200px;
        background-color: red;
        width: 200px;
    }
</style>
<body>
    <div id="box"></div>
    <input type="text" id="ipt">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div id="box">
        <header>我是头部</header>
        <p>我是p标签</p>
    </div>
    <button id="btn">btn</button>

    <input type="text" id="ipt" class="input" name="name" name_1="name_1">

</body>

1.html() - 设置或返回所选元素的内容（包括 HTML 标记）innerHTML

console.log($("#box").html());
$("#btn").on("click",function(){
    $("#box").html('<a href="#"> 百度 </a>' )
  
})

2. text() - 设置或返回所选元素的文本内容

3. val()-设置或者返回表单字段的值

4. attr(),prop()方法用于获取和返回属性值

$("input").attr('id')
$("input").prop('id')
$('input').prop('name_1')
$('input').attr('name_1')
$('input').attr('disabled')
$('input').prop('disabled')
   // attr()  prop()区别
    // 1、prop() 不能获取或者设置自定义属性
    // 2、checked, selected 或者 disabled

三，对html的页面尺寸的操作

(1)
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
(2)
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
（3）
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
(4）
scrollTop() 方法设置或者返回滚动条被卷去的元素的高度
scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度

四，添加元素和删除元素

（1） append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）
（2） prepend() 方法在被选元素的开头插入内容。（仍然在该元素的内部）
（3） after() 方法在被选元素之后插入内容。(在元素外面)
（4） before() 方法在被选元素之前插入内容。(在元素外面)
（5） empty()把子元素删除掉了。本身没有删除掉。所以本身占位置
（6） remove()把自己和子元素都删除掉了。本身已删除掉。所以不占位置

五，jQuery.color

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/jquery.color.js"></script>

</head>

六，懒加载

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/jquery.lazyload.min.js"></script>
</head>

 $(function () {
          $("img").lazyload({
            event: 'click',
            effect: 'fadeIn'
        });
       });

七，Eacharts

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

  // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

八，jQuery.ui

head>
    <meta charset="utf-8">
    <title>jQuery UI 菜单（Menu） - 默认功能</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  
    
    <style>
        .ui-menu {
            width: 150px;
        }
    </style>
</head>

<body>

    <p>日期：<input type="text" id="datepicker"></p>
    <ul id="menu">
        <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
        <li><a href="#">Ada</a></li>
        <li><a href="#">Adamsville</a></li>
        <li><a href="#">Addyston</a></li>
        <li>
            <a href="#">Delphi</a>
            <ul>
                <li class="ui-state-disabled"><a href="#">Ada</a></li>
                <li><a href="#">Saarland</a></li>
                <li><a href="#">Salzburg</a></li>
            </ul>
        </li>
        <li><a href="#">Saarland</a></li>
        <li>
            <a href="#">Salzburg</a>
            <ul>
                <li>
                    <a href="#">Delphi</a>
                    <ul>
                        <li><a href="#">Ada</a></li>
                        <li><a href="#">Saarland</a></li>
                        <li><a href="#">Salzburg</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Delphi</a>
                    <ul>
                        <li><a href="#">Ada</a></li>
                        <li><a href="#">Saarland</a></li>
                        <li><a href="#">Salzburg</a></li>
                    </ul>
                </li>
                <li><a href="#">Perch</a></li>
            </ul>
        </li>
        <li class="ui-state-disabled"><a href="#">Amesville</a></li>
    </ul>
   
  

</body>

 $(function () {
       $("#datepicker").datepicker();
   });
   $(function () {
       $("#menu").menu();
   });

一字狂~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery2 jQueryHTML和插件

childSelector ：可选规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件。（2） prepend() 方法在被选元素的开头插入内容。（1） append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
复制链接

扫一扫

专栏目录