本文共 1857 字，大约阅读时间需要 6 分钟。

一、jq的书写

1、在导入jq源码的时候，就可以用jq的方法了

用jq的方法必须在前面加上jQuery，我们可以试试打印出jQuery,得到的结果为

当然为了简化，我们用$来代替，我们也可以试试Jquery是否等于$结果为true，所有为了简写我们通常写成$

console.log(jQuery===$)//结果为true

2、jq的简化历程

在没有使用jq之间，我们选中一个标签非常麻烦，例如

   
    123
   

要是我们选中这个div，用

var div =document.getElementById('box');var div=document.getElementsByTagName('div')[0];var div=document.querySelector('div');

但是看着就非常的麻烦，而且还要很多约束，但是我们引入了jq后，我们的代码就在一步一步的减少，接下来就是jq的不断简化的过程

$(document).ready(function(){
   			var box=document.getElementById('box');

简化：document可以不用写

$().ready(function(){
   			var box=document.getElementById('box');

再简化：.read可以不用写

$(function(){
   		var box=document.getElementById('box');})

现在最终的简化写法

$('#box')

从上面的过程就可以看出，jq在我们对代码的简化起到了很大的作用，让学代码可以用最短的代码来完成复杂的作用

例：我们来写一个点击一个按钮就在页面生成一个宽高为100的，背景颜色为green的小方块 原生js

var btn = document.getElementById('btn');	btn.onclick = function () {
   	var div = document.createElement('div');	div.style.height = '100px'	div.style.width = '100px'	div.style.background = 'green'	document.body.appendChild(div)}

jq写法

$('#btn').click(function () {
   			$('div').css({
   				width: '100px',				height: '100px',				background: 'green'			}).appendTo('body');		});

这样看着就极其简介和方便

二、强大的选择器

这里由于太多了，我又写了一遍文章来深度讲解jq的强大选择器

简单的几个jq选择器如下：

$('ul li:nth-child(1)')//选中ul下面第一个子元素，并且第一个子元素必须是li$('#ulId li:first-child')//第一个子元素必须是li$('.ulClass li:first-child + li')//选中第二个子元素必须是li$('li[name=blue]')//选中li上面属性为name=blue的元素

三、链式操作

$('.text').html('###').css('border','1px solid #000').width(200).height(200).css('background','grey');//.html是给元素添加文本内容

四、原生js获取到的对象与jquery取到的对象的对比

var h1=document.querySelector('h1');	h1.style.color='red';	//h1.css('color','pink');//报错，原生的对象不使用jquery里的方法var $h1=$('h1');	$h1.css('color','green');	//$h1.style.color='pink';//报错，jquery的对象也不能使用原后的方法

为了相互使用，可以把原生转成js，js转成jq

//原生转jquery$(h1).css('color','blue');//jquery转原生$h1[0].style.color='purple';

转载地址：http://rxtzi.baihongyu.com/