码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基础

时间:2019-06-12 15:12:23      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:ready   就是   交互   get   转换   轻量   完美   rip   doc   

1.认识jQuery

  1.jQuery简介:

    jQuery是继Prototype之后又一个优秀的JavaScript库,是由美国人John Resig于2006年创建的开源项目

  2.jQuer的用途:

  1. 访问和操作DOM元素 :使用jQyery可以很方便地获取和修改页面中的指定元素,无论是删除、移动还是复制某元素,jQuery都提供了一整套方便,快捷的方法,即减少了代码的编写,又大大提高了用户对页面的体验。
  2. 控制页面样式:通过引入jQuery,程序开发人员可以很便捷地控制页面地CSS地文件。使用jQuery操作页面样式可以很好地兼容各种浏览器。 
  3. 对页面事件地处理:可以使页面的表现层与功能开发分离,开发者更多地专注于程序的逻辑与功效;页面设计者侧重于页面的优化与用户体验。通过事件绑定机制,可以很轻松地实现两者地结合。   
  4. 方便地使用jQuery插件:引入jQuery后,可以使用大量地jQuery插件来完善页面地功能和效果,如jQuery UI插件库、Form插件、Validate插件等。
  5. 于Ajax技术地完美结合:利用Ajax异步读取服务器数据地方法,极大地方便了程序的开发,增强了页面交互,提升了用户体验;而引入jQuery之后,不仅完善了原有的功能,还减少了代码的书写,通过其内部对象或函数,加上几行代码就可以实现复杂的功能。

  3.jQuery的优势

  1. 轻量级
  2. 强大的选择器
  3. 出色的DOM封装
  4. 可靠的事件处理机制
  5. 出色的浏览器兼容性
  6. 隐式迭代
  7. 丰富的插件支持

2.jQuery语法结构

  $(selector).action();

  1.工厂函数$()

    在jQuery中,美元符号"$"等价于jQuery,即$()=jQuery()。$()的作用是将DOM对象转化为jQuery对象,只有将DOM对象转化为jQuery对象后,才能使用jQuery的方法。

  2.选择器selector

    jQuery支持CSS1.0到CSS3.0规则中所有的选择器

    $("#userName");                       //获取DOM中的id为userName的元素

    $("div");                //获取DOM中所有的div元素

    $(".content");        //获取DOM中class为content的元素

  3.方法action()

 

window.onload和$(document).ready区别:
  window.onload只能有一个,没有简写方式,必须等待页面所有资源加载完毕之后才能触发
  $(document).ready可有多个,简介为$(function(){//代码}),等待页面上所有文档结构(html标签)记载完后触发
JQuery设置样式:

<script type="text/javascript">
/*操作样式addClass()方法*/
$(function(){
//其实上就是动态的给标签加了一个class属性
/* $("#whtdiv").addClass("wht"); */
//单个设置css
/* $("#lldiv").css("color","yellow");
//设置多个
$("#lldiv").css({"border":"1px solid blue","background-color":"pink"});
//链式方式
$("#whtdiv").css("color","green").css("border","1px solid blue"); */

//下一个元素
$("#whtdiv").css("color","green").next().css("color","pink").next().css("color","orange");

});

</script>

JQuery对象和Dom对象的相互转换:

<script type="text/javascript">
$(function(){
/*js获取dom对象*/
/* var dom=document.getElementById("wht5"); */
/* alert(dom.innerHTML); */
/* alert(dom.innerText); */
/* 获取value属性值*/
/* alert(dom.value); */


/*jquery对象*/
/* var $jdom=$("#wht5"); */
/* alert(jdom.html()); */
/* alert(jdom.text()); */
/* 一般用于表单*/
/* alert($jdom.val()); */

/*Dom对象转换Jquery对象*/
var dom=document.getElementById("wht");
var $jdom=$(dom);
$jdom.html();


/*jquery转dom对象*/
var $jdom=$("#wht5");
var dom=$jdom[0];
/* var dom=$jdom.get(0); */
alert(dom.value);
}); 
</script>

 


 

jQuery基础

标签:ready   就是   交互   get   转换   轻量   完美   rip   doc   

原文地址:https://www.cnblogs.com/yjc1605961523/p/11009719.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!