jquery与js的区别与基础操作

一.什么是 jQuery

jQuery是一个JavaScript库,它经过包装原生的JavaScript函数得到一整套概念好的艺术。它的作者是John
Resig,于2006年开创的一个开源项目,随着越来越多开发者的入,jQuery已经合并了JavaScript、CSS、DOM和Ajax于一体的强大作用。它好据此最为少之代码,完成再多复杂而艰苦的法力,从而得到了开发者的看重。

JQuery的助益:小巧、方便、功能强大。插件丰富、开源、免费。

 

二.Jquery的功能与优势

 

jQuery
作为 JavaScript 封装的库房,他的目的就是是为了简化开发者使用
JavaScript。主要功效发生以下几点:

1.如
CSS 那样访问同操作 DOM
2.改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加爱
5.各种卡通效果使用方便
6.于 Ajax 技术尤其全面
7.基于 jQuery 大量插件
8.机动扩展功能插件
jQuery 最要命之优势,就是特别的便民。比如效仿 CSS 获取 DOM,比原生的
JavaScript要便于最多。并且以多独 CSS
设置及之集中处理非常畅快,而最常用的 CSS
功能并且包装到独门的办法,感觉十分有中心。最关键的是 jQuery
的代码兼容性好好,你不需要连接头疼在考虑不同浏览器的兼容问题。

吓!以上都是网选择!

 

三.底是今日友好的学习心得给大家享受

第一我们清楚jquery是javascript的一个强的堆栈,想用利用我们即便不能不先行用他引入到js文件被下面是手续:

先是我们下载一个jquery文件,并拿他在js页面的head区域写及如下的代码:

图片 1

如此这般便拿jquery文件引入了,注意是引入方法是置顶的!;

jquery的用法及js的大致类似;

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

说一下JQuery选择器

网摘:

1、JQuery选择器用于查找满足条件的素,比如可以运用$(“#控件id”)来冲控件id获得控件的JQuery对象。相当给getElementByid。

2、$(“TagName”)来获取有指定签名的JQuery对象,相当给getElementsByTagName。

3、CSS选择器,同时选择具有某个样式的大都单因素:

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

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

5、层次选择器:

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

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

**(3)$(“.menuitem

  • div”)获取样式名吧menuitem之后的首先单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对象

 

2.操作内容:

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的值

 

3.操作属性:

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"));

 

4.操作样式

js:

 

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

 

jquery:

 

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

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

 

 

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

网摘:

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

增样式addclass(“myclass”)。

移除样式removeclass(“myclass”)。

切换样式togleclass(“myclass”)。如果在则失去丢样式,如果无存则长。

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

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

 

5.集合操作元素

 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>

 

 

 

图:

图片 2图片 3

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

网摘:

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

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

调用事件目标的stopPropagation()方法已事件冒泡。

移除事件绑定:unbind()方法即可移除元素上绑定的风波,如果bind(“click”)则移除click事件的绑定

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

7.调用样式表:

做一个有些例子:

 

<!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>

 

 

轻松实现点谁哪个变色变完美,且恢复其他的原本颜色及相:

图:

图片 4

图片 5

jquery基础,有不知情的终将要是扣押强大的诠释

相关文章