jquery与js的分裂与功底操作

一.什么是 jQuery

jQuery是一个JavaScript库,它经过包装原生的JavaScript函数获得1整套概念好的艺术。它的笔者是JohnResig,于200陆年制造的多少个开源项目,随着愈来愈多开发者的加入,jQuery已经济同盟并了JavaScript、CSS、DOM和Ajax于1体的有力功用。它能够用最少的代码,完毕越来越多复杂而艰巨的效应,从而赢得了开发者的赏识。

JQuery的帮助和益处:小巧、方便、功用强大。插件丰硕、开源、免费。

 

2.Jquery的功力和优势

 

jQuery
作为 JavaScript 封装的库,他的目标就是为着简化开发者使用
JavaScript。首要作用有以下几点:

一.像
CSS 这样访问和操作 DOM
2.改动 CSS 控制页面外观
叁.简化 JavaScript 代码操作
四.事件处理尤其简单
5.各样卡通效果使用方便
六.让 Ajax 技术更是完善
柒.基于 jQuery 大批量插件
八.机关扩大功效插件
jQuery 最大的优势,正是尤其的方便人民群众。比如效仿 CSS 获取 DOM,比原生的
JavaScript要有利太多。并且在多个 CSS
设置上的集中处理卓殊清爽,而最常用的 CSS
功效又包装到独门的章程,感觉卓殊有心。最首要的是 jQuery
的代码兼容性十分好,你不供给再三再四头疼着想念差异浏览器的包容难题。

好!以上都以网摘!

 

叁.上边是明日祥和的学习心得给我们大饱眼福

首先大家知道jquery是javascript的二个强劲的库,想用使用我们就务须先将他引进到js文件中上面是手续:

第壹大家下载叁个jquery文件,并把他在js页面包车型客车head区域写上如下的代码:

Ajax 1

这般就把jquery文件引进了,注意那些引进方法是置顶的!;

jquery的用法与js的大概类似;

*****************************************************************************************

说一下JQuery选择器

网摘:

