Spring 框架 的特点

它是一个开源的企业应用开发框架,AOP实现,灵活应变,Web集成,低耦合等 通过Java反射技术创建对象 通过配置文件(xml)组装对象

使用Spring 框架 #01 –通过配置文件获取对象

** 在这之前,我们先来了解一下 什么是 Spring IoC。 **

Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想。在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部直接控制。如何理解好Ioc呢?理解好Ioc的关键是要明确“谁控制谁,控制什么,为何是反转(有反转就应该有正转了),哪些方面反转了”,那我们来深入分析一下:

  ●谁控制谁,控制什么:传统Java SE程序设计,我们直接在对象内部通过new进行创建对象,是程序主动去创建依赖对象;而IoC是有专门一个容器来创建这些对象,即由Ioc容器来控制对 象的创建;谁控制谁?当然是IoC 容器控制了对象;控制什么?那就是主要控制了外部资源获取(不只是对象包括比如文件等)。

  ●为何是反转,哪些方面反转了:有反转就有正转,传统应用程序是由我们自己在对象中主动控制去直接获取依赖对象,也就是正转;而反转则是由容器来帮忙创建及注入依赖对象;为何是反转?因为由容器帮我们查找及注入依赖对象,对象只是被动的接受依赖对象,所以是反转;哪些方面反转了?依赖对象的获取被反转了。

  用图例说明一下,传统程序设计如图2-1,都是主动去创建相关对象然后再组合起来:

  当有了IoC/DI的容器后,在客户端类中不再主动去创建这些对象了,如图2-2所示:

图1-2有IoC/DI容器后程序结构示意图

引用自 https://blog.csdn.net/qq_22654611/article/details/52606960

接下来我们将列举出IOC创建出的对象和传统方式的不同之处。

/**
 * Phone类
 * @author i_apples
 *
 */
public class Phone {
    private Card card;

    public Phone(String num){
        this,card.
    }

    public void setCard(Card card) {
        this.card = card;
    }

    public void call(int num){
            System.out.println(card.getNumber()+"正在拨号"+num);
    }
}

/**
 * Card类
 * @author i_apples
 *
 */
public class Card {
    private int number;

    public int getNum() {
        return this.number;
    }
}

我们打电话首先是需要一个手机

Phone phone = new Phone();

** 然后我们需要一张卡**

Card card = new Card(6677012);

** 接着我们需要把卡装入手机,并开始拨号 **

phone.setCard(card);
phone.call(110);

** 结果:6677012 正在拨号 110 **

我们的关注点都放在了手机和sim卡的创建上,如果我们每次都需要打电话,难道每次都需要新买手机然后设置手机卡吗?想想在现实生活中,2000我们小学生时代还没有手机,当时打电话给父母只能去小卖部租电话打,所以那时我们打电话并不需要关心用的是谁的手机号吗打出去的,我们的目的只是和父母能正常通话而已,

我们在抽象到java中,我们每次去打电话都是去的同一家小卖部【IOC容器池】,每次也都是向同一个老板要的手机(取出的对象地址都是一样的)

小卖部 就是 Spring 中的配置对象场所,通常是.xml文件,也是 IOC容器池

而小卖部老板的手机就是 JavaBean 对象,可以理解成设置好属性的对象

** 现在我们看看和之前的传统方式有什么不同**

1.创建配置对象池


2.往对象池里面创建对象

3.引用对象池

ApplicationContext context = new ClassPathXmlApplicationContext("applicationConfig.xml");

4.在对象池里面取出对象(这里的对象可以取无数个)

Phone phone = context.getBean("phone",Phone.class); //根据对象池Bean的ID进行引用,并指明引用对象的类型
Card card = context.getBean("card",Card.class);

完整代码

ApplicationContext context = new ClassPathXmlApplicationContext("applicationConfig.xml");

Card card = context.getBean("card",Card.class);
System.out.print(card.getNumber());

** 结果:13534675892 **

在这里,我们直接在对象池里获取了Card的一个实例,直接就带有了属性。这个属性配置是在对象池里完成的(Bean中的constructor-arg 中的 value),这种方式叫做构造注入

** 注:constructor-arg 是指有参构造的参数列表 **

