day28-jQuery01

1.jQuery基本介绍

  • jQuery的原理示意图

2.jQuery的基本开发步骤


    jQuery快速入门

        /**
         *使用dom编程
         * 1.代码比较麻烦
         * 2.document.getElementById("btn01")返回dom对象
         */
        //使用原生js+dom完成
        //当页面加载完毕后,就执行function
        // window.onload=function () {
        //     //1.先得到btn01的dom对象
        //     var btn01 = document.getElementById("btn01");
        //     //2.绑定点击事件
        //     btn01.onclick=function () {
        //         alert("hello,js")
        //     }
        // }

        //使用jquery完成
        //1.先引入jQuery文件
        //2.${function(){}} 等价于原生js的window.onload=function () {}
        //  即当页面加载完毕,就会执行function(){}
        $(function () {
            //1.先得到btn01这个对象(这里是jquery对象)
            //$btn01是一个jquery对象,其实就是对dom对象的一个包装
            //这时我们就可以使用jquery对象的方法,事件等
            //通过debug,我们可以发现jquery对象是数组对象
            //2.jquery中获取对象的方法是$("#id"),必须在id前有#号
            //3.在编程中,规定jquery对象的命名以$开头。非必须,但是约定
            var $btn01 = $("#btn01");
            //3.绑定事件
            $btn01.click(function () {
                alert("hello,jquery")
            })
        });

按钮1

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别:

  • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
  • JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

3.jQuery对象和DOM对象

什么是jQuery对象:

应用实例


    DOM对象转成jQuery对象

        window.onload = function () {
            //演示通过dom获取输入框的value
            var username = document.getElementById("username");
            alert("username value= " + username.value)
            //通过jquery对象来获取输入框的value
            //把username dom对象转成jquery对象
            var $username = $(username);
            //使用jquery的方法,来获取value
            alert("$username value= " + $username.val())
        }

用户名:

应用实例


    jQuery对象转成DOM对象

        window.onload = function () {
            //得到一个jquery对象
            var $username = $("#username");
            alert("$username value= " + $username.val())

            //把jquery对象-->dom对象
            //1.jquery是一个数组对象,封装了dom对象
            // 2.可以通过[index]或者.get(index)方法来来获取
            //3.一般来说index是0
            //方式一
            var username = $username[0];
            alert(username)//[object HTMLInputElement]
            //获取原生dom对象的值
            alert("username value= " + username.value)

            //方式二
            //提醒,在练习中,输出的提示信息尽量不同
            var username1 = $username.get(0);
            alert("username1 value~~~= " + username1.value)
        }

用户名:

4.jQuery选择器

应用实例-jQuery选择器使用特点


    jQuery选择器使用特点

        window.onload = function () {
            //var username = document.getElementById("username");
            //alert(username.value);//这里在控制台会抛出一个错误,后面的程序无法执行

            //如果是jQuery对象,获取的value
            //如果没有获取到,调用val()时,并不会报错,后面的程序可以执行
            var $username = $("#username");
            alert($username.val())//这里不会报错,会提示undefined
        }

用户名:

基本选择器是jQuery中最常见的选择器,也是最简单的选择器,它通过元素id,class和标签名来查找dom元素

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

基本选择器应用实例


    基本选择器应用实例

        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 60px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        $(function () {
            // 1. 改变id为one的元素的背景色为#0000FF
            $("#b1").click(
                function () {
                    //css() 方法设置或返回被选元素的一个或多个样式属性
                    $("#one").css("background", "#0000FF");
                })
            // 2. 改变class为mini的所有元素的背景色为#FF0033
            $("#b2").click(
                function () {
                    $(".mini").css("background", "#FF0033");
                }
            )
            // 3. 改变元素名为<div>的所有元素的背景色为#00FFFF
            $("#b3").click(
                function () {
                    $("div").css("background", "#00FFFF");
                })
            // 4. 改变所有元素的背景色为#00FF33
            $("#b4").click(
                function () {
                    $("*").css("background", "#00FF33");
                })
            // 5. 改变所有的<span>元素和id为two,class为.mini的元素的背景色为 #3399FF
            $("#b5").click(
                function () {
                    $("span,#two,.mini").css("background", "#3399FF");
                })
        })

