JQuery

Posted 丶不学无术丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery相关的知识,希望对你有一定的参考价值。

jQuery笔记

 jQuery 一个javascript库  极大的简化了javascript编程  

   功能: HEML元素的选取和操作,CSS操作,html时间函数,javascript特效和动画, HTML DOM的遍历和修改,  AJAX

引用:<script src="jquery-1.10.2.min.js"></script>

您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript"
HTML5 中,不必那样做了。JavaScript HTML5 以及所有现代浏览器中的默认脚本语言!

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>第一个简单的jQuery程序</title>

    <style type="text/css">

        div{

            padding:8px 0px;

            font-size:12px;

            text-align:center;

            border:solid 1px #888;

        }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">

            $(document).ready(function() {

                          $("div").html("您好!通过慕课网学习jQuery才是最佳的途径。");

            });

    </script>

</head>

<body>

    <div></div>

</body>

</html>

我们要获取页面上id为imooc的p元素,然后给这个文本节点增加一段文字:“您好!通过慕课网学习jQuery才是最佳的途径”,并且让文字颜色变成红色。

<script type="text/javascript">

        window.onload = function(){

            // 通过原生JS语法获取idimooc1的元素p

var p = document.getElementById(‘imooc1‘);

            // 将元素phtml中内容改变

p.innerHTML = ‘P1:您好!通过慕课网学习jQuery才是最佳的途径‘;

            // 将元素p的内容颜色改为红色

p.style.color = ‘red‘;

     }

</script>

 

   

    <!-- 使用jQuery语法 -->

    <script type="text/javascript">

        $(document).ready(function() {

            /**

             * 通过jQuery语法获取idimooc2的元素获得一个jQuery对象

             * 调用该对象的html()方法进行更改内容

             * 调用该对象的css()方法进行更改颜色样式

             */   

            var $p = $(‘#imooc2‘);

            $p.html(‘P2:您好!通过慕课网学习jQuery才是最佳的途径‘).css(‘color‘,‘red‘);

        });

</script>

 

var $div = $(‘div‘) //jQuery对象

var div = $div[0] //转化成DOM对象

div.style.color = ‘red‘ //操作dom对象的属性

 

var div = document.getElementsByTagName(‘div‘); //dom对象

var $div = $(div); //jQuery对象

var $first = $div.first(); //找到第一个div元素

$first.css(‘color‘, ‘red‘); //给第一个元素设置颜色

 

Id选择器  : $(“#id”)

类选择器   $(“.class”)

所有选择器: $(“*”)

当前HTML元素:$(“this”)

第一个p标签元素: $(“p:first”)

第一个ul下的第一个li标签元素:$(“ul lifirst”)

每个ul下的第一个li标签元素 :$(“ul lifirst-child”)

选择所有type=button”的《input》和《button》元素:$(“button”)

jQuery事件:鼠标:click    dblclick?    mouseenter(进入)    mouseleave(离开) mouseout mouseover   

键盘: keypress     keydown    keyup

表单: submit   change    focus    blur

文档: load    resize    scroll    unload

$("input").blur(function(){ $(this).css("background-color","#ffffff"); });

 

 

jQuery效果: 隐藏和显示

Hide()       show()

$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });

jQuery toggle()

通过 jQuery,您可以使用 toggle() 方法来切换 hide() show() 方法。

jQuery Fading 方法

jQuery 拥有下面四种 fade 方法:

  • fadeIn()    淡入
  • fadeOut()    淡出
  • fadeToggle()     切换
  • fadeTo()  渐变不透明度  毫秒数+0-1中的不透明度

 $("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

 });

jQuery 滑动方法

通过 jQuery,您可以在元素上创建滑动效果。

slideDown()

slideUp()

slideToggle()

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法:$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow""fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

$(“button”).click(function(){

$(“div”).animate({

left:’250px’,

opacity:’0.5’,

height:’150px’,

width:’150px’

});

});

 

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

DOM = Document Object Model(文档对象模型)

DOM 定义访问 HTML XML 文档的标准:

三个简单实用的用于 DOM 操作的 jQuery 方法:

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

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

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

jQuery attr() 方法用于获取属性值。

$("button").click(function(){

 alert($("#runoob").attr("href"));      });

jQuery 添加元素:

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

jQuery 删除元素:

remove(); -删除被选中的元素及其子元素

empty()-从被选元素中删除子元素

jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

如需设置多个 CSS 属性,请使用如下语法:

css("propertyname","value");

css({"propertyname":"value","propertyname":"value",...});

jQuery:  parent()  向上  直接父类

 parents()        所有父类

 child()     子类

 

以上是关于JQuery的主要内容,如果未能解决你的问题,请参考以下文章

JQueryJQuery基本操作

jQueryjquery插件封装

jQueryjQuery与Ajax的应用

jQueryjquery.metadata.js验证失效

Jqueryjquery刷新页面(局部及全页面刷新)

JqueryjQuery获取URL參数的两种方法