除了构造注入,通常还可以使用setter注入(调用set方法)

**在此之前 我们把上面的Card类加入set方法。 **

/**
 * Card类
 * @author i_apples
 *
 */

public class Card {
    private int number;

    public int getNum() {
        return this.number;
    }

    public void setNumber(int number) {
    this.number = number;
    }
}

**加入完set方法之后,我们在对象池做以下改动: **

** 接下来我们获取这个实体 **

ApplicationContext context = new ClassPathXmlApplicationContext("applicationConfig.xml");

Card card = context.getBean("card",Card.class);
System.out.print(card.getNumber());

** 结果:123456789 **

Over, 谢谢观看

jQuery事件冒泡

** 当我点击某个div时想调用一个方法是没问题的**

//忽略其他标签和导包
<div id="div2"></div>


    $('#div2').on('click',function(){
        alert('成功的点击了div');
    })

效果:

但是如果我往这个div放一个a标签,并且我希望点击a标签的时候触发我的方法

<div id="div2">
    <a href=";">事件1</a>
</div>

        $('#div_01').on('click',function(){
            alert('你成功的点击了div')
        })

    var show = function(){
        alert('你成功的点击了a标签');
    }

效果:

我们的原意是只执行a标签触发的事件,而不希望触发div(父类)的事件,这种类型传递的情况我们称之为 事件冒泡 也就是说,当点击了某个父容器的子元素时,会先执行子容器所包含的事件,然后逐步向上寻找父容器包含的事件,直到所有事件运行结束,这时候我们需要:

stopPropagation() 方法阻止事件传递

** 我们只需要在子元素绑定的事件 稍作修改:**

var show = function(e){
        event.stopPropagation();        //event指的是触发事件的对象
        alert('你成功的点击了a标签');
    }

** 除了stopPropagation() 可以阻止事件传递外,还可以用preventDefault()方法阻止元素自带的事件,如:a标签href的连接跳转,form中input-submit的表单提交等。和上述方法使用一样,在事件中加上以下代码: **

event.preventDefault();     //阻止元素本身自带的事件

-x–x————x————x——–x———x—

动画效果

Jquery自带动画(封装了一些常用效果)

show()          hide()      闪入,闪出
fadeIn()        fadeOut()   淡入,淡出
slideDown()     slideUp()   下拉展开,收缩

如果想设置动画时间,在方法里填入时间即可;如

:show(2000)     //2秒动画时间

** juqery除了自带的方法外,还可以自定义动画效果,和设置css()方法一样: **

('.div').animate({
'width':'300px',
'height':'300px',
'border-radius':'100px'
});
//animate(事件参数,动画速度,要使用的动画 ,完成时执行的函数)

如果需要设定该动画的播放时间,在方法后加上时间即可

('.div').animate({
'width':'300px',
'height':'300px',
'border-radius':'100px'
},2000);    //2秒动画时间

有了这些,我们就能利用以上方法做一个简单的图片轮播效果

    <div>
    <p class="images"></p>
    <div>
        <img src="img/00D57734.png" />
        <img src="img/00F039E1.png" />
        <img src="img/0A44DF0D.png" />
        <img src="img/0B18ADE8.png" />
        <img src="img/0BB96499.png" />
    </div>
</div>

    ('.images').next().css({
        'position':'relative',
        'width':'150px',
        'height':'150px',
        'border':'1px solid red'
    })('.images').next().children('img').css({
        'position':'absolute',
        'width':'100%',
        'height':'100%',
        'display':'none'
    })

    ('.images').on('click',function(){
        window.setInterval(function(){  //每隔2秒系统会自动调用次方法
            varone = ('.images').next().find('img').eq(0);
            vartwo = one.next('img');
            console.log(one);
            one.fadeOut(2000);two.fadeIn(2000);
            one.delay(2000).closest('div').append(one);//delay设置延迟时间
        },2050)
    })

小结

focus 获得焦点
blur 失去焦点
event.stopPropagation 取消子元素相应给父元素(事件传递)
event.preventDefault 阻止元素自带的默认行为(多数应用于a标签跳转 submit提交表单)
closest(‘xxx’) 从本身开始,逐级向上级搜索匹配的元素,并返回最先匹配(最靠近该元素)的祖先元素
eq(index) 返回带有被选元素的指定索引号的元素(索引0开始)
nth-child 属性选择器。和eq()不同的是,它的索引是从1开始