div id 为 one
div id 为 two
div id 为 three
span one
span two

$("#id >.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

如果想通过dom元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器。

层次选择器应用实例


    层次选择器应用实例

        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        $(function () {
            //1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
            $("#b1").click(function () {
                $("body div").css("background", "#0000FF");
            })
            // 2. 改变 <body> 内子 <div> (第一层div)的背景色为 #FF0033
            $("#b2").click(function () {
                $("body > div").css("background", "#FF0033")
            })
            // 3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
            $("#b3").click(function () {
                $("#one + div").css("background", "#0000FF")
            })
            // 4. 改变 id 为 two 的元素 后面的所有兄弟<div> 的元素的背景色为 #0000FF
            $("#b4").click(function () {
                $("#two ~ div").css("background", "#0000FF")
            })
            // 5. 改变 id 为 two 的元素 所有兄弟<div> 元素的背景色为 #0000FF
            $("#b5").click(function () {
                $("#two").siblings("div").css("background", "#0000FF");
            })
        })

    div id 为 one

    div id 为 two

        id two01

        id two02

    div id 为 three

        id three01

Original: https://www.cnblogs.com/liyuelian/p/16942961.html
Author: liyuelian
Title: day28-jQuery01



相关阅读

Title: day11-多线程

  • 进程、线程介绍
  • Java中 线程的实现方式
  • Thread 类
  • Runnable 接口
  • Callable 接口
  • 线程相关的方法
  • 线程安全问题 – 同步技术

线程等待唤醒机制

  • 简单理解:进程就是正在运行的程序

随着处理器上的内核越来越多,大多数计算机现在的并行计算能力比以往任何时候都要好。

[En]

With more and more cores on processors, most computers are now better at parallel computing than ever before.

而一个线程,在一个时刻,只能运行在一个处理器核心上

试想一下,一个单线程程序,在运行时只能 使用一个处理器核心,那么再多的处理器核心加入也无法显著提升该程序的执行效率。

相反,如果程序使用多线程技术,并将计算逻辑分配给多个处理器核心,则将显著减少程序的处理时间,并随着添加更多处理器核心而变得更高效。

[En]

On the contrary, if the program uses multithreading technology and allocates computational logic to multiple processor cores, it will significantly reduce the processing time of the program and become more efficient as more processor cores are added.

总结:使用多线程可以提高程序的执行效率

1.继承 Thread 类

实现步骤

  • 定义一个类 MyThread 继承 Thread 类
  • 在 MyThread 类中重写 run() 方法
  • 创建 MyThread 类的对象
  • 启动线程

两个小问题

  • 为什么要重写 run() 方法? 因为 run() 是用来封装被线程执行的代码

run() 方法 和 start() 方法的区别?

run():封装线程执行的代码,直接调用,相当于普通方法的调用

2.实现 Runable 接口

  • Thread构造方法方法名说明Thread(Runnable target)分配一个新的Thread对象Thread(Runnable target, String name)分配一个新的Thread对象
  • 实现步骤
  • 定义一个类MyRunnable实现Runnable接口
  • 在MyRunnable类中重写run()方法
  • 创建MyRunnable类的对象
  • 创建Thread类的对象,把MyRunnable对象作为构造方法的参数
  • 启动线程

3.实现 Callable 接口

  • 方法介绍方法名说明V call()计算结果,如果无法计算结果,则抛出一个异常FutureTask(Callable 创建一个 FutureTask,一旦运行就执行给定的 Callable V get()如有必要,等待计算完成,然后获取其结果
  • 实现步骤
  • 定义一个类 MyCallable 实现 Callable 接口
  • 在 MyCallable 类中重写 call() 方法
  • 创建 MyCallable 类的对象
  • 创建Future的实现类 FutureTask 对象,把 MyCallable 对象作为构造方法的参数
  • 创建Thread类的对象,把 FutureTask 对象作为构造方法的参数
  • 启动线程
  • 再调用get方法,就可以获取线程结束之后的结果。

  • 实现Runnable、Callable接口

  • 好处: 扩展性强,实现该接口的同时还可以继承其他的类
  • 缺点: 编程相对复杂,不能直接使用Thread类中的方法
  • 继承Thread类
  • 好处: 编程比较简单,可以直接使用Thread类中的方法
  • 缺点: 可以扩展性较差,不能再继承其他的类

  • 代码演示

  • 代码演示

  • 线程调度

  • 两种调度方式
    • 分时调度模型:所有线程轮流使用 CPU 的使用权,平均分配每个线程占用 CPU 的时间片
    • 抢占式调度模型:优先让优先级高的线程使用 CPU,如果线程的优先级相同,那么会随机选择一个,优先级高的线程获取的 CPU 时间片相对多一些
  • Java使用的是抢占式调度模型
  • 随机性 假如计算机只有一个 CPU,那么 CPU 在某一个时刻只能执行一条指令,线程只有得到CPU时间片,也就是使用权,才可以执行指令。所以说多线程程序的执行是有随机性,因为谁抢到CPU的使用权是不一定的

优先级相关方法

代码演示

  • 案例需求 某电影院目前正在上映国产大片,共有100张票,而它有3个窗口卖票,请设计一个程序模拟该电影院卖票
  • 实现步骤
  • 定义一个类SellTicket实现Runnable接口,里面定义一个成员变量:private int tickets = 100;
  • 在SellTicket类中重写run()方法实现卖票,代码步骤如下
  • 判断票数大于0,就卖票,并告知是哪个窗口卖的
  • 卖了票之后,总票数要减1
  • 票卖没了,线程停止
  • 定义一个测试类SellTicketDemo,里面有main方法,代码步骤如下
  • 创建SellTicket类的对象
  • 创建三个Thread类的对象,把SellTicket对象作为构造方法的参数,并给出对应的窗口名称
  • 启动线程
  • 代码实现

虽然我们可以理解同步代码块和同步方法的锁对象问题,但是我们并没有直接看到在哪里加上了锁,在哪里释放了锁,为了更清晰的表达如何加锁和释放锁,JDK5以后提供了一个新的锁对象Lock

Lock是接口不能直接实例化,这里采用它的实现类ReentrantLock来实例化

  • ReentrantLock构造方法方法名说明ReentrantLock()创建一个ReentrantLock的实例
  • 加锁解锁方法方法名说明void lock()获得锁void unlock()释放锁
  • 代码演示

  • 概述 线程死锁是指由于两个或者多个线程互相持有对方所需要的资源,导致这些线程处于等待状态,无法前往执行

  • 什么情况下会产生死锁
  • 资源有限
  • 同步嵌套
  • 代码演示

  • 概述 生产者消费者模式是一个十分经典的多线程协作的模式,弄懂生产者消费者问题能够让我们对多线程编程的理解更加深刻。 所谓生产者消费者问题,实际上主要是包含了两类线程: 一类是生产者线程用于生产数据 一类是消费者线程用于消费数据 为了解耦生产者和消费者的关系,通常会采用共享的数据区域,就像是一个仓库 生产者生产数据之后直接放置在共享数据区中,并不需要关心消费者的行为 消费者只需要从共享数据区中去获取数据,并不需要关心生产者的行为

  • Object类的等待和唤醒方法方法名说明void wait()导致当前线程等待,直到另一个线程调用该对象的 notify()方法或 notifyAll()方法void notify()唤醒正在等待对象监视器的单个线程void notifyAll()唤醒正在等待对象监视器的所有线程

如有问题,请邮件联系!!!!

Original: https://www.cnblogs.com/sunyanh/p/16459492.html
Author: 秋树的足迹
Title: day11-多线程

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/222813/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

最近整理资源【免费获取】:   👉 程序员最新必读书单  | 👏 互联网各方向面试题下载 | ✌️计算机核心资源汇总