一、JQuery选择器用于查找满意条件的要素,比如能够行使$(“#控件id”)来依照控件id获得控件的JQuery对象。也正是getElementByid。

二、$(“TagName”)来取得具有钦赐签名的JQuery对象,也正是getElementsByTagName。

三、CSS采纳器,同时选取具有有个别样式的多少个要素:

 
 $(“.text”).click(function(){alert($(this).text();)})

肆、多规格选取器:$(“p,div,span.menuitem”),同时采取p标签、div标签和拥有menuitem样式的span标签。

伍、层次选拔器:

(一)$(“div
li”)获取div下的持有li标签(后代,子、子的子标签…)。

(2)(“div
> li”)获取div下的直接li子标签.

**(3)$(“.menuitem

  • div”)获取样式名称为menuitem之后的第7个div标签。**

(4)$(“.menuitem
~ div”)获取样式名叫menuitem之后的保有div标签。

*********************************************************************************************

 

看一下操演:

body里面:

 <div id="aa">123</div>
        <div id="a1"></div>
        <div id="a1"></div>

        <input type="text" name="uid" id="asd" value="123" />
    </body>

 

1.找元素:

js:

 

//js找元素
    var a = document.getElementById("asd");
    //根据id找aa;

    var a = document.getElementsByClassName("a1");
//  根据名称来找
//    找到的是一个数组

document.getElementsByTagName("div");
//根据标签名字找

var a = document.getElementsByName("uid");
//用于表单元素

 

jquery:

 

//jq找元素:
var a = $("#aa")
//$用来选取元素,括号里面是根据什么类型找的
alert(a)
//输出的是object;找到jquery对象;

$a = $(".a1");
//  根据名称来找
alert(a.eq(2));
//输出的是object;加入eq()方法就是取到了jq的索引;取索引就用.eq();


var = $("div");
//根据标签名字找

$("[name=uid]");
//直接根据属性筛选找的,不是根据name

输出的项目:

Js中找成分,找的是DOM对象

Jquery中找目的,找的是Jquery对象

 

二.操作内容:

js:

 

//操作内容
//非表单元素的
alert(a.innerText);//获取文本
alert(a.innerHTML);//获取html代码
//表单元素
alert(a.value);//获取value值
a.value="hello";//更改value值

 

jquery:

 

//操作内容
//非表单元素的
alert(a.text());//获取文本
a.text("bbbbbbbbbbbbb")//更改文本内容
alert(a.html);//获取html代码,更改同上
//表单元素
alert(a.val());//获取表单的value值
alert(a.val("hello"));//更改表单value的值

 

三.操作属性:

js:

 

//操作属性
a.setAttribute("test","test");//设置属性 可添加,可修改
a.removeAttribute("test");//移除属性
alert(a.getAttribute("value"));//获取value值

 

jquery:

//操作属性
a.attr("test","test");//设置,添加属性;
a.removeAttr("test");//移除一个属性
alert(a.attr("value"));//给一个参数为获取,给两个为设置

//prop方法:也可以对属性进行操作,不容易出现BUG
a.prop("test","test");//添加属性
a.removeProp("test");//移除
alert(a.prop("test"));

 

四.操作样式

Ajax,js:

 

//操作样式;
//更改字体大小
//只能获取内联样式表
a.Style.fontSize = "30px";

 

jquery:

 

//操作样式
a.css("background-color","aqua");

//给两个参数为设置,给一个参数为获取

 

 

************************************************************************

网摘:

收获样式attr(“class”),设置样式attr(“class”,
“myclass”)。

日增样式addclass(“myclass”)。

移除样式removeclass(“myclass”)。

切换样式togleclass(“myclass”)。若是存在则去掉样式,即使不存在则拉长。

看清样式是不是存在:hasclass(“myclass”)。

************************************************************************

 

伍.集合操作元素

 js:

//统一操作元素属性
var d = document.getElementsByClassName("a1");

for(var i=0;i<d.length;i++)
{
    d[i].style.fontSize = "30px";
}

 

 

jquery:

 

//统一样式操作:
$(".a1").css("font-size","30px");

 

6.添加jquery事件:

多个全选的例证,用jquery来写万分便于

当点击全选的时候
 下边包车型客车选项都被选中,移除后,都不选中

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body>
<input type="checkbox" id="ck" />全选
        <br /><br />
        <input type="checkbox" class="ck" />
        <input type="checkbox" class="ck" />
        <input type="checkbox" class="ck" />
        <input type="checkbox" class="ck" />
        <input type="checkbox" class="ck" />
    </body>
</html>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js" >    </script>
<script>
//添加事件的方法:
$("#ck").click(function(){

//找到自身的选种状态
    //$(this)筛选本身,自身
$(".ck").prop("checked",$(this).prop("checked"));
//找到所有的$(".ck"),设置属性:.prop("checked",属性既是上面的自身状态)!
})
//找到ck;.click代表点击事件,没有方法的方法名=匿名函数


</script>

 

 

 

图:

Ajax 2Ajax 3

*****************************************************************

网摘:

JQuery中事件的绑定:$(“#btn”).bind(“click”,function(){})。

JQuery用$(“#btn”).click(function(){})来简化。

调用事件目的的stopPropagation()方法终止事件冒泡。

移除事件绑定:unbind()方法即可移除成分上绑定的风波,假诺bind(“click”)则移除click事件的绑定

*****************************************************************

⑦.调用样式表:

做多个小例子:

 

<!DOCTYPE html>
<html>

    <head>
        <script src="js/jquery-1.11.2.min.js"></script>
        <meta charset="{CHARSET}">
        <title></title>
    </head>
    <style>
        .aa{
             width: 100px;
             height: 100px;
             float: left; 
             background-color: #E77918;
             margin: 3px;
        }

    </style>
    <body>
        <div class="aa"></div>
        <div class="aa"></div>
        <div class="aa"></div>
        <div class="aa"></div>
    </body>
</html>
<script>
//找到div
//加点击事件
$(".aa").click(function(){
    $(".aa").css("background-color","#E77918");
    $(".aa").css("border-radius","0px");
    //找到所有的恢复
    $(this).css("background-color","blue");
    $(this).css("border-radius","55px");
    //找到自身元素,替换为blue
})
    //相当简洁
</script>

 

 

轻松完成点哪个人何人变色变圆,且苏醒其余的原本颜色与形状:

图:

Ajax 4

Ajax 5

jquery基础,有不懂的须求求看强大的诠释

相关文章