1、nth-child(N):下标从1开始;eq(N):下标从0开始

2、nth-child(N):选择多个元素;eq(N):选择一个元素

3、nth-child(N):在一个文档树种中,选择各层排行第N的所有元素。
例:nth-child(2):包括父辈的老二,兄弟的老二,子孙的老二,下图的绿色部分
qe(N) 与nth-child(N)的区别
eq(N):在一个文档树种中,前序排列后,选择第N个元素及其所有子元素

eq通常情况下可以在任意场合使用
//寻找ID为 content 下索引为0的 P 标签

$('#content&gt;p:eq(0)')

但是某些地方经试验不能使用,如:

/*在ID为 content 下寻找索引为0的 P 标签*/
('#content').find('p:eq(0)')       //错误写法 不会报错('#content').find('p').eq(0)       //正确写法 

绑定事件

123

导入jquery

        ('#btn').click(function () {(this).append('<p>绑定事件</p>');
        });

    点击p标签123,触发事件给桌面添加<p>绑定事件</p>

事件处理

事件绑定 通过直接方法绑定
(选择器).事件名()
通过方法名绑定
(选择器).on(事件类型,[选择器],[参数],方法);
事件移除
(选择器).off(事件类型,[选择器],方法);
事件触发
(选择器).trigger(事件类型,[参数]);

动画

show() 显示隐藏的元素
hide() 隐藏显示的元素
fadeIn() 元素从透明变为不透明
fadeOut() 元素从不透明变为透明
slideDown() 元素高度逐渐变大
slideUp() 元素高度逐渐变小

    <div style="width:400px;height: 400px;background-color: red">

    </div>



        // 显示
        ('input:eq(0)').on('click',function(){('div').show(1000);
        });
        // 隐藏
        ('input:eq(1)').on('click',function(){('div').hide(1000);
        });


        // 淡入
        ('input:eq(2)').on('click',function(){('div').fadeIn(2000);
        });
        // 淡出
        ('input:eq(3)').on('click',function(){('div').fadeOut(2000);
        });

        // 展开
        ('input:eq(4)').on('click',function(){('div').slideDown(2000);
        });
        // 折叠
        ('input:eq(5)').on('click',function(){('div').slideUp(2000);
        });

默认功能
可用于按钮的标记实例:一个 button 元素,一个类型为 submit 的 input 元素和一个锚。

jQuery UI 按钮(Button) – 默认功能

(function() {( “input[type=submit], a, button” )
.button()
.click(function( event ) {
event.preventDefault();
});
});

一个锚

复选框
通过 button 部件把复选框显示为切换按钮样式。与复选框相关的 label 元素作为按钮文本。
本实例通过在一个公共的容器上调用 .buttonset(),演示了三个显示为按钮样式的复选框。

jQuery UI 按钮(Button) – 复选框

(function() {( “#check” ).button();
$( “#format” ).buttonset();
});

#format { margin-top: 2em; }



图标
一些带有文本和图标的各种组合的按钮

jQuery UI 按钮(Button) – 图标

(function() {( “button:first” ).button({
icons: {
primary: “ui-icon-locked”
},
text: false
}).next().button({
icons: {
primary: “ui-icon-locked”
}
}).next().button({
icons: {
primary: “ui-icon-gear”,
secondary: “ui-icon-triangle-1-s”
}
}).next().button({
icons: {
primary: “ui-icon-gear”,
secondary: “ui-icon-triangle-1-s”
},
text: false
});
});




单选
三个单选按钮转变为一套按钮。

jQuery UI 按钮(Button) – 单选

(function() {( “#radio” ).buttonset();
});



分割按钮

jQuery UI 按钮(Button) – 分割按钮

.ui-menu { position: absolute; width: 100px; }

(function() {( “#rerun” )
.button()
.click(function() {
alert( “Running the last action” );
})
.next()
.button({
text: false,
icons: {
primary: “ui-icon-triangle-1-s”
}
})
.click(function() {
var menu = ( this ).parent().next().show().position({
my: “left top”,
at: “left bottom”,
of: this
});
( document ).one( “click”, function() {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});


工具栏
一个多媒体播放器的工具栏。请看基础的标记:一些 button 元素,Shuffle 按钮是一个类型为 checkbox 的 input,Repeat 选项是三个类型为 radio 的 input。

jQuery UI 按钮(Button) – 工具栏

#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
*+html #toolbar {
display: inline;
}

(function() {( “#beginning” ).button({
text: false,
icons: {
primary: “ui-icon-seek-start”
}
});
( “#rewind” ).button({
text: false,
icons: {
primary: “ui-icon-seek-prev”
}
});
( “#play” ).button({
text: false,
icons: {
primary: “ui-icon-play”
}
})
.click(function() {
var options;
if ( ( this ).text() === “play” ) {
options = {
label: “pause”,
icons: {
primary: “ui-icon-pause”
}
};
} else {
options = {
label: “play”,
icons: {
primary: “ui-icon-play”
}
};
}
( this ).button( “option”, options );
});
( “#stop” ).button({
text: false,
icons: {
primary: “ui-icon-stop”
}
})
.click(function() {
( “#play” ).button( “option”, {
label: “play”,
icons: {
primary: “ui-icon-play”
}
});
});
( “#forward” ).button({
text: false,
icons: {
primary: “ui-icon-seek-next”
}
});
( “#end” ).button({
text: false,
icons: {
primary: “ui-icon-seek-end”
}
});
( “#shuffle” ).button();( “#repeat” ).buttonset();
});










jQuery 动画 – animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法:
(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用;它把

<

div> 元素移动到左边,直到 left 属性等于 250 像素为止:
实例(“button”).click(function(){
(“div”).animate({left:’250px’});
});
提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
jQuery animate() – 操作多个属性
请注意,生成动画的过程中可同时使用多个属性:
实例
(“button”).click(function(){
(“div”).animate({
left:’250px’,
opacity:’0.5′,
height:’150px’,
width:’150px’
});
});

提示:可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() – 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
实例(“button”).click(function(){
(“div”).animate({
left:’250px’,
height:’+=150px’,
width:’+=150px’
});
});

jQuery animate() – 使用预定义的值
您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”:
实例(“button”).click(function(){
(“div”).animate({
height:’toggle’
});
});

jQuery animate() – 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
隐藏,如果您希望在彼此之后执行不同的动画,那么我们要利用队列功能:(“button”).click(function(){
var div=(“div”);
div.animate({height:’300px’,opacity:’0.4′},”slow”);
div.animate({width:’300px’,opacity:’0.8′},”slow”);
div.animate({height:’100px’,opacity:’0.4′},”slow”);
div.animate({width:’100px’,opacity:’0.8′},”slow”);
});

实例 2
下面的例子把

<

div> 元素移动到右边,然后增加文本的字号:(“button”).click(function(){
var div=$(“div”);
div.animate({left:’100px’},”slow”);
div.animate({fontSize:’3em’},”slow”);
});

添加节点

你喜欢的水果

    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>西瓜</li>
    </ul>
    <textarea cols="50" rows="5"></textarea>

    导入jQuery




        ('#btn-publish').click(function() {
            //获得文本域中内容
            var content =('textarea').val();
            //添加到ul中
            //1.创建一个li元素
            var li=('<li>' + content + '</li>');
            //2.添加li
            //在ul中添加里元素
//          ('ul').append(li);
            //将li添加到ul中
    //      li.appendTo(('ul'));
        //在ul中 添加里到第一个位置
    //  ('ul').prepend(li);
    //将li添加到ul第一个
//      li.prependTo(('ul'));

        //添加同级元素
        //在ul的最后一个li后面添加一个li
    //  ('li:last').after(li);
    //将一个li添加到最后一个li的后面
    li.insertAfter(('li:last'));

        });



### 删除节点

<ul>
        <li>删除1</li>
        <li>删除2</li>
        <li>删除3</li>
        <li>删除4</li>
        <li>删除5</li>
        <li>删除6</li>

    </ul>


<table border="1">
        <thead>
            <tr>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>联系方式</th>
                <th>操作</th>
            </tr>
        </thead>



        <tbody>
            <tr id="template">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><a href=";">删除</a></td>
            </tr>
            <tr>
                <td>EX0001</td>
                <td>张萨满</td>
                <td>男</td>
                <td>13754673646</td>
                <td><a href=";">删除</a></td>
            </tr>
            <tr>
                <td>EX0002</td>
                <td>王丹凤</td>
                <td>女</td>
                <td>13747588897</td>
                <td><a href=";">删除</a></td>
            </tr>
            <tr>
                <td>EX0003</td>
                <td>李师傅</td>
                <td>男</td>
                <td>13798767876</td>
                <td><a href=";">删除</a></td>
            </tr>

        </tbody>

    </table>
        //导入jQuery

// (‘li’).click(function() {
// 点击谁就删除谁 俗称删除自己
//
(this).remove();
// });

        ('li').click(function () {
//清楚标签的内部内容(this).empty();
        });

    ('table a').click(function () {
        //提示
        var result =confirm('是否确认删除');
        console.log(result);
        if (result) {
//(this).remove();
        (this).parent().parent().remove();

        }

        });('#btn-copyadd').click(function  () {

            //复制一行表格
            var tr =('#template').clone(true);//填写true可以把事件给带过来
            tr.css('display','table-row');
            //移除属性tr.removeAttr('id')
            ('tbody').append(tr);

        });

实例
本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景:

( document ).bind(“click”, function( e ) {( e.target ).closest(“li”).toggleClass(“hilight”);
});
亲自试一试
定义和用法
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。

语法
.closest(selector)
参数 描述
selector 字符串值,包含匹配元素的选择器表达式。
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要:

.closest() .parents()
从当前元素开始 从父元素开始
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象 返回包含零个、一个或多个元素的 jQuery 对象
请看下面的 HTML 片段:

  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III

例子 1
假设我们执行一个从项目 A 开始的对

<

ul> 元素的搜索:

$(‘li.item-a’).closest(‘ul’).css(‘background-color’, ‘red’);
亲自试一试
这会改变 level-2

<

ul> 的颜色,这是因为当向上遍历 DOM 树时会第一个遇到该元素。

例子 2
假设我们搜索的是

  • 元素:

    (‘li.item-a’).closest(‘li’).css(‘background-color’, ‘red’);
    亲自试一试
    这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前,.closest() 方法会从 li 元素本身开始搜索,直到选择器匹配项目 A 为止。

    例子 3
    我们可以传递 DOM 元素作为 context,在其中搜索最接近的元素。

    var listItemII = document.getElementById(‘ii’);(‘li.item-a’).closest(‘ul’, listItemII).css(‘background-color’, ‘red’);
    $(‘li.item-a’).closest(‘#one’, listItemII).css(‘background-color’, ‘green’);
    亲自试一试
    以上代码会改变 level-2

    <

    ul> 的颜色,因为它既是列表项 A 的第一个

    <

    ul> 祖先,同时也是列表项 II 的后代。它不会改变 level-1

    <

    ul> 的颜色,因为它不是 list item II 的后代。

  • 实例
    查找每个 b 元素的所有父元素:

    (“b”).parents()
    亲自试一试
    定义和用法
    parents() 获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。

    .parents(selector)
    参数 描述
    selector 字符串值,包含用于匹配元素的选择器表达式。
    详细说明
    如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。.parents() 和 .parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。

    该方法接受可选的选择器表达式,与我们向() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。

    请思考这个带有基本的嵌套列表的页面:

    • I
    • II
      • A
      • B
        • 1
        • 2
        • 3
      • C
    • III

    如果我们从项目 A 开始,则可找到其祖先元素:

    $(‘li.item-a’).parents().css(‘background-color’, ‘red’);
    亲自试一试
    此次调用的结果是,level-2 列表、项目 II 以及 level-1 列表等元素(沿 DOM 树一路向上直到 )设置红色背景。由于我们未应用选择器表达式,父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。由于我们未应用选择器表达式,所有祖先元素都是返回的 jQuery 对象的组成部分。如果已应用选择器,则只会包含其中的匹配项目。

    jQuery简介

    jQuery由美国人John Resig于2006年创建
    jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的 封装
    它的设计思想是write less,do more

    jQuery的用途

    访问和操作DOM元素
    控制页面样式
    对页面事件进行处理
    扩展新的jQuery插件
    与Ajax技术完美结合

    jQuery的优势

    体积小,压缩后只有100KB左右
    强大的选择器
    出色的DOM封装
    可靠的事件处理机制
    出色的浏览器兼容性
    使用隐式迭代简化编程
    丰富的插件支持

    jQuery可以从官网下载

    地址:http://jQuery.com/
    也可以直接用HBuilder创建javascript文件,创建时选择导入jQuery,
    2.0和2.0以后不能兼容IE8
    分为两个版本 开发版:完整无压缩版本,主要用于测试,学习和开发
    发布版:经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目

    jQuery的基本语句

    引入jQuery库文件

    将其放在的底部
    jQuery的执行时机:
    window.onload :必须等待网页中所有的内容加载完 毕后(包括图片、flash、视频等) 才能执行
    (document).ready():网页中所有DOM文档结构绘制完毕后即 刻执行,可能与DOM元素关联的内容 (图片、flash、视频等)并没有加载完():工程函数,将DOM对象转换为jQuery对象 例:给文本框设置边框
    1.(‘input’).css(‘border’,’1px solid red’);使用的是标签选择器
    2.var inputs = document.getElementsByTagName(‘input’);
    (inputs).css(‘border’,’1px solid red’);
    以上两句效果一样
    $(”).appendTo(document.body); 创建文本框

    将DOM对象转换成JQuery对象

    var userName = document.getElementById(‘userName’); //DOM对象
    var userName =(userName); //jQuery对象
    通过选择器直接获取包装后DOM的jQuery对象
    var userPass =(‘#password’); //jQuery对象

    jQuery对象转换为DOM对象

    var userName =(‘#userName’); //jQuery对象
    var userName = userName[0]; //DOM对象
    通过get方法获取DOM对象
    var
    userName = (‘#userName’); //jQuery对象
    var userName =
    userName.get(0); //DOM对象
    jQuery对象本身是个集合

    jQuery选择器:
    提供了强大的元素查找功能
    简化了在使用JavaScript获取元素的繁琐步骤
    和CSS样式选择器类似,学习简单

    jQuery选择器的分类:
    基本选择器 通过标签名,class和id属性来获取元素
    层次选择器 通过HTML的布局结构来获取元素。如:获取当前li的后一个元素
    过滤选择器 通过指定的过滤规则来选择元素。如:选择所有隐藏的元素

    基本选择器

    标签选择器 element 根据给定的标签名匹配元素
    (“h2”)选取 所有h2元素 类选择器 .class 根据给定的class匹配元素( “.title” )选取所有class为title的 元素
    ID选择器 #id 根据给定的id匹配元素 ( “#title” )选取id为title的元素
    并集选择器 selector1,selector2,…,se lectorN
    将每一个选择器匹配的元素 合并后一起返回
    ( “div,p,.title” )选取所有div、p 和拥有class为title的元素
    交集选择器 element.class或 element#id
    匹配指定class或id的某元素 或元素集合
    ( “h2.title” )选取所有拥有class 为title的h2元素
    全局选择器 * 匹配所有元素
    ( “*” )选取所有元素

    层次选择器

    后代选择器 ancestor descendant
    选取ancestor元素里的所有 descendant(后代)元素
    $( “#menu span” )选取#menu下的 元素
    子选择器 parent>child
    选取parent元素下的child(子) 元素
    $( “#menu>span” )选取#menu的子 元素
    相邻元素选择器 prev+next
    选取紧邻prev元素之后的next元

    ( “h2+dl” )选取紧邻

    <

    h2>元素之后 的同辈元素

    <

    dl>
    同辈元素选择器 prev~sibings
    选取prev元素之后的所有siblings 元素( “h2~dl” )选取

    <

    h2>元素之后所有 的同辈元素

    <

    dl>

    属性过滤选择器

    [attribute] 选取包含给定属性的元素 (“[href]”)选取含有href属性的元素
    [attribute=value]
    选取等于给定属性是某个 特定值的元素
    (“[href =’#’]”)选取href属性值为“#”的元素
    [attribute!=value]
    选取不等于给定属性是某 个特定值的元素
    (“[href !=’#’]”)选取href属性值不为“#”的元

    [attribute^=value]
    选取给定属性是以某些特 定值开始的元素
    (“[href^=’en’]”)选取href属性值以en开头的元

    [attribute=value]
    选取给定属性是以某些特 定值结尾的元素
    (“[href$=’.jpg’]”)选取href属性值以.jpg结尾的 元素
    [attribute=value]
    选取给定属性是以包含某 些值的元素
    $(“[href
    =’txt’]”)选取href属性值中含有txt的元

    [selector] [selector2] [selectorN]
    选取满足多个条件的复合 属性的元素
    $(“li[id][title=新闻要点]”)选取含有id属性和 title属性为新闻要点的

  • 元素

    点击那个选项就给那个选项变色

    导入jQuery
    script>

    .active{ color:red; }

    • 点击选项
    • 点击选项
    • 点击选项

    (‘li’).click(function){
    console.log(this);
    (this).addClass(‘active’).siblings().removeClass(‘active’);
    }

    //子选择器
    (‘ul>li’).css(‘background-color’,’gray’);(‘ul’).children().css(‘background-color’,’yellow’);
    //后代选择器
    (‘ul a’).css(‘font-family’,’隶书’);(‘ul’).find(‘a’).css(‘font-family’,’华文行楷’);

  • JavaQuery

    一.诞生时期

    由美国人John Resig于2006年创建

    二.原理

    基于 JavaScript,封装了许多js底层的方法。相对于JAVA对C的封装。原本处理某个业务:
    JS要写多行代码
    而jQuery只需要短短几行甚至一句话

    三.设计目的

    write less,do more。
    意思是少说话,多做事,用相对简洁的语句完成了许多复杂的操作

    四.已知作用范围

    1.操作DOM元素(HTML标签)

    2.可以像Js一样处理业务逻辑。(相对于升级版Js)

    3.操作Css属性(修改样式)

    五.优势

    1.小体积(压缩版只有100k左右)

    2.选择器。
    只要Html支持的选择器,Jquery都可以效仿。类选择器,id选择器,class选择器,后代选择器等等。书写语法:可以像js一样使用Docement.getElementById(‘name’)获取,可以用“$”获取:$(“#name”)
    需要注意的是:js和jquery引用对象是都单引号.

    3.操作Css属性(修改样式)

    <div class="title">
        <p>#标题1</p>
    </div>
    

    1).直接通过Jquery修改:

    $('.title&gt;p').css({
        'color':'red',  //此处的属性和值可以比作Map(键值对)。是为了避免出现关键字
    });
    

    2.通过js+jq修改:

    var className = document.getElementsByClassName('title');
    $(className).find('p').css({        //find:寻找元素,里面可以写 子类选择器等
        'color':'red',
    });
    

    六.用法实例

    比如我有这么一段代码:

        <form action="" method="post" class="form-content">
            <p><label><h3>一、请简述JAVA的三大特性</h3></label></p>
            <p></p>         
            <p></p>
        </form>
    
        <div class="title">
            <p>#标题1</p>
        </div>
        //加载完HTML的Document对象开始导入并执行jQuery,需要避免放在头部分中
    
            `````代码在下方
    

    1.工厂方法【$(选择器)】;将Html里的doument装换为jQuery对象

    var temp1 = document.getElementsByClassName('title');
    console.log(temp1);
    var temp2 = $('.title');
    console.log(temp2);
    

    获取到的信息如下图所示

    前者为JS获取的Document对象
    而后者则为jQuery对象(返回数组),length:1 代表数组长度为1。

    2.了解了以上一点,那么h5的任意Document对象都可以转换为jQuery对象
    示例

    //通过js获取对象后包装成jQuery对象
    var temp1 = document.getElementsByClassName('title');
    var jQueryEntity =(temp1);
    //直接用选择器获取然后装换成jQuery对象:
    console.log($('.title'));
    

    3.当然,jQuery对象也可以装换回DOM对象
    示例
    var jQueryEntity =(‘.title’);
    var domEntity = (jQueryEntity).get(0); //集合方式获取
    domEntity =
    (jQueryEntity)[0]; //数组下标方式获取

    七:强大的选择器

    注:引用自【老九学堂】

    过滤